1.W3C盒子模型;
盒子的总宽度 = margin + padding +border+ width;
width 表示内容的宽度
IE盒子模型:
盒子的总宽度 = margin + width;
width 包含了padding 和margin;
1.CSS3的方法实习水平垂直居中:
2.关于float布局的理解;
float:right;相对于前一个非浮动元素定位,,这个非浮动元素可以是父元素,也可以是兄弟元素;
float:left;相对于非浮动元素定位,脱离文档流;
3.CSS3实现水平垂直居中的方式;
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;
}
关键代码是
display: flex;
align-items: center;
justify-content: center;
2.两栏自适应宽度:
原理:用浮动来实现;
左边宽度固定,向左浮动,右边宽度设置百分比;
左边{
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;子元素是左右两边固定宽度,中间自适应宽度,但是设置flex:1;
这是一种自适应窗口的弹性盒布局
(2)三栏自适应宽度的布局:
原理:浮动,浮动后产生一个块级元素;
左右设置宽度并分别左右浮动,中间元素不浮动;
