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过渡

 

示例：http://zomigi.com/demo/z-index_transition.html

 

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

 

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

<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 清单:https://unicode-table.com/cn/

 

十、适当时候使用visibility

 

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