1、盒子模型盒子模型组成

    内容：  实体化宽高和里面的文字图片等等

     边框：  border

  内边距：   padding  拉开内容到盒子边缘的距离；

  外边距：   margin   拉开盒子与盒子之间的距离；

2、嵌套垂直外边距合并问题环境

如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；

3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系

3、网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

4、清除浮动的影响问题描述

在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会影响我们后面的盒子布局；

清除浮动本质：

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案

清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；

方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；

额外标签法

在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：

<div style=“clear:both;”></div>

书写方便，但是会添加许多没有意义的标签，不建议使用

父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

after伪元素法（会使用一直用）

After伪元素清除浮动法实际开发中推荐使用：

/*声明清除浮动的样式*/

.clearfix:after {

       content:"";

       display:block;

       height:0;

       visibility:hidden;

      clear: both;

  }

.clearfix {

    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁的子级盒子有浮动，我们就给谁添加，也就是在当前盒子的最后面添加一个空的盒子相当于我们的额外标签法；

双伪元素清除浮动

/*声明清除浮动的样式*/

.clearfix:before,.clearfix:after {

       content: "";

       display: table;

}

.clearfix:after{

clear:both;

}

.clearfix{

             *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

5、定位定位布局：

定位模式+边偏移（方向英文更改）

边偏移：

top、bottom、left、right属性；

定位的精髓：

利用更改方向英文来进行位置设置；

6、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

1、盒子模型盒子模型组成

    内容：  实体化宽高和里面的文字图片等等

     边框：  border

  内边距：   padding  拉开内容到盒子边缘的距离；

  外边距：   margin   拉开盒子与盒子之间的距离；

2、嵌套垂直外边距合并问题环境

如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；

3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系

3、网页布局的三种机制

普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；

行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em；

浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；

定位：将盒子在浏览器的某一个位置，后期会经常用到；

浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

4、清除浮动的影响问题描述

在布局的时候如果父级盒子没有设置固定的高度，里面的子级盒子进行浮动设置，父级盒子就不会被撑开，就会影响我们后面的盒子布局；

清除浮动本质：

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案

清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；

方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；

额外标签法

在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：

<div style=“clear:both;”></div>

书写方便，但是会添加许多没有意义的标签，不建议使用

父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

after伪元素法（会使用一直用）

After伪元素清除浮动法实际开发中推荐使用：

/*声明清除浮动的样式*/

.clearfix:after {

       content:"";

       display:block;

       height:0;

       visibility:hidden;

      clear: both;

  }

.clearfix {

    *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁的子级盒子有浮动，我们就给谁添加，也就是在当前盒子的最后面添加一个空的盒子相当于我们的额外标签法；

双伪元素清除浮动

/*声明清除浮动的样式*/

.clearfix:before,.clearfix:after {

       content: "";

       display: table;

}

.clearfix:after{

clear:both;

}

.clearfix{

             *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

谁里面有浮动就在谁的开始标签身上添加class=“clearfix”

5、定位定位布局：

定位模式+边偏移（方向英文更改）

边偏移：

top、bottom、left、right属性；

定位的精髓：

利用更改方向英文来进行位置设置；

6、定位模式

常见的定位模式分为：相对定位、绝对定位、固定定位

定位属性

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;