1.W3C盒子模型;
盒子的總寬度 = margin + padding +border+ width;
width 表示內(nèi)容的寬度
IE盒子模型:
盒子的總寬度 = margin + width;
width 包含了padding 和margin;
1.CSS3的方法實習(xí)水平垂直居中:
2.關(guān)于float布局的理解;
float:right;相對于前一個非浮動元素定位,,這個非浮動元素可以是父元素,也可以是兄弟元素;
float:left;相對于非浮動元素定位,脫離文檔流;
3.CSS3實現(xiàn)水平垂直居中的方式;
HTML:
<div?? class="vertical-container">
????????? <div?? class="content">content</div>
</div>
CSS:
.vertical-container{border: 1px? solid?? blue;}
.content{
??????? height: 300px;
??????? display: -webkit-flex;
??????? display: -moz-flex;
??????? display:flex;
???????? -webkit-align-items:center;
???????? -moz-align-items: center;
???????? align-items:center;
???????? -webkit-justify-content: center;
? ?????? -moz-justify-content: center;
?????????? justify-content: center;
}
關(guān)鍵代碼是
display: flex;
align-items: center;
justify-content: center;
2.兩欄自適應(yīng)寬度:
原理:用浮動來實現(xiàn);
左邊寬度固定,向左浮動,右邊寬度設(shè)置百分比;
左邊{
?????? width: 固定;
??????? float:? left;
}
右邊{
?????? width: 百分比;
?????? margin-left: 固定;
}
原理:利用彈性盒子布局;
父元素{display:flex;}
子元素1{
?????? width: 固定;
?? ???? float: left;
}
子元素2{flex: 1;}
(2)兩欄固定寬度
把子元素2的寬度由百分比改為固定值;
(3)兩欄固定寬度居中
父元素{margin:0 auto;width:固定;}
子元素1{width: 固定;float:left;}
子元素2{width:百分比/固定;}
3.三欄布局:
(1)父元素用display:flex;子元素是左右兩邊固定寬度,中間自適應(yīng)寬度,但是設(shè)置flex:1;
這是一種自適應(yīng)窗口的彈性盒布局
(2)三欄自適應(yīng)寬度的布局:
原理:浮動,浮動后產(chǎn)生一個塊級元素;
左右設(shè)置寬度并分別左右浮動,中間元素不浮動;
