css 布局实用篇
Opened this issue · 0 comments
topcss commented
/* CSS3 */
selector::before
/* CSS2 */
selector:before
CSS3引入了 ::(两个冒号)是用来区分伪类(:一个冒号)和伪元素(::两个冒号)。
伪类:操作元素本身,如 :hover、:first-child、:focus等等。
伪元素:操作元素的子元素,如 ::before、::after、::content等等。
居中对齐,上下固定,中间自适应的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.flex-item {
width: 100%;
height: 100px;
background-color: cadetblue;
}
.flex-item:nth-child(1),
.flex-item:nth-child(3) {
/* 即如果存在剩余空间,也不放大。 */
flex-grow: 0;
}
.flex-item:nth-child(2) {
/* 将等分剩余空间 */
flex-grow: 1;
background-color: bisque;
display: flex;
}
.content {
/* 在弹性子元素上设置margin: auto,可以使得该弹性子元素在两个轴方向上完全居中。 */
margin: auto;
height: 300px;
width: 400px;
background-color: burlywood;
}
/* 添加注释 */
.flex-item:nth-child(1)::after,
.flex-item:nth-child(3)::after {
content: '高度 100 px';
}
.flex-item:nth-child(2)::after {
content: '高度 自适应。又是另一个flex布局的容器';
}
.content::after{
content: '居中对齐'
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item">
<div class="content"></div>
</div>
<div class="flex-item"></div>
</div>
</body>
</html>