html css布局技巧

2021-08-28 16:49:44 字數 817 閱讀 3292

(一)、父元素的寬高的變化子元始終素鋪滿父元素

(二)、子元素位於父元素正中心

(三)、子元素垂直居中

(四)子元素水平居中

(五)固定寬高比盒子,padding-bottom的取值是參照width,如果width的值是百分比,那麼參照就是父元素的width值

(六)文字多於容器寬度顯示省略號

overflow: hidden 

white-space: nowrap

text-overflow: ellipsis

(七)box-sizing

屬性值:content-box、border-box

content-box:盒子的真實width = width+padding +border (標準盒模型)

border-box:盒子的真實width = width  (ie盒模型)

使用場景:

1. 當需要兩個寬度為50%的div確保並列時,設定box-sizing:border-box;

此時的width:50%,是content+padding+border的寬度。

2. 解決input標籤在各個瀏覽器中的相容性問題

參考:

HTML CSS 混合布局

charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0,左右根據寬度自適應!其實就是 水平居中的意思 style head class top div class ma...

html css簡單布局

經過幾天的學習漸漸掌握了一部分html和css 下面是用最近幾天學習的html css簡單布局的乙個頁面 這個頁面可以分為 header,middle和foot。其中head分為三部分,需要三個div標籤來進行布局 首先第乙個div標籤布局橙色區域以及整個header區域設定背景顏色,寬,高,外邊距...

html css 布局方式

1.預設的就是文件流的方式 以預設的 html 元素的結構順序顯示 2.浮動布局方式 通過設定 html 元素的float 屬性顯示 3.定位布局方式 通過設定 html 元素的position 屬性顯示 浮動 浮動 float css 實現布局的一種方式,包括 div在內的任何元素都可以以浮動的方...