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

时间：2023-08-29 23:54:02 | 来源：网站运营

时间：2023-08-29 23:54:02 来源：网站运营

十个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、让某个http://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

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