隱藏

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;
}