本節學習元素的尺寸、元素的邊距以及內容溢位等問題。
元素尺寸
①weight寬度。②height高度。③min-width最小寬度。④min-height最小高度。⑤max-width最大寬度。⑥max-height最大高度。
最大最小主要是應對可能動態產生元素尺寸變大變小的問題,從而限制它的最大和最小。
元素內邊距(會擴充總長度,而不是向內縮)
①padding-top向上。②padding-bottom向下。③padding-left向左。④padding-right向右。
簡寫形式,只寫乙個padding。則乙個引數表示上下左右,兩個引數表示上下和左右,三個引數表示上和左右和下,四個引數表示上和右和下和左。
元素外邊距
①margin-top上邊。②margin-bottom下邊。③margin-left左邊。④margin-right右邊。
簡寫形式,只寫乙個margin。則乙個引數表示上下左右,兩個引數表示上下和左右,三個引數表示上和左右和下,四個引數表示上和右和下和左。
處理溢位
①overflow-x設定水平方向溢位。②overflow-y設定垂直方向溢位。③overflow簡寫屬性。
溢位的處理主要由四種處理值:①auto如有溢位顯示滾動條,否則不顯示。②hidden如有溢位直接減掉。③scroll不管是否溢位都顯示滾動條。④visible不管是否溢位都顯示,亦是預設。
*測試**
lang="zh-cn">
css盒模型 上title>
charset="utf-8">
rel="stylesheet"
type="text/css"
href="style.css">
head>
我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,div>
body>
html>
@charset
"utf-8"
;div
執行結果:
學習CSS盒模型和CSS3彈性盒模型
css盒模型本質是乙個盒子,封裝周圍的html元素,它包括 邊距,邊框,填充,和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。div300px 寬 50px 左 右填充 50px 左 右邊框 50px 左 右邊距 450px 最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度...
CSS3 盒模型設計
一 彈性盒模型 a 注意在使用彈性盒模型的時候父元素必須要加display box 或 display inline box 例 b box orient 定義盒模型的布局方向 i.horizontal 水平顯示 ii.vertical 垂直方向 例 doctype html html head m...
css3 彈性盒模型
1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定,兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...