css盒子模型樣式:
定義:margin:外邊距,圍繞在元素邊框的空白區,在元素外建立額外的空白。
border:邊框,圍繞元素內容和內邊距的一條或多條線。
padding:內邊距,在邊框和內容區之間。
屬性:margin(外邊距也叫作空白):
接受任何長度單位,百分數值和負值,還可設定為auto。
margin
margin-top
margin-right
margin-bottom
margin-left
top-right-bottom-left順序
margin:0 auto/*布局居中顯示*/
border(邊框):
邊框有3個方面: 寬度width 樣式style 顏色color(可以不按順序)
如:border-top-color
屬性同margin,top-right-bottom-left順序
如果想要邊框出現,就必須宣告樣式
padding(內邊距也叫作填充):
接受長度值,百分數值但不接受負值。
屬性同margin,top-right-bottom-left順序
**盒模型 :
box-sizing:border-box;
(以特定的方式定義匹配某個區域的特定元素)
盒子弧度:
border-radius:10px;
盒子陰影:
box-shadow:10px 10px ;
x方向偏移(必需) y方向偏移(必需)
其他屬性可選:
blur模糊距離
spread 陰影尺寸
color陰影顏色
inset將外部陰影改為內部陰影
補充:邊框樣式border-style
none:預設無邊框
dotted:點線框
dashed:虛線框
solid:實線框
double:兩個邊界
groove:定義3d溝槽邊界
ridge:定義3d脊邊界
lnset:定義3d嵌入邊框
outset:定義3d突出邊框
3 盒子模型
盒子模型是我學習css中使用頻率最高的模型,其中主要還是理解整個盒子的構成,以及其中各屬性的作用,最重要的問題就是合併巢狀問題。盒子模型 外邊距margin 邊框border 內邊距padding 內容 border color 邊框顏色 border width 邊框寬度 border style...
05盒子模型
目錄盒子模型用來 放 網頁中的各種元素 網頁設計中內容,如文字 等元素,都可以是盒子 div巢狀 網頁中盒子模型 寬度屬性 寬度with 最大寬度max width 最小寬度min width 長度值 百分比 auto 高度屬性 高度height 最大高度max height 最小高度min hei...
盒子模型 標準盒模型,怪異盒模型
當你的瀏覽器展現乙個元素時,這個元素會佔據一定的空間。這個空間由四部分組成。中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距,外邊距將該元素與其它元素分開。內邊距,邊框和外邊距在元素的上 右 下 左都可以有不同的大小。所有這些大小值都可以為0。顏色 內邊距總是跟元素的...