十个div+css布局原则与技巧

一、处理九刀十断的情况

css2:使用伪类:first-child

例如:.news-list .item{border:1px solid #ddd;} .news-list .item:first-child{border:none;}

css3:使用伪类:not(:last-child)、:not(:first-child)、:not(:nth-child)等


二、遵循“左上”原则

² 九宫格列表

² 有序无序列表

² 按钮群组


三、巧用:before,:after伪类

1、before:在元素前面添加内容,并且可控制内容的样式(css2,可兼容IE8)

通常用于:三角、附属标题、边框、投影、清除浮动等

2、after:在元素前面添加内容,并且可控制内容的样式(css3,不兼容IE8)

通常用于:三角、附属标题、边框、投影、清除浮动等


四、具有层叠样式表中“层”的概念


根据一般项目业务依次可分为:

底层 组件(模块) 业务 主题 尺寸状态

base module business theme size/static

从左到右样式权限越高

五、可继承的box-sizing,a:hover等

1、让 box-sizing 继承 div.box:

*, *:before, *:after { box-sizing: inherit; } (存在底层样式里或某个组件、某个业务区域)

.box{ box-sizing: border-box; } (当前需要控制的对象)

2、让某个div.info里面的a:hover的color继承body:

a:hover{ color:inherit !important; }(存在底层样式里或某个组件、某个业务区域)

.info a{ color:#999; }(当前需要控制的对象)

六、固定的表格布局

.table{table-layout: fixed;}

七、使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

.item{ display: none; }

.item:nth-child(-n+3){ display: block; }

八、z-index 支持transition过渡

示例:Adding CSS3 transitions to the z-index property

九、单选、复选按钮的样式

我们不使用任何图片,来给某个复选按钮设置样式:

<input type="checkbox" id="check" name="check" />

<label for="check">Checkbox</label>

input[type=checkbox] {display: none;}

input[type=checkbox] + label:before {

content: "";

border: 1px solid #000;

font-size: 11px;

line-height: 10px;

margin: 0 5px 0 0;

height: 10px;

width: 10px;

text-align: center;

vertical-align: middle;

}

input[type=checkbox]:checked + label:before {

content: "\2713";

}

效果:

兼容性: :checked(IE9+)表现正常。在上面的示例代码中,我们隐藏了原始的复选按钮,用我们自己的代替。当被勾选时,我们通过content 显示一个 Unicode 字符。

我们还可以给复选按钮加上动画:

input[type=checkbox] + label:before {

content: "\2713";

color: transparent;

transition: color ease .3s;

}

input[type=checkbox]:checked + label:before {

color: #000;

}

下面是单选按钮的动画:

input[type=radio] + label:before {

content: "\26AB";

border: 1px solid #000;

border-radius: 50%;

font-size: 0;

transition: font-size ease .3s;

}

input[type=radio]:checked + label:before {

font-size: 10px;

}

完整的 Unicode 清单:Unicode®字符百科

十、适当时候使用visibility

在元素隐藏的情况下需要获得其属性(宽高)

发布于 2017-03-18