CSS相关 | 盒模型 / 5个盒子水平垂直居中方案 / clientHeight,offsetHeight,scrollHeight...

CSS盒模型

• 概念：盒子模型就是用来装页面上的元素的容器，是矩形区域。
• 分类：
  -IE盒子模型(怪异盒子模型）：width=左右border+左右padding+content
  -W3C盒子模型（标准盒子模型）：width=content
• CSS3引入新属性：box-sizing：border-box、padding-box、content-box

盒子水平垂直居中方案（5个）

方法123的前提：子绝父相

父元素relative，子元素absolute

1.定位1

方法：假设盒子 width: 100px; height: 50px;
1.先把左上角固定在盒子中间（通过left：50%和top：50%）
2.再向上向下移动盒子的一半（ margin-top: -25px; margin-left: -50px; ）
缺点：必须知道子元素具体的宽高

        .box{
             /*缺点：必须知道具体的宽高,box定位absolute*/
            box-sizing: border-box;
            width: 100px;
            height: 50px;
            border: 1px solid #000;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
        }

2.定位2

方法：
1.margin:auto;
2.（上下左右）top / left / bottom / right 都设置为0；
缺点：子元素必须要有宽高

        .box2{
            /*子元素必须要有宽高*/
            border: 5px solid rgb(52, 214, 133);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width:100px;
            height: 100px;
        }

3.CSS3新功能

方法：top: 50%; left: 50%; transform: translate(-50%,-50%);
缺点：浏览器兼容问题

        .box1{
            /*CSS3新功能：transform 有兼容问题*/
            border: 5px solid rgb(214, 52, 52);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

4.flex弹性布局

方法：父元素的display: flex; justify-content: center; align-items: center;

        /*flex布局*/
        .father{
            display: flex;/* 设置为flex布局 */
            justify-content: center;/* 设置为水平居中 */
            align-items: center;/* 设置为垂直居中 */
        }
        .child{
            box-sizing: border-box;
            border: hotpink 3px solid;
            width: 100px;
            height: 100px;
        }

flex布局学习可以看阮一峰的教程：flex布局

5.JavaScript

方法：获取当前屏幕的宽高，获取盒子的宽高，定位时用（屏幕-盒子）/2

    <script>
        let HTML=document.documentElement,
            winW=HTML.clientWidth,
            winH=HTML.clientHeight,
            boxW=HTML.offsetWidth,
            boxH=HTML.offsetHeight;
        box.style.position="absolute";
        box.style.left=(winW-boxW)/2+'px';
        box.style.top=(winH-boxH)/2+'px';
    </script>

补充知识：

HTML元素都具有：clientHeight（网页可见区域高） 、 clientWidth（网页可见区域宽） offsetHeight（包括border的可见区域高）、 scrollHeight（网页正文全文高） 、scrollTop（网页被卷去的高） 属性
他们和元素的高度、滚动、位置 相关。

clientHeight：表示的是可视区域的高度，不包含border和滚动条.
offsetHeight：表示可视区域的高度，包含了border和滚动条.
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分.
clientTop：表示边框border的厚度，在未指定的情况下一般为0.
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度.
clientLeft的值就等于border-left的值
offsetLeft:当前元素左边相较于父元素的距离
用几个图说明，一看就清楚了：
图转自：csdn博客





flex容器属性

flex项目