CSS 常用屬性
阿新 • • 發佈:2018-11-09
隱藏
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; }