盒子模型

什么是盒子？

• CSS处理网页时，它认为每个元素都包含在一 个不可见的盒子里。

• 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
  盒子模型

• 一个盒子我们会分成几个部分：
  -内容区(content)
  -内边距(padding)
  -边框(border)
  -外边距(margin)

  
  image.png

• 使用width来设置盒子内容区的宽度
  使用height来设置盒子内容区的高度
  width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区，内边距和边框共同决定
  为元素设置边框

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素 中的文本内容，子元素都是存在于内容区中的。
• 如果没有为元素设置内边距和边框，则内容区大小 默认和盒子大小是一致的。
• 通过width和height两个属性可以设置内容区的大 小。
• width和height属性只适用于块元素。

边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。

• 可以使用border属性来设置盒子的边框：

  border:1px red solid;
  

-上边的样式分别指定了边框的宽度、颜色和样式。

• 也可以使用分别指定上右下左 四个方向的边框。

  border-top/left/right/bottom
  

• 和padding一样，默认width和height并包括边框的宽度。

• 要为一个元素设置边框必须指定三个样式
  border-width:边框的宽度
  border-color:边框颜色
  border-style:边框的样式

•   使用border-width可以分别指定四个边框的宽度
    如果在border-width指定了四个值
    则四个值会分别设置给上、右、下、左，按照顺时针的方向设置的
    如果指定三个值
            则三个值会分别设置给上、左右、下
    如果指定两个值
            则两个值会分别设置给上下、左右
    如果指定一个值，则四边全都是该值
  
    除了border-width，CSS中还提供了四个border-xxx-width
    xxx的值可能是top right bottom left
    专门用来设置指定边的宽度
  

• 设置边框的颜色
  和宽度一样，color也提供四个方向的样式，可以分别指定颜色
  border-xxx-color
  border-color: red;
  border-color: red yellow orange blue;
  border-color: red yellow orange;
  border-color: red yellow;

• 边框可以设置多种样式：border-style:

  none（没有边框）
  dotted（点线）
  dashed（虚线）
  solid（实线）
  double（双线）
  groove（槽线）
  ridge（脊线）
  inset（凹边）
  outset（凸边）
  

• style也可以分别指定四个边的边框样式，规则和width一致，同时它也提供border-xxx-style四个样式，来分别设置四个边

  .box1{
        width: 300px;
        height: 300px;
        /*设置背景颜色*/
        background-color: #bfa;
        /*设置边框宽度*/
        border-width:10px;
        /*设置边框颜色*/
        border-color: red;
        /*设置边框样式*/
        border-style: solid dotted dashed double;
    }
  

内边距

• 顾名思义，内边距指的就是元素内容区与边框以内 的空间。

• 默认情况下width和height不包含padding的大小。

• 使用padding属性来设置元素的内边距。

• 例如：
  -padding:10px 20px 30px 40px
  -这样会设置元素的上、右、下、左四个方向的内边距。

  
  内边距
  

  内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

• 盒子的大小由内容区、内边距和边框共同决定
  盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
  盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width

        /*设置上内边距*/
        padding-top: 100px;
        /*设置右内边距*/
        padding-right: 100px;
        设置下内边距
        padding-bottom: 100px;
        设置坐内边距
        padding-left: 100px;
        /*
        使用padding可以同时设置四个边框的样式，规则和border-width一致
        */
        padding: 100px;
        padding: 100px 200px;
        padding: 100px 200px 300px;
  

外边距

• 外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置
  盒子有四个方向的外边距：
  margin-top
  margin-right
  margin-bottom
  margin-left

• 由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置

        /*设置上外边距，即盒子的上边框与其他盒子的距离*/
        margin-top: 100px;
        /*左外边距*/
        margin-left: 100px;
        /*设置右和下外边距*/
        margin-right: 100px;
        margin-bottom: 100px;
        /*
        外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动
        */
        margin-left: -100px;
        margin-top: -100px;
        margin-bottom: -100px;
        margin-bottom: -100px;
  

• margin还可以设置为auto，auto一般只设置给水平方向的margin如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
  垂直方向外边距如果设置为auto，则外边距默认就是0
  如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中
  所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

• 当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，所以这行代码margin:0 auto可 以使元素居中。

    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
  

• 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

    margin: 10px 20px 30px 40px;
  

外边距重叠

• 垂直外边距的重叠
  在网页中相邻的垂直方向的外边距会发生外边距的重叠

    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        /*为上边的元素设置一个下外边距*/
        margin-bottom: 100px;
    }
  
    .box2{
        width: 100px;
        height: 100px;
        background-color: green;
        /*为下边的元素设置一个上外边距*/
        margin-top: 100px;
  

相邻兄弟元素外边距取最大值100px

所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和

• 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
• 相邻父元素子元素外边距会发生外边距垂直重叠。 给父元素添加padding和border可以把父元素子元素隔开，或者在父子元素中间添加个元素，隔开父子元素就不会发生重叠。

浏览器的默认样式

• 浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

• 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

  *{margin=0;
    padding=0}
  

内联元素的盒模型

• 注意：内联元素不能设置宽和高！！

• 设置水平内边距,内联元素可以设置水平方向的内边距

        padding-left: 100px;
        padding-right: 100px;
  

• 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局

        padding-top: 50px;
        padding-bottom: 50px;
  

• 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

      border: 1px blue solid;
  

• 水平外边距，内联元素支持水平方向的外边距

     margin-left:100px;
     margin-right: 100px;
  

• 为右边的元素设置一个左外边距
  水平方向的相邻外边距不会重叠，而是求和

    margin-left: 100px;
  

• 内联元素不支持垂直外边距

  margin-top: 200px;
  margin-bottom: 200px;
  

display 和 visibility

display

• 我们不能为行内元素设置width、height、 margin-top和margin-bottom。

• 我们可以通过修改display来修改元素的性 质。

• 可选值：
  block：设置元素为块元素
  inline：设置元素为行内元素
  inline-block：设置元素为行内块元素
  none：隐藏元素（元素将在页面中完全消失）
  visibility

• visibility属性主要用于元素是否可见。

• 和display不同，使用visibility隐藏一个元 素，隐藏后其在文档中所占的位置会依然 保持，不会被其他元素覆盖。

• 可选值：
  visible：可见的
  hidden：隐藏的

  display: none;使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
  visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
  

overflow

• 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小

• 如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
  超出父元素的内容，我们称为溢出的内容

• 父元素默认是将溢出内容，在父元素外边显示
  通过overflow可以设置父元素如何处理溢出内容：

• 可选值：
  - visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
  - hidden, 溢出的内容，会被修剪，不会显示（常用）
  - scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
  - 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
  - auto，会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        /*自动添加滚动条*/
        overflow: auto;
    }
  

