成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

qylost / 1886人閱讀

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/45540.html

相關(guān)文章

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

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

    Scorpion 評論0 收藏0

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

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

    3fuyu 評論0 收藏0

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

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

    2shou 評論0 收藏0

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

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

    gaomysion 評論0 收藏0

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

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

    caspar 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<