盒子模型知识拓展

一、水平布局

1、面试题：什么是过度约束，浏览器如何调整？  

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

如果不等于的话，浏览器就会强制调整这7个值，让你相等。我们管这个过程叫过度约束

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

      0    10   0   100  0   10   0  == 600

          120   =？  600

2、如何调整的方法：

   1、如果水平方向7个值当中没有auto，那么浏览器自动调整就是margin-right

        0    10   0   100  0   10   380  == 600

   2、水平方向7个值当中，有三个值可以被设置为auto，width、margin-left、margin-right

       有1个auto   ,谁是auto就调整谁

            width为auto

              0    10   0   580  0   10   0  == 600

            margin-left

              480    10   0   100  0   10   0  == 600

            margin-right

              0    10   0   100  0   10   480  == 600

       有2个auto    width、margin-left；width、margin-right；margin-left、margin-right

          width、margin-left  为auto    调整的是width

          width、margin-right  为auto    调整的是width

          margin-left、margin-right 为auto  margin-left、margin-right各占一半，把元素挤到中间

     

       有3个auto  

         width、margin-left、margin-right都为auto，调整的是width

      总结：有auto的话

         width>margin-left、margin-right

主要是针对图文垂直对齐方式，或者表格垂直对齐方式 

         vertical-align: middle; 

二、垂直布局

块元素的高度默认情况是被内容撑开的，那如果设置，设置多少是多少

      一般情况，我们不给父元素设置固定的高度，

          让它根据子元素的内容自动调整高度

          垂直布局

           overflow属性

            可选值：

              visible 默认值  正常显示

              hidden 剪裁多余

              auto   自动根据内容显示是否出现滚动条

              scroll  生成双向滚动条

三、外边距的折叠

垂直外边距的重叠

    1、兄弟元素

       如果两个都是正值，谁大听谁的

       如果两个都是负值，绝对值谁大听谁的

       如果一正一负，两者相加，听最终结果

    总结：兄弟元素的外边距重叠，对我们开发来讲，

            一般是有利，所以不用做特殊调整  

   2、父子元素

      父子外边距重叠，它会影响页面其他元素，所以必须要调整

       如何调整

         1、不用margin-top，给父元素用padding-top，同时减小父元素的高度

         2、在父子之间用边框隔开

         3、开启元素的BFC（隐含属性）

              overflow:hidden;

四、内联元素的盒子

1、行内元素的盒子模型

      内容区  不能设置宽高，是被内容撑开

      内边距   可以设置，但垂直方向不会改变页面的布局，也就是不会挤别人

      边框     可以设置，但垂直方向不会改变页面的布局，不会挤别人

      外边距    垂直方向不能设置外边距，水平方向可以设置，而且水平方向外边距不会重叠

2、display 用来设置元素显示的类型

                   可选值：

                      inline  将元素设置为行内元素

                      block   将元素设置为块元素

                      inline-block  行内块块元素（即可以设置宽高，又不会独占一行）

                      table   将元素设置为一个表格

                      none    元素不在页面中显示（隐藏一个元素）

3、visibility 用来设置元素的显示状态

                    可选值：

                    visible 默认值  元素在页面中正常显示

                    hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

      面试题：

      隐藏元素有几种方式，几者区别是什么

        1、display：none；   删除了元素，元素位置不保留

        2、visibility：hidden；  元素位置保留

        3、将元素变为透明     元素位置保留

五、默认样式

1、重置样式表，专门用来对浏览器的样式进行重置

        注意：

          a、引入reset.css文件，前提是这个文件要有

          b、引入reset.css文件一定是在你写的样式之前引入

2、默认样式：

           浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

           所以为很多的元素都设置了一些默认的margin和padding等等

         而它的这些默认样式，正常情况下我们是不需要使用的。

           所以我们往往在编写样式之前需要将浏览器中的默认样式都去除    

         方式一：

         a:清除浏览器的默认样式，手写，这种方式只适用于结构简单，小的练习

         方式二：

         b:引入重置样式表

六、阴影和圆角

1、box-shadow

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

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

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

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

                第四个值：颜色     默认是黑色，可选

2、border-radius

             用来设置圆角  以10px为半径画圆

             border-radius: 50%;  设置圆形

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius