1 元素尺寸
（1）設(shè)置元素尺寸
div {
width: 200px;
height : 200px;
}
（2）限制元素尺寸
div {
min - width :100px;
min - height:100px;
max - width:300px;
max - heigth:300px;
}
這一組主要是應(yīng)對(duì)可能動(dòng)態(tài)產(chǎn)生元素尺寸變大變小的問題，從而限制它最大和最小值
（3）auto自適應(yīng)
div {
width : auto;
height ： auto;
}
auto 是默認(rèn)值品嚣，width 在auto 下是100%的值贞铣；height 在auto 下是自適應(yīng)
（4）百分比模式
a {
width : 300px;
height : 300px;
}
b {
width ： 50%嘶朱；
height : 50%;
}
<div id="a">
<div id="b">我是html5</div>
</div>
百分比就是相對(duì)于父元素長(zhǎng)度來(lái)衡定的
2 元素內(nèi)邊距
padding
：設(shè)置元素內(nèi)部邊緣填充空白的大小
(1)設(shè)置四個(gè)邊距
div {
padding - top: 10px;
padding - bottom: 10px;
padding - left:10px;
padding - right：10px;
}
(2)簡(jiǎn)寫 形式 上 左 下 右
div {
padding : 10px 10px 10px 10px;
}
(3)簡(jiǎn)寫形式 上下 左右
div {
padding : 10px 20px;
}
3 元素外邊距
：設(shè)置元素外部空白的邊緣區(qū)域大小
（1）設(shè)置四個(gè)外邊距
div {
margin-top: 10px;
margin-bottom: 10px;
margin-left; 10px;
margin-right: 10px;
}
（2）簡(jiǎn)寫形式 上 左 下 右
div {
margin : 10px 10px 10px 10px;
}
（3）簡(jiǎn)寫形式 上下 左右
div {
margin : 10px 20px;
}
4 處理溢出
： 當(dāng)設(shè)置了元素固定尺寸且內(nèi)容過大時(shí)，就會(huì)出現(xiàn)溢出的問題鸿脓。溢出主要朝兩個(gè)方向：右
側(cè)和底部
（1）溢出屬性
overflow-x 設(shè)置水平方向的溢出
overflow-y 設(shè)置垂直方向的溢出
overflow 溢出簡(jiǎn)寫形式
（2）溢出處理值
auto 瀏覽器自行處理溢出內(nèi)容躁愿。如果有溢出內(nèi)容袍睡，就顯示滾動(dòng)條创泄，否
則就不顯示滾動(dòng)條
hidden 如果有溢出艺玲，直接減掉
scroll 不管是否溢出，都會(huì)出現(xiàn)滾動(dòng)條鞠抑。但不同平臺(tái)和瀏覽器顯示方式
不同
visible 默認(rèn)值 不管是否溢出都顯示內(nèi)容
div {
overflow-y: auto;
}
5 元素可見性
visibility
屬性
visible:默認(rèn)值饭聚，元素在頁(yè)面上可見
hidden:元素不可見，但會(huì)占據(jù)空間
collapse:元素不可見碍拆，隱藏表格的行與列若治，
如果不是表格，則和hidden 一樣
div {
visiblity：hiddem
}
隱藏div元素感混，會(huì)占位
table > tr :first-child {
visibility: collapse;
}
隱藏表格行或列，不占位
6 元素盒類型
display屬性可以改變?cè)氐暮蓄愋?br>
屬性
inline:盒子為行內(nèi)元素
block:盒子為塊級(jí)元素
inline-block:盒子為行內(nèi)-塊級(jí)元素
none:將元素隱藏且不占位置
（1）元素盒類型
塊級(jí)元素（區(qū)塊）: <dov>,<p>
能夠設(shè)置尺寸
隔離其他元素
行內(nèi)元素（內(nèi)聯(lián)）:<span>,<b>
不能夠設(shè)置尺寸
自適應(yīng)內(nèi)容
其他元素緊跟在其后
行內(nèi)塊級(jí)元素（內(nèi)聯(lián)塊）
能夠設(shè)置尺寸
無(wú)法隔離其他元素: <img>
將行內(nèi)元素轉(zhuǎn)換為塊級(jí)元素
span {
background :silver
width : 100px;
height : 200px;
display:block
}
將塊級(jí)元素轉(zhuǎn)換為行內(nèi)元素
div {
background: red;
width : 100px;
height:200px;
display:inline;
}
將塊級(jí)元素轉(zhuǎn)化成行內(nèi)-塊元素
div {
background: silver;
width: 200px;
height: 200px;
display: inline-block;
}
將元素隱藏且不占位
div {
display: none;
}
7 元素的浮動(dòng)
float ：建立浮動(dòng)盒浮動(dòng)的方向
屬性
left:左浮動(dòng)
right：右浮動(dòng)
none:禁止浮動(dòng)
（1）實(shí)現(xiàn)聯(lián)排效果
a {
background: gray;
float: left;
}
b {
background: maroon;
float: left;
}
c {
background: navy;
float: left;
}
（2）實(shí)現(xiàn)元素右浮動(dòng)
c {
background: navy;
float: right;
}
（3）取消元素的浮動(dòng)
c {
background: navy;
float: none;
}
問題：當(dāng)一個(gè)元素盒子被設(shè)置浮動(dòng)后礼烈，其他元素會(huì)自動(dòng)堆疊處理弧满，造成部分或全部不可見
使用clear屬性可以處理
屬性值
left：左邊不可浮動(dòng)
right：右邊不可浮動(dòng)
boyh：兩邊都不可浮動(dòng)
none:兩邊都可以浮動(dòng)
c {
background:blue;
clear:both 兩邊都不可浮動(dòng)
}
