<del id="2qccq"></del>

《Python web開發》筆記三: CSS基礎

Scorpion 發布于2019-08-29 12:14 / 2796人閱讀

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

CSS常用選擇器

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

選擇器權重

根據樣式所在位置：!improtant > 內聯樣式 > style標簽 > link標簽。
計算方式：

一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1。其他規則見拓展閱讀。

盒模型

box-sizing:border-box：此時元素的內邊距和邊框不再會增加它的寬度，更便于理解和計算。

CSS常用屬性：

- 背景：
background-color：#9cbfcc;
background-repeat: repeat;
background:url("images/grass.png");
background-size: contain;（完全限制的設定的大小內部）
- 方位：
padding: 0 20px 30px 0 (上 右 下 左)
margin-right: 10px;
text-align：left;
display:block;(in-line,inline-block)
- 字體：
font-family: 字體
font-size: 大小
- 邊框：
border-radius: 圓角半徑設置
border: solid 8px rgb(210, 157, 65);  樣式，粗細，顏色

定位技術 relative(相對定位)

設置了相對定位之后，通過修改top,left,bottom,right值，元素會在自身文檔流所在位置上被移動，其他的元素則不會調整位置來彌補它偏離后剩下的空隙。

absolute(絕對定位)：

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

fixed(固定定位)：

設置了固定定位之后，元素相對的偏移的參考是可視窗口，即使頁面滾動，元素仍然會在固定位置。
重心修改：
transform: translate(-50%,-50%)，坐標原點從左上角改到了中心位置。

拓展閱讀

選擇器小游戲

你應該知道的一些事情——CSS權重

盒模型詳解

常用CSS屬性列表

absolute與relative

學習CSS布局

inline-vs-inline-block

備注

該筆記源自網易微專業《Python web開發》1.4、1.5、1.6、1.7節
本文由EverFight創作,采用知識共享署名 3.0 中國大陸許可協議進行許可。

GPU云服務器云服務器 0基礎學python開發有用嗎 python web開發基礎學習筆記 python開發web應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111762.html

《Python web開發》筆記三: CSS基礎

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

qylost 2019-07-31 12:23 評論0 收藏0
《Python web開發》筆記一：網頁開發基礎

摘要：網頁基礎知識網頁的構成網頁由和構成，是框架，是樣式和裝飾，則是各項功能實現。基礎知識超文本標記語言，通過各種標簽來表示網頁的骨架。在同一窗口中打開。網頁基礎知識網頁的構成網頁由html、css和Javascript構成，html是框架，CSS是樣式和裝飾，JS則是各項功能實現。我們把網頁的組成類比成一棟房子，Html相當于房子的結構，CSS相當于房子的裝修裝飾，JavaScrip...

3fuyu 2019-07-25 10:54 評論0 收藏0
《Python web開發》筆記一：網頁開發基礎

摘要：網頁基礎知識網頁的構成網頁由和構成，是框架，是樣式和裝飾，則是各項功能實現。基礎知識超文本標記語言，通過各種標簽來表示網頁的骨架。在同一窗口中打開。網頁基礎知識網頁的構成網頁由html、css和Javascript構成，html是框架，CSS是樣式和裝飾，JS則是各項功能實現。我們把網頁的組成類比成一棟房子，Html相當于房子的結構，CSS相當于房子的裝修裝飾，JavaScrip...

2shou 2019-08-29 11:27 評論0 收藏0
《Python web開發》筆記一：網頁開發基礎

摘要：網頁基礎知識網頁的構成網頁由和構成，是框架，是樣式和裝飾，則是各項功能實現。基礎知識超文本標記語言，通過各種標簽來表示網頁的骨架。在同一窗口中打開。網頁基礎知識網頁的構成網頁由html、css和Javascript構成，html是框架，CSS是樣式和裝飾，JS則是各項功能實現。我們把網頁的組成類比成一棟房子，Html相當于房子的結構，CSS相當于房子的裝修裝飾，JavaScrip...

gaomysion 2019-08-01 15:50 評論0 收藏0
SegmentFault 技術周刊 Vol.40 - 2018，來學習一門新的編程語言吧！

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

caspar 2019-08-15 13:33 評論0 收藏0