//注意事項 important
如果乙個盒子沒有給定寬度/高度或繼承父類的寬度/高度,盒子大小不受影響
新盒子(盒子大小就是寬度,padding width 包含在width中)
box-sizing: border-box
盒子計算尺寸(重點)
box-sizing: content-box
外盒尺寸計算: 元素空間尺寸 width+border+padding+margin,height+border+padding+margin
內盒尺寸計算: 實際尺寸 width+padding+border,height+border+padding
盒子陰影
格式:box-shadow:水平位置,垂直位置,模糊距離(可選),陰影尺寸(可選),陰影顏色(可選),內/**影(可選 預設為**影outset//不寫,預設就行 inset)
paddding-top
padding-bottom
padding-right
padding-left
如果只寫乙個值,就是都屬於乙個值
兩個值,1值為 上下,2值為左右
三個值,1為上 2為左右 3為下
四個值 為 上右下左( 順時針順序)
margin-top
margin-bottom
margin-left
margin-right
外邊距可實現盒子居中對齊:
1.必須是塊內元素
2.盒子必須指定寬度
3.左右的外邊距都為auto,可使快元素水平居中
盡量不要給行內元素指定上下的內外邊距
設定系統自帶標籤帶有樣式,設定margin ,padding 為0
相鄰塊元素垂直外邊距合併(以最大的外邊距為準,不會疊加)
巢狀塊元素(父子集)
如父級元素沒有設定邊框或者內邊距,子元素和父元素外邊距合併,子元素不動
解決方案:為父元素定義1畫素的上邊框或內邊距 2.為父元素新增 overflow:hidden
border-top
border-bottom
border-left
border-right
語法:
border: border-width| border-style| border-color
綜合設定語法:
border-邊框[top,bottom,right,left]:寬度 樣式 顏色
屬性:
none 沒有邊框
solid 邊框為外線 **
deshed 邊框為虛線
dotted 邊框為點線
duoble 邊框為雙實線
border-collapse 合併相鄰邊框
border-radius:左上角 右上角 右下角 左下角
寬度和高度同值,取一半值為radius為圓形 或%50
兩個值為對角線關係
三個值按順序宣告
產品展示用插入
CSS 盒模型應用
預設情況下,width和height設定的是內容盒寬高 矛盾 衡量設計稿的時候往往使用的是邊框盒,但設定weight和height,則設定的是內容盒 方法 精確計算 css3屬性 box sizing 預設情況下,背景覆蓋邊框盒 可以通過background clip進行修改 background ...
CSS盒模型及排版
css盒模型由四部分組成 margin border padding content。外邊距 邊框 內邊距 內容。我們設定的width和height都是內容的大小,從而影響整個盒子的大小。盒子的佔位大小包括margin,但盒子的尺寸不包括margin。比如 盒子的高度 border width pa...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...