盒子模型（2）

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.水平布局

 水平方向

  margin-left border-left padding-left width padding-right border-right  margin-right

 浏览器规定  水平方向的七个值相加必须要等于父元素内容区的宽度

 0  5px  50px  100px  50px  5px  0    ==500   ?

 像以上这种，如果不等于的话，浏览器它就会自己去调整这7个值，让我们的等式成立，这个过程叫过度约束

浏览器如何调整的？

1、如果7个值中没有设置auto，那浏览器就会调整margin-right

 0  5px  50px  100px  50px  5px  290px    ==500

2、7个值中有3个值可以设置auto   margin-left    width   margin-right

   1个auto,其他两个值为固定值

      浏览器就会调整这个auto  

   2个auto，其他1个值为固定值

     margin-left  width      调整width

     width  margin-right     调整width

     margin-left  margin-right   同时margin-left margin-right，各占一半  

   3个auto

      margin-left  width  margin-right   调整width

2.阴影和圆角

 box-shadow

             用来设置元素的阴影效果，不会影响到页面布局

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径  默认值0px

                第四个值：颜色     默认值是盒子的背景色

 border-radius: ;  设置圆角效果

        border-radius:50%;设置圆形

3.行内元素盒模型

行内元素盒模型

    content   不可以直接设置宽高，被内容撑开的

    padding   可以内边距，但垂直方向不会挤别人,也就是不会影响页面的布局

    border    可以设置边框，但垂直方向不会挤别人，也就是不会影响页面的布局

    margin    左右可以设置外边距，垂直方向不可以设置

4.外边距重叠问题

1>兄弟元素的垂直方向外边距重叠的问题

    1、两者都为正值，则谁大听谁的

    2、若两者为负者，则谁的绝对值大，听谁的

    3、若一正一负，则听两者相加的结果值

  一般情况下，兄弟元素的外边距重叠问题，不需要额外的解决，利于我们开发

2>

 解决父子外边距重叠的方案 

方案一 

     border: 1px solid transparent; 

方案二：开启了元素的BFC属性

       overflow: hidden;

        margin-top: 100px;

5.盒子大小问题

 默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

            box-sizing  用来设置盒子尺寸的计算方式  width/height 指的是谁

                可选值：

                    content-box 内容区 默认值

                    border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区