滚动条

文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

元素在文档流中的特点

• 块元素
  1.块元素在文档流中会独占一行，块元素会自上向下排列
  2.块元素在文档流中默认宽度是父元素的100%
  3.块元素在文档流中的高度默认被内容撑开
• 内联元素
  1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
  2.在文档流中，内联元素的宽度和高度默认都被内容撑开

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

浮动

块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开

• 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
  使用float来使元素浮动，从而脱离文档流
• 可选值：
  none，默认值，元素默认在文档流中排列
  left，元素会立即脱离文档流，向页面的左侧浮动
  right，元素会立即脱离文档流，向页面的右侧浮动
• 当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
• 元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
• 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
• 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
• 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。

内联元素的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
    .box1{
        /*在文档流中，子元素的宽度默认占父元素的全部*/
        /*height: 100px;*/
        background-color: #bfa;
        /*
        当元素设置浮动以后，会完全脱离文档流.
        块元素脱离文档流以后，高度和宽度都被内容撑开
        */
        /*float: left;*/
    }
    .s1{
        /*
        开启span的浮动
        内联元素脱离文档流以后会变成块元素
         */
         float: left; 
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
    </style>
    </head>
    <body>
        <div class="box1">a</div>
        <span class="s1">hello</span>
        <span class="s1">hello</span>
    </body>
</html>

内联元素是不能设置宽和高的，但是浮动以后内联元素变成块元素了，就能够设置宽和高了。

高度塌陷

• 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高

• 但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷

• 由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
  所以在开发中一定要避免出现高度塌陷的问题,
  我们可以将父元素的高度写死，以避免塌陷的问题出现，
  但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的

• 根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
  当开启元素的BFC以后，元素将会具有如下的特性：
  1.父元素的垂直外边距不会和子元素重叠
  2.开启BFC的元素不会被浮动元素所覆盖
  3.开启BFC的元素可以包含浮动的子元素

        如何开启元素的BFC
            1.设置元素浮动
                - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
            2.设置元素绝对定位
            3.设置元素为inline-block
                - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
            4.将元素的overflow设置为一个非visible的值
        推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
  

BFC块的格式化环境，默认是关闭的，

• 当开启的时候：
  1、父元素的垂直外边距不会和子元素重叠
  2、开启的BFC元素不会被浮动元素所覆盖
  3、开启的BFC元可以包含浮动的子元素

• 如何开启：
  1、设置元素浮动(会导致父元素宽度消失，下面的元素顶上来，不推荐使用)
  2、设置元素绝对定位（不推荐使用）
  3、设置元素为inline-block（不推荐使用）
  4、解决高度塌陷方案一：
  将元素的overflow设置为一个非visible的值（推荐）（overflow:hidden）
  5、解决高度塌陷方案二：
  可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
  然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构（推荐）
  6、解决高度塌陷方案三：可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
  这样做和添加一个div的原理一样，可以达到一个相同的效果，
  而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用通过设置after伪类centent:"";并转成块元素display:biock;再清除浮动clear:both;解决高度塌陷。（推荐）
  使用clearfix命名
  在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理

    .clearfix:after{
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
    }
    /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
    .clearfix{
        zoom: 1;
    }
  </style>
     </head>
     <body>
  <div class="box1 clearfix">
    <div class="box2"></div>
   </div>
  </body>
  </html>
  

• 但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
  在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
  开启方式很多，我们直接使用一种副作用最小的：
  直接将元素的zoom设置为1即可

        zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
        zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
        zoom这个样式，只在IE中支持，其他浏览器都不支持
  

如果设置了宽度，CSS就默认开启BFC

 .clear{
       centen="";
       display:block;
       clear:both;
    }
  .clear{
       zoom:1;
    }

清除浮动

由于受到box1浮动的影响，box2整体向上移动了100px
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

• 可选值：
  none，默认值，不清除浮动
  left，清除左侧浮动元素对当前元素的影响
  right，清除右侧浮动元素对当前元素的影响
  both，清除两侧浮动元素对当前元素的影响
  清除对他影响最大的那个元素的浮动

    .box3{
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear: both;
    }
                    清除box1浮动对box2产生的影响
        清除浮动以后，元素会回到其他元素浮动之前的位置
  

• clear属性可以用于清除元素周围的浮动对元素的影响。
  也就是元素不会因为上方出现了浮动元素而改变位置。

文字绕图

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

    .box1{
        width: 100px;
        height: 100px;
        background-color: #bfa;
        float: left;
    }
    .p1{
        /*height: 200px;*/
        background-color: yellow;

文字绕图