国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

《Python web開發(fā)》筆記 三: CSS基礎(chǔ)

qylost / 1839人閱讀

摘要：計(jì)算方式一個(gè)行內(nèi)樣式，一個(gè)，一個(gè)屬性選擇器或者偽類，一個(gè)元素名，或者偽元素。其他規(guī)則見拓展閱讀。絕對(duì)定位設(shè)置了絕對(duì)定位之后，元素脫離文檔流，其他的元素會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。

CSS常用選擇器 
 - 通配符選擇器  *
 - id選擇器(id #)
 - 類選擇器(class .)
 - 元素選擇器(E)
 - 后代選擇器(E F)
 - 子元素選擇器(E>F)
 - 相鄰兄弟元素選擇器(E+F)
 - 群組選擇器(selector1,selector2,...,selectorN)
 - nth選擇器：
fist-child: 選擇某個(gè)元素的第一個(gè)子元素
last-child: 選擇某個(gè)元素的最后一個(gè)子元素
選擇器權(quán)重

根據(jù)樣式所在位置：!improtant > 內(nèi)聯(lián)樣式 > style標(biāo)簽 > link標(biāo)簽。
計(jì)算方式：

一個(gè)行內(nèi)樣式+1000，一個(gè)id+100，一個(gè)屬性選擇器/class或者偽類+10，一個(gè)元素名，或者偽元素+1。其他規(guī)則見拓展閱讀。
盒模型


box-sizing:border-box：此時(shí)元素的內(nèi)邊距和邊框不再會(huì)增加它的寬度，更便于理解和計(jì)算。

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);  樣式，粗細(xì)，顏色
定位技術(shù) relative(相對(duì)定位)

設(shè)置了相對(duì)定位之后，通過修改top,left,bottom,right值，元素會(huì)在自身文檔流所在位置上被移動(dòng)，其他的元素則不會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。

absolute(絕對(duì)定位)：

設(shè)置了絕對(duì)定位之后，元素脫離文檔流，其他的元素會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。元素偏移是相對(duì)于是它最近的設(shè)置了定位屬性（position為relative或者absolute，值不為static）的元素。

fixed(固定定位)：

設(shè)置了固定定位之后，元素相對(duì)的偏移的參考是可視窗口，即使頁(yè)面滾動(dòng)，元素仍然會(huì)在固定位置。
重心修改：
transform: translate(-50%,-50%)，坐標(biāo)原點(diǎn)從左上角改到了中心位置。

拓展閱讀

選擇器小游戲

你應(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é)
本文由EverFight創(chuàng)作,采用 知識(shí)共享署名 3.0 中國(guó)大陸許可協(xié)議進(jìn)行許可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/45540.html

相關(guān)文章

  • 《Python web開發(fā)》筆記 三: CSS基礎(chǔ)

    摘要：計(jì)算方式一個(gè)行內(nèi)樣式，一個(gè)，一個(gè)屬性選擇器或者偽類，一個(gè)元素名，或者偽元素。其他規(guī)則見拓展閱讀。絕對(duì)定位設(shè)置了絕對(duì)定位之后，元素脫離文檔流，其他的元素會(huì)調(diào)整位置來彌補(bǔ)它偏離后剩下的空隙。 CSS常用選擇器 - 通配符選擇器 * - id選擇器(id #) - 類選擇器(class .) - 元素選擇器(E) - 后代選擇器(E F) - 子元素選擇器(E>F) - 相鄰...

    Scorpion 評(píng)論0 收藏0

  • 《Python web開發(fā)》筆記 一：網(wǎng)頁(yè)開發(fā)基礎(chǔ)

    摘要：網(wǎng)頁(yè)基礎(chǔ)知識(shí)網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)由和構(gòu)成，是框架，是樣式和裝飾，則是各項(xiàng)功能實(shí)現(xiàn)。基礎(chǔ)知識(shí)超文本標(biāo)記語(yǔ)言，通過各種標(biāo)簽來表示網(wǎng)頁(yè)的骨架。在同一窗口中打開。 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 網(wǎng)頁(yè)的構(gòu)成 網(wǎng)頁(yè)由html、css和Javascript構(gòu)成，html是框架，CSS是樣式和裝飾，JS則是各項(xiàng)功能實(shí)現(xiàn)。我們把網(wǎng)頁(yè)的組成類比成一棟房子，Html相當(dāng)于房子的結(jié)構(gòu)，CSS相當(dāng)于房子的裝修裝飾，JavaScrip...

    3fuyu 評(píng)論0 收藏0

  • 《Python web開發(fā)》筆記 一：網(wǎng)頁(yè)開發(fā)基礎(chǔ)

    摘要：網(wǎng)頁(yè)基礎(chǔ)知識(shí)網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)由和構(gòu)成，是框架，是樣式和裝飾，則是各項(xiàng)功能實(shí)現(xiàn)。基礎(chǔ)知識(shí)超文本標(biāo)記語(yǔ)言，通過各種標(biāo)簽來表示網(wǎng)頁(yè)的骨架。在同一窗口中打開。 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 網(wǎng)頁(yè)的構(gòu)成 網(wǎng)頁(yè)由html、css和Javascript構(gòu)成，html是框架，CSS是樣式和裝飾，JS則是各項(xiàng)功能實(shí)現(xiàn)。我們把網(wǎng)頁(yè)的組成類比成一棟房子，Html相當(dāng)于房子的結(jié)構(gòu)，CSS相當(dāng)于房子的裝修裝飾，JavaScrip...

    2shou 評(píng)論0 收藏0

  • 《Python web開發(fā)》筆記 一：網(wǎng)頁(yè)開發(fā)基礎(chǔ)

    摘要：網(wǎng)頁(yè)基礎(chǔ)知識(shí)網(wǎng)頁(yè)的構(gòu)成網(wǎng)頁(yè)由和構(gòu)成，是框架，是樣式和裝飾，則是各項(xiàng)功能實(shí)現(xiàn)。基礎(chǔ)知識(shí)超文本標(biāo)記語(yǔ)言，通過各種標(biāo)簽來表示網(wǎng)頁(yè)的骨架。在同一窗口中打開。 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 網(wǎng)頁(yè)的構(gòu)成 網(wǎng)頁(yè)由html、css和Javascript構(gòu)成，html是框架，CSS是樣式和裝飾，JS則是各項(xiàng)功能實(shí)現(xiàn)。我們把網(wǎng)頁(yè)的組成類比成一棟房子，Html相當(dāng)于房子的結(jié)構(gòu)，CSS相當(dāng)于房子的裝修裝飾，JavaScrip...

    gaomysion 評(píng)論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.40 - 2018，來學(xué)習(xí)一門新的編程語(yǔ)言吧！

    摘要：入門，第一個(gè)這是一門很新的語(yǔ)言，年前后正式公布，算起來是比較年輕的編程語(yǔ)言了，更重要的是它是面向程序員的函數(shù)式編程語(yǔ)言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語(yǔ)言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...

    caspar 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<