css布局

1.W3C盒子模型;

盒子的总宽度 = margin + padding +border+ width;

width 表示内容的宽度

IE盒子模型:

盒子的总宽度 = margin + width;

width 包含了padding 和margin;

1.CSS3的方法实习水平垂直居中:

2.关于float布局的理解;

float:right;相对于前一个非浮动元素定位,,这个非浮动元素可以是父元素,也可以是兄弟元素;

float:left;相对于非浮动元素定位,脱离文档流;

3.CSS3实现水平垂直居中的方式;

HTML:

          content

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)三栏自适应宽度的布局:

原理:浮动,浮动后产生一个块级元素;

左右设置宽度并分别左右浮动,中间元素不浮动;