高階css 常見布局技巧

2021-10-23 12:48:09 字數 926 閱讀 5246

1.margin負值的應用

1)讓每個盒子margin往左側移動 -1px 正好壓住相鄰盒子邊框

2)滑鼠經過某個盒子的時候,提高當前盒子的層級即可(如果沒有有定位,則加相對定位(保留位置),如果有定位,則加z-index)

2.文字圍繞浮動元素

我是乙個保安,上班為了下班.我是乙個保安,上班為了下班..

3.行內塊的巧妙運用

行內塊元素可以設定高度和寬度,也可以在一行上,並且中間有縫隙,就不需要調margin值,而且行內塊元素最大的特點是給父盒子新增text-align:center;所有的行內塊元素都能實現水平對齊

23

456...到第頁

確定

4.css三角強化

完成

¥1650

¥5650

5.css初始化

css初始化是指重設瀏覽器的樣式(css reset)

每個網頁都必須首先進行css初始化

/* 把我們所有標籤的內外邊距清零 */

*/* em和i斜體的文字不傾斜 */

em,i

/* 去掉li的小圓點 */

liimg

button

aa:hover

button,

input

body

.hide,

.none

/* 清除浮動 */

.clearfix:after

.clearfix

CSS布局技巧

兩欄布局 左邊寬度固定,浮動。右邊設定margin left,寬度自適應。反之,亦可。例子 左邊 右邊 三欄布局 兩側浮動且寬度固定,左邊left浮動,右邊right浮動,中間設定margin left和margin right寬度自適應。注意,書寫順序是左右中。例子 左邊 右邊 中間 水平居中 方...

CSS常見布局

一 聖杯布局 雙飛翼布局 布局特點 左右兩欄固定寬度,中間部分自適應 三列等高 實現乙個左邊100px右邊150px中間自適應的布局 先來看看效果圖 這是top 這是left 這是content 這是多行高度!這是right 這是foot 過程說明 1.先寫乙個基本布局 2.將中間left cont...

CSS常見布局

1.1使用inline block和text align parent.child1.2使用margin 0 auto實現 child1.3使用絕對定位實現 parent child margin left的負值為盒子寬度的一半 1.4使用flex布局實現 parent2.1使用vertical a...