十個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)等


二、遵循“左上”原則

2 九宮格列表

2 有序無序列表

2 按鈕群組


三、巧用：before，：after偽類

1、before：在元素前面添加內容，并且可控制內容的樣式（css2,可兼容IE8）

通常用于：三角、附屬標題、邊框、投影、清除浮動等

2、after：在元素前面添加內容，并且可控制內容的樣式（css3,不兼容IE8）

通常用于：三角、附屬標題、邊框、投影、清除浮動等


四、具有層疊樣式表中“層”的概念


根據(jù)一般項目業(yè)務依次可分為：

底層 組件（模塊） 業(yè)務 主題 尺寸狀態(tài)

base module business theme size/static

從左到右樣式權限越高

五、可繼承的box-sizing，a:hover等

1、讓 box-sizing 繼承 div.box：

*, *:before, *:after { box-sizing: inherit; } （存在底層樣式里或某個組件、某個業(yè)務區(qū)域）

.box{ box-sizing: border-box; } （當前需要控制的對象）

2、讓某個http://div.info里面的a:hover的color繼承body：

a:hover{ color:inherit !important; }（存在底層樣式里或某個組件、某個業(yè)務區(qū)域）

.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+）表現(xiàn)正常。在上面的示例代碼中，我們隱藏了原始的復選按鈕，用我們自己的代替。當被勾選時，我們通過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

在元素隱藏的情況下需要獲得其屬性（寬高）