CSS
cascading（層疊） style（樣式） sheet（表）
css注釋
/* 注釋內容 */ 快捷鍵:ctrl ?
引入方式
<!-- 1.行間樣式 --> <div style="width:100px;height:100px;"></div> <!-- 2.頁面集 --> <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head> <!-- 3.外部css文件(另建css文件) --> <link rel="stylesheet" href="css文件路徑" >
css選擇器
- 基本選擇器
元素選擇器 div{ } id選擇器 #demo 在html中(id="demo") 類選擇器 .demo 在html中(class="demo") 通用選擇器 *{ }
- 組合選擇器
后代選擇器 div a 找div下所有的a 直接子元素選擇器 div>a 只找下一代a 兄弟選擇器 div.a 只找下一個兄弟 弟弟選擇器 div~a 找到所有兄弟 屬性選擇器 [title] 分組選擇器 demo1，demo2 偽類選擇器 a:link a:visited a:hover a:sctive input:focus 偽元素選擇器 p::before p::after 偽元素存在任意一個元素里面
css權重
！important infinity
行間樣式 1000
id 100
class/屬性/偽類選擇器 10
標簽選擇器/偽元素 1
通配符 0
css常用屬性
- 字體屬性
font-size:12px; (規定文本的字體尺寸。設置的是字體高) font-weight:bold; (規定字體的粗細。相當於strong，加粗) 100-900 lighter（更細）/ normal（默認值，標准粗細）/ bolder（更粗） font-style:italic (規定文本的字體樣式。相當於em，斜體) font-family:arial； (規定文本的字體系列。)
- 顏色設置
1.純英文單詞 red/black 2.顏色代碼 #000000(#000)白色 #ffffff(#fff)黑色 光學三原色：紅綠藍 美學三原色：紅黃藍 3.顏色函數 rgba (255,255,255,0.3) 數值在0-255 0.3透明度 r g b 00-ff 00-ff 00-ff
- 邊框設置
border:1px solid black ;
1px:邊框 solid:展示形式 black邊框顏色
boeder-width border-style border-color
dotted:點狀虛線
dashed:條狀虛線
border-radius:50%; ⚪ 控制圓角
- 文字常用設置
text-align:center; 文字水平對齊
right/left
line-height:10px; 行間距
單行文本垂直居中 ： height =line-height（容器高度=文本高度）
文字行高1.2倍 ：line-height:1.2em;
行高4種方式：
line-height:normal; 默認方式
1. line-height:1.5; 2. line-height:200%; 3. line-height:10px; 4. line-height:5em;
- a標簽 text-decoration:line-though; 穿過文本的一條線 none 無線 underline 下划線 overline 上划線 curson:pointer; 手 鼠標放在上面的圖樣 help; ？ e-risize; → move; +
- display 標簽類型的轉換
標簽
- inline 行級元素 內容決定元素所占位置大小，不可以通過css改變寬高，具有文字特性。eg：span\strong\em\a\del...
- block 塊級元素 獨占一行，可以通過css改變寬高。eg: div\p\ul\ol\li\form\h1-h6...
- inline-block 行級塊元素 內容決定大小可以改變寬高。eg: img
- 塊級元素可以嵌套某些塊級元素和行級元素，行級元素可以嵌套行級元素。 p標簽不可以嵌套p標簽，也不可以嵌套塊級元素。a標簽不能嵌套a標簽
盒模型
1. 盒子壁 border
2. 內邊距 padding
3. 盒子內容 width + height+(element)
margin +border +padding+ ( conte =width +height)
padding/margin: 100px 100px 100px ; 三個數值的情況
上 左右 下
100px 100px; 兩個數值的情況
上下 左右
100px 一個數值的情況
上下左右
兩個情況: 垂直方向如果上下兩個標簽都設置了margin外邊距,那么取兩者的最大的值
水平方向,兩個標簽都設這外邊距,取兩者的邊距之和
層模型 position
1.absolute 絕對定位
1)脫離原來位置進行定位
2)相對於最近的有定位的父級進行定位，如果沒有，那么相對於文檔進行定位
2. relative 相對定位
1)保留原來位置進行定位
2)相對於原有位置進行定位
用relative 作為參照物 用absolute進行定位
3. fixed 固定定位
居中定位(廣告) div { position: absolute; left: 50%; right: 50%; width: 100px; height: 100px; background-color: red; margin-left:-50px; margin-top: -50px; }
浮動模型float
float:left/right;
單行排：父級邊界大小排列
1. 浮動元素產生了浮動流
所有產生了浮動流的元素，塊級元素看不到
產生了bfc的元素和文本類屬性（inline）的元素以及文本都能看到浮動元素
BFC Block format context 塊級格式化上下文 （讓盒子所附的語法規則發生改變）
bfc區域不會與float box重疊，是頁面上的一個獨立容器，子元素不會影響到外面 觸發盒子的BFC 5種方式 1)position：absolute; 2)display:inline-block; 3)float:left/right; 4)overflow:hidden; 溢出盒子部分隱藏
5）根元素
2. 清除浮動流（必須是塊級元素） clear:both;
3. content: 只在偽元素中起作用
4. 偽元素是行級元素::before\::after inline屬性
5. position:absolute; float:left/right; 這兩個從內部把元素轉換為inline-block;
包裹浮動元素
行級元素只能嵌套行級元素
塊級元素可以嵌套任何元素
除<p> </p>
a標簽不能套用a標簽
文字溢出處理overflow
單行文本處理 white-space:nowrap;/*文字溢出處理*/ overflow:hidden; text-overflow:ellipsis;/*點點點顯示*/ 多行文本處理 手動，后端 多數使用截斷，溢出部分隱藏 width:200px; height:40px; /*文本高度2倍*/ line-height:20px; border:1px solid #000; overflow:hidden;
visible:默認值。內容不會被修剪，會呈現在元素框之外。
hidden:內容會被修剪，並且其余內容是不可見的。
scroll:內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto:如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit:規定應該從父元素繼承 overflow 屬性的值。
overflow原理：
bfc是css可視化渲染的一部分，是一塊區域，規定了內部塊盒的渲染方式，以及浮動相互之間的影響關系。
當元素設置了overflow樣式且值部位visible時，該元素就構建了一個bfc，bfc在計算高度時，內部浮動元素的高度也要計算在內，
也就是說這個時候bfc區域內只有一個浮動元素，bfc的高度也不會發生坍塌，所以達到了清除浮動的效果。