Python css高階

2022-06-23 18:39:14 字數 4110 閱讀 7340

1. 偽類和偽元素

1. 偽類

1. :link

2. :visited

3. :hover (重要)

4. :active

5. :focus(input標籤獲取游標焦點)

2. 偽元素

1. :first-letter

2. :before(重要 在內部前面新增)

3. :after(重要 在內部後面新增)

2 css屬性

0. 高度和寬度

1. 標籤的分類(標籤預設是否獨佔一行)

1. 塊級標籤

div p h1~h6 hr ul>li table>tr

2. 行內標籤

span a input img i...

2. 塊級標籤才能設定寬和高

3. max-width: 100%

- max-width --> 最大的寬度

- 100% --> 所有涉及到%都是指佔父標籤的百分比

1. 字型相關

1. 字型 --> font-family: “”

2. 字型大小 --> font-size

3. 字型粗細 --> font-weight

4. 字型顏色 --> color

- red 直接寫英文名字

- #ffffff

- rgb(255,255,255)

- rgba(255,255,255,0.6)

2. 文字屬性

1. text-align:center 對齊方式

2. text-indent: 28px 首行縮排

3. line-height:父標籤的高度 (實現單行文字的垂直居中)

4. text-decoration 裝飾 (去除a標籤的下劃線(text-decoration: none))

3. 背景

1. ">背景(九宮格涮葫蘆娃) url() no-repeat 50% 50%

3. background: url() no-repeat center

4. background-attachment: fixed 背景不動的例項

4. 邊框

1. border-width (邊框寬度)

2. border-style (邊框樣式)

3. border-color (邊框顏色)

簡寫:border: 1px solid red;

border-radius: 50%; --> 畫圓

5. css盒子

內容(content)-->內填充(padding)-->邊框(border)-->外邊距(margin)

1. content (內容)

2. padding (內填充) 調整內容和邊框之間距離時使用這個屬性

想讓標籤撐起來(內容和邊框之間的距離變大)設定padding

3. border (邊框)

4. margin (外邊距) 多用於調整調整標籤之間的距離 (注意兩個挨著的標籤margin取最大值)

想讓兩個標籤之間的距離變大,設定margin

注意:當兩個標籤之間的外邊距有重疊的話,會按照最大的外邊距來顯示

要習慣看瀏覽器console視窗那個盒子模型

6. 顯示效果

display:

- none 不顯示(不讓標籤顯示,不佔位)

- block 按照塊級標籤來顯示

- inline 按照行內標籤來顯示

- inline-block 既有塊級又有行內的效果

7. float(浮動)

1. 多用於實現佈局效果

1. 頂部的導航條

2. 頁面左右分欄 (部落格頁面:左邊20%,右邊80%)

2. float取值:

1. left

2. right

3. none

3. 浮動的特點

1. 任何標籤都可以浮動

2. 一個標籤浮動之後都變成塊級標籤(可以設定寬和高)

a標籤float之後就可以設定高和寬

3. 浮動的標籤脫離文件流(它的位置會被下面的標籤擠佔)

8. clear 清除浮動--> 清除浮動的***(內容飛出,父標籤撐不起來)

1. 定義一個用於清除浮動的工具樣式類,結合偽元素來實現

.clearfix:after

2. clear取值:

1. left

2. right

3. both

9. 溢位

1. 標籤的內容放不下(溢位)

2. 取值:

1. hidden --> 溢位的部分隱藏起來

2. scroll --> 出現滾動條

3. auto 根據內容自行調整

4. scroll-x

5. scroll-y

例子:圓形頭像的例子

1. overflow: hidden

2. border-radius: 50% (圓角)

10. 定位postion

0. static(預設)

1. 相對定位---相對自己本來應該在的位置

postion: relative;

left: 100px;

2. 絕對定位---相對已經定位過的父標籤

position:absolute;

left: 100px;

3. 固定定位---相對瀏覽器視窗

postion: fixed;

right: 50px;

bottom: 50px;

補充:脫離文件流的3種方式

float

absolute

fixed

11. opacity (不透明度)

1. 取值0~1

2. 和rgba()的區別:

1. opacity改變元素\子元素的透明度效果

2. rgba()只改變背景顏色的透明度效果

12. z-index

1. 數值越大,越靠近你

2. 只能作用於定位過的元素

3. 自定義的模態框示例

# 定位佈局課堂筆記

## 一.浮動佈局的總結

1.同一結構下, 如果採用浮動佈局,所有的同級別兄弟標籤都要採用浮動佈局

2.浮動佈局的盒子寬度在沒有設定時會自適應內容寬度

## 二.盒子的顯隱

display: none;

在頁面中不佔位, 採用定位佈局後, 顯示隱藏都不會影響其他標籤佈局, 不需要用動畫處理時

opacity: 0;

在頁面中佔位, 採用定位佈局後, 顯示隱藏都不會影響其他標籤佈局, 需要採用動畫處理時

```## 三.定位佈局

什麼是定位佈局: 可以通過上下左右四個方位完成自身佈局的佈局方式

- 相對定位

參考系: 自身原有位置

position: relative; => 開啟了四個定位方位

1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左

2.left = -right | top = -bottom

3.佈局後不影響自身原有位置

4.不脫離文件流

- 絕對定位

參考系: 最近的定位父級

position: absolute; => 開啟了四個定位方位

1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左

2.父級必須自己設定寬高

3.完全脫離文件流

- 固定定位

參考系: 頁面視窗

position: fixed; => 開啟了四個定位方位

1.top|bottom|left|right都可以完成自身佈局, 上下取上,左右取左

2.相對於頁面視窗是靜止的

3.完全脫離文件流

- z-index

修改顯示層級(在發生重疊時使用), 值取正整數, 值不需要排序隨意規定, 值大的顯示層級高

## 四.流式佈局思想

1. 百分比

2. vw | vh => max-width(height) | min-width(height)

3. em | rem

Python之路 前端只css

css是cascading style sheets的簡稱,中文稱為層疊樣式表,用來控制網頁資料的表現,可以使網頁的表現與資料內容分離。 1 行內式 行內式是在標記的style屬性中設定css樣式。這種方式沒有體現出css的優勢,不推薦使用。 1 p style color blue backgro...

Python全棧開發之13 CSS

css 是 cascading style sheets的縮寫,用來設計網頁的樣式佈局,以及大小來適應不同的螢幕等,使網頁的樣式和網頁資料分...

Python學習第67天(css中float屬性)

今天的學習場景很獨特,為了能早點回家看到兩位寶寶,特地到廣州坐飛機,所以在機場中學習真的還是不錯的,下面就說一下今天的核心內容float,因...