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