3. 內邊距
4. 外邊距
布局方式
3. 定位布局
語法：
border
:width style color;
樣式取值
含義solid
實線邊框
dotted
點線邊框
dashed
虛線邊框
double
雙線邊框
分別設定某一方向的邊框，取值：width style color;
屬性作用
border-top
設定上邊框
border-bottom
設定下邊框
border-left
設定左邊框
border-right
設定右邊框
元素設定寬高為0
統一設定四個方向透明邊框
調整某個方向邊框可見色
屬性：border-radius 指定圓角半徑
取值：畫素值或百分比
取值規律：
乙個值 表示統一設定上右下左
四個值 表示分別設定上右下左
兩個值 表示分別設定上下 左右
三個值 表示分別設定上右下，左右保持一致
作用：調整元素內容框與邊框之間的距離
取值：
20px; 乙個值表示統一設定上右下左
20px 30px; 兩個值表示分別設定(上下) (左右)
20px 30px 40px; 三個值表示分別設定上右下，左右保持一致
20px 30px 40px 50px; 表示分別設定上右下左
padding-top
padding-right
padding-bottom
padding-left
作用：調整元素與元素之間的距離
特殊：1）margin:0; 取消預設外邊距
2）margin:0 auto;左右自動外邊距，實現元素在父元素範圍內水平居中
3）margin:-10px;元素位置的微調
單方向外邊距：只取乙個值
margin-top
margin-right
margin-bottom
margin-left
1）垂直方向
1. 子元素的margin-top作用于父元素上
解決：為父元素新增頂部邊框；
或為父元素設定padding-top:0.1px;
2. 元素之間同時設定垂直方向的外邊距，最終取較大的值
2）水平方向
塊元素對盒模型相關屬性（width,height,padding,border,margin）完全支援;
行內元素對盒模型相關屬性不完全支援，不支援width/height,不支援上下邊距
行內元素水平方向上的外邊距會疊加顯示
帶有預設邊距的元素：
body,h1,h2,h3,h4,h5,h6,p,ul,ol預設布局方式,按照**書寫順序及標籤型別從上到下,從左到右依次顯示
主要用於設定塊元素的水平排列
屬性
float可取left或right，設定元素向左浮動或向右浮動
float
:left/right;
常見問題
子元素全部設定浮動,導致父元素高度為0,影響父元素背景色和背景展示,影響頁面布局
解決結合偏移屬性調整元素的顯示位置
屬性position
取值可取relative（相對定位）/absolute（絕對定位）/fixed（固定定位）
postion
:relative/absolute/fixed/static
設定定位的元素可以使用偏移屬性調整距離參照物的位置
top 距參照物的頂部
right 距參照物的右側
bottom 距參照物的底部
left 距參照物的左側
元素設定相對定位,可參照元素在文件中的原始位置進行偏移,不會脫離文件流1. 絕對定位的元素參照離他最近的已經定位的祖先元素進行偏移,如果沒有,則參照視窗進行偏移
2. 絕對定位的元素會脫流,在文件中不佔位,可以手動設定寬高
「父相子絕」 : 父元素設定相對定位,子元素絕對定位，參照已定位的父元素偏移.
1. 參照視窗進行定位,不跟隨網頁滾動而滾動
2. 脫離文件流
元素發生堆疊時可以使用 z-index 屬性調整已定位元素的顯示位置，值越大元素越靠上：
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
Web前端 CSS盒子模型
2.內邊距 3.盒陰影 4.盒模型概念 5.標籤最終尺寸的計算 盒子模型分別由外邊距 邊框 內邊距和標籤內容組成。屬性 margin 作用 調整標籤與標籤之間的距離 特殊 1 margin 0 取消預設外邊距 2 margin 0 auto 左右自動外邊距，實現標籤在父標籤範圍內水平居中 3 mar...
web前端 css盒子模型
css最重要的是盒子模型，盒子組成一切 盒子構成 首先可以直接設定各個區域 box 注意 這裡的width和height設定的大小是內容區的大小，不是整個盒子的大小。內邊距 邊框和外邊距可以應用於乙個元素的所有邊，也可以應用於單獨的邊。外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。當wid...