CSS 常用属性

版权声明：来自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;
}