本文详细介绍了CSS中如何设置元素高度为屏幕高度，并探讨了居中、BFC、盒模型、浮动、栅格化、自适应布局等关键概念。讲解了如何使用margin、transform、flex布局等方法实现垂直居中，以及BFC解决清除浮动和边距重叠问题。同时，还涵盖了CSS选择器优先级、自适应单位 vh/vw 的应用、弹性布局（flex）等内容。
1.居中
内联元素居中(行元素)：
.center-children {
background-color: aqua;
text-align: center;
}
class="center-children"> 内联元素(行元素)
块级元素：
//脱离了文档流所以是相对与浏览器窗口水平垂直居中
1.脱离文档流的margin方法：(父元素高度确定，子元素高度不确定)
.center-me {
//父元素设置position和宽高
width: 200px;
height: 200px;
background-color: coral;
position: relative;
}
img{
position: absolute;
margin:auto;
top:0;
bottom: 0;
left: 0;
right: 0;
}
class="center-me"> src="./images/birthday_flower(20).jpg" alt="">
2.脱离文档流的transform方法：(父元素高度确定，子元素高度确定)
.center-me {
//父元素设置position和宽高
width: 200px;
height: 200px;
background-color: coral;
position: relative;
}
img{
width：100px；
height：100px；
position：absolute；
top：50%；
left：50%；
transform：translate(-50%，-50%)；
}
class="center-me" > src="./images/birthday_flower(20).jpg" alt="">
3.flex布局居中(父元素高度确定，子元素高度不确定)
.center-me {
//父元素
width: 1000px;
height: 1000px;
background-color: coral;
display: flex;
justify-content: center;//主轴对齐
align-items: center;//纵轴对齐
}
class="center-me"> src="./images/birthday_flower(20).jpg" alt="">
4.父子元素高度都不确定
(1).center-me {
text-align: center;
background-color: blue;
}
img {
display: inline-block;
}
(2).center-me {
display: flex;
justify-content: center;
background-color: blue;
}
(3) .center-me {
display: flex;
background-color: blue;
}
img {
margin: 0 auto
}
2.BFC
触发条件(父元素)：
1.float：除了none以外的值(left，right)；
2.overflow：除了visible以外的值(hidden，auto，scroll)
3.display：table-cell，table-caption，inline-block, flex, inline-flex
4.position：(absolute，fixed)
作用1：
清除浮动
html主体：
class="out">
class="in"> 一开始的模样：
.out{
border: 10px solid red；
}
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
