CSS相关 | 盒模型5个盒子水平垂直居中方案clientHeight,offsetHeight,scrollHeight...-USB迷|专注于互联网分享

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项目