CSS常用選擇器
- 通配符選擇器 *
- id選擇器(id #)
- 類選擇器(class .)
- 元素選擇器(E)
- 后代選擇器(E F)
- 子元素選擇器(E>F)
- 相鄰兄弟元素選擇器(E+F)
- 群組選擇器(selector1,selector2,...,selectorN)
- nth選擇器：
fist-child: 選擇某個元素的第一個子元素
last-child: 選擇某個元素的最后一個子元素
選擇器權(quán)重
根據(jù)樣式所在位置：!improtant > 內(nèi)聯(lián)樣式 > style標(biāo)簽 > link標(biāo)簽搭独。
計算方式：
一個行內(nèi)樣式+1000村象，一個id+100继找，一個屬性選擇器/class或者偽類+10冻押，一個元素名填硕，或者偽元素+1碧库。其他規(guī)則見拓展閱讀涡贱。
盒模型
盒模型
box-sizing:border-box：此時元素的內(nèi)邊距和邊框不再會增加它的寬度，更便于理解和計算愕把。
CSS常用屬性：
- 背景：
background-color：#9cbfcc;
background-repeat: repeat;
background:url('images/grass.png');
background-size: contain;（完全限制的設(shè)定的大小內(nèi)部）
- 方位：
padding: 0 20px 30px 0 (上 右 下 左)
margin-right: 10px;
text-align：left;
display:block;(in-line,inline-block)
- 字體：
font-family: 字體
font-size: 大小
- 邊框：
border-radius: 圓角半徑設(shè)置
border: solid 8px rgb(210, 157, 65); 樣式拣凹，粗細，顏色
定位技術(shù)
relative(相對定位)
設(shè)置了相對定位之后恨豁，通過修改top,left,bottom,right值嚣镜，元素會在自身文檔流所在位置上被移動，其他的元素則不會調(diào)整位置來彌補它偏離后剩下的空隙橘蜜。
absolute(絕對定位)：
設(shè)置了絕對定位之后菊匿，元素脫離文檔流，其他的元素會調(diào)整位置來彌補它偏離后剩下的空隙计福。元素偏移是相對于是它最近的設(shè)置了定位屬性（position為relative或者absolute跌捆，值不為static）的元素。
fixed(固定定位)：
設(shè)置了固定定位之后象颖，元素相對的偏移的參考是可視窗口佩厚，即使頁面滾動，元素仍然會在固定位置说订。
重心修改：
transform: translate(-50%,-50%)抄瓦，坐標(biāo)原點從左上角改到了中心位置。
拓展閱讀
- 選擇器小游戲
- 你應(yīng)該知道的一些事情——CSS權(quán)重
- 盒模型詳解
- 常用CSS屬性列表
- absolute與relative
- 學(xué)習(xí)CSS布局
- inline-vs-inline-block
備注
該筆記源自網(wǎng)易微專業(yè)《Python web開發(fā)》1.4陶冷、1.5钙姊、1.6、1.7節(jié)
本文由EverFighting創(chuàng)作,采用 知識共享署名 3.0 中國大陸許可協(xié)議進行許可埂伦。
