css入門基礎筆記
- 一.元素模式
- 1.塊元素
- 2.行內元素
- 3.行內塊元素
- 4.元素顯示模式總結
- 5.元素顯示轉換
- 二.背景
- 1.背景顏色
- 2.背景圖片
- 3.背景平鋪
- 4.背景固定
- 5.背景圖片位置
- 注意
- 6.背景復合寫法
- 7.背景色半透明
- 8.背景總結
- 三.三大特性
- 1.層疊性
- 2.繼承性
- 2.1行高的繼承性
- 3.優先級
- 選擇器權重如下表所示
- 注意點
- 權重疊加
- 四.css盒子模型
- 1.盒子模型組成
- 1.1邊框
- 常用的邊框樣式:
- 邊框復合寫法
- 注:
- 表格的細線邊框
- 1.2內邊距
- 內邊距復合寫法
- 注:
- 1.3外邊距
- 1.4外邊距典型應用
- 注:
- 1.5外邊距合并
- 1.相鄰塊元素垂直外邊距的合并
- 2.嵌套塊元素垂直外邊距的塌陷
- 1.5清除內外邊距
- 2.圓角邊框
- 注:
- 3.盒子陰影
- 注:
- 4.文字陰影
一.元素模式
1.塊元素

2.行內元素

3.行內塊元素

4.元素顯示模式總結

5.元素顯示轉換

直接寫在樣式宣告里
二.背景
1.背景顏色

2.背景圖片

3.背景平鋪

4.背景固定

5.背景圖片位置

注意

6.背景復合寫法

7.背景色半透明

8.背景總結

三.三大特性
1.層疊性

2.繼承性

2.1行高的繼承性

3.優先級

選擇器權重如下表所示

注意點

權重疊加
如果是復合選擇器,則會有權重疊加,需要計算權重,
四.css盒子模型
1.盒子模型組成

1.1邊框

常用的邊框樣式:
- solid 實作邊框
- dashed 虛線邊框
- dotted 點線邊框
邊框復合寫法

注:
當需要制作上邊框為紅其他為藍的邊框時,合理運用邊框的層疊性可較為方便
表格的細線邊框

1.2內邊距

內邊距復合寫法

注:
如果盒子本身沒有指定width/height屬性,則此時padding不會撐開盒子大小
1.3外邊距

1.4外邊距典型應用

注:
此方法是讓塊元素水平居中,行內元素或者行內塊元素水平居中給其父元素添加 text-align;center即可,
1.5外邊距合并
使用margin定義塊元素的垂直邊距時,可能會出現外邊距的合并,
1.相鄰塊元素垂直外邊距的合并

2.嵌套塊元素垂直外邊距的塌陷

1.5清除內外邊距

2.圓角邊框

注:

3.盒子陰影

注:
當只需要在滑鼠觸碰時顯示陰影時,可用
div:hover {
box-shadow:
}
表示即可
4.文字陰影

轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/255274.html
標籤:區塊鏈
上一篇:愛保質期APP隱私政策
下一篇:composer無法下載tp5.1的核心框架:Failed to extract topthink/framework
