css 框模型相关知识

1. 元素框
   

1. content内容区

2. padding内边距

3. border边框

4. margin外边距

2.横向格式化


<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        div:first-of-type {
            background-color: lightgreen;
            margin-bottom: auto;
            margin-bottom: 10px;
        }

        div:last-of-type {
            background-color: lightblue;
            margin-top: auto;
            margin-top: 20px;
        }
    </style>

margin和content可以设置atuo属性；其他属性要么为0要么为固定值。

横向格式化时, 左右外边距值为`auto`时, 由浏览器根据父元素空间自动计算

3.纵向格式化

<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        div:first-of-type {
            background-color: lightgreen;
            margin-bottom: auto;
            margin-bottom: 10px;
        }

        div:last-of-type {
            background-color: lightblue;
            margin-top: auto;
            margin-top: 20px;
        }
    </style>

纵向格式化时, 上下外边距值为`auto`时, 浏览器会将它强制设置为`0`，这也是为啥 块元素没法设置垂直居中的原因，可以将它转换为表格元素来设置垂直居中。

总结：主要是要学习元素框的四个部分，以及熟悉横向格式化已经纵向格式化margin已经content设置auto值时其他元素值改如何计算。最后学习了点浮动的知识，当元素纵向排列时，会出现纵向外边距折叠现象。