版权声明:来自MarieDreamer https://blog.csdn.net/qq_33514421/article/details/83151511
隐藏
1、display:none:隐藏,且不占空间
2、visiblity:hidden:隐藏,并占空间
3、overflow:hidden:隐藏超出部分
选择器
id选择器(#name)、类选择器(.name)、标签选择器(div,p)、相邻兄弟选择器(div + p)、后代选择器(div p)、子选择器(div > p)、伪元素选择器(div:hover,li:first-child)、通配符选择器(*)
其中,伪类first-of-type和first-child的区别:
p:first-of-type p:first-child
前者是在父元素中的第一个p元素;后者是父元素中的第一个(第一个不是p元素就无法选择)。
display
主要有none、block、inline、inline-block、flex。
block块元素:前后有换行符。
inline内联元素:前后无换行符。
inline-block:block块元素的基础上没有换行符。
元素居中
<div class="parent">
<div class="children">
children
</div>
</div>
1、定位。前提:已知children宽高。
.parent {
position: relative;
width: 400px;
height: 400px;
background: red;
}
.children {
position: absolute;
width: 40px;
height: 40px;
background: #eee;
left: 50%;
margin-left: -20px;
}
2、flex布局。
.parent {
display:flex;
align-items:center;
justify-content:center;
width: 400px;
height: 400px;
background: red;
}