CSS盒子模型-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

如何调整的
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࿱