CSS布局技巧

2021-09-18 05:17:52 字數 676 閱讀 5463

兩欄布局

左邊寬度固定,浮動。右邊設定margin-left,寬度自適應。反之,亦可。

例子:

左邊

右邊

三欄布局

兩側浮動且寬度固定,左邊left浮動,右邊right浮動,中間設定margin-left和margin-right寬度自適應。注意,書寫順序是左右中。

例子:

左邊

右邊

中間

水平居中

方法有很多,我只列出常見的幾種方法。

行內元素:

父元素設定text-alignt:center;

padding:上下padding值一樣;

塊級元素:

垂直居中

方法有很多,我只列出常見的幾種方法。

行內元素:

line-height

padding:左右padding值一樣;

塊級元素

其他技巧

不要寫死寬高,盡量使用max-width,width寫死容易造成顯示bug,max-width意思是最大寬度,螢幕縮小寬度也會縮小。

加了display:inline-block;需要加上vertcal-align:top。否則元素底下會有空隙。

CSS頁面布局技巧(一)

1 字型型別 絕大多數使用者系統預設支援的中文字型有宋體 黑體 幼圓 楷體 預設支援的英文本型有arial arial black arial narrow century gothic comic sansms times new roman等等。在使用中,宋體和arial使用頻率最高。css提供...

詳解 CSS 居中布局技巧

方式一 css3 transform parent child 方式二 flex 布局 parent 適用於子元素為浮動,絕對定位,內聯元素,均可水平居中。居中的元素為常規文件流中的內聯元素 display inline 常見的內聯元素有 span,a,img,input,label 等等 pare...

高階css 常見布局技巧

1.margin負值的應用 1 讓每個盒子margin往左側移動 1px 正好壓住相鄰盒子邊框 2 滑鼠經過某個盒子的時候,提高當前盒子的層級即可 如果沒有有定位,則加相對定位 保留位置 如果有定位,則加z index 2.文字圍繞浮動元素 我是乙個保安,上班為了下班.我是乙個保安,上班為了下班.3...