标簽選擇器
<code>p{}</code>
類選擇器
<code>.class1{}</code>
id選擇器
<code>#class1{}</code>
通配符 *
後代選擇器 比對标簽下所有元素//
<code>ul li a{}</code>
<code>.className li a{}</code>
子元素選擇器 僅比對子元素/
<code>.className > a{}</code>
并集選擇器|
<code>div,ul {}</code>
僞類選擇器
連結僞類選擇器
<code>a:link /*選擇所有未被通路過的連結*/</code>
<code>a:visited /*選擇所有已被通路過的連結*/</code>
<code>a:hover /*選擇滑鼠懸停的連結*/</code>
<code><!-- - .classA:hover .classB {}//滑鼠經過classA時，對classB操作 --></code>
<code>a:active /*選擇活動連結(滑鼠按下未彈起的連結)*/</code>
focus 僞類選擇器 選取獲得焦點（光标）的表單元素
一般情況 <code><input></code> 類表單元素才能擷取，是以這個選擇器主要針對表單元素
<code>input: focus{}</code>
font-style//字型樣式（italic斜體,normal正常）
font-weight//字型粗細（700加粗，400正常）
font-size/line-height//字型大小（px）// 12px/1.5（1.5：行高為目前文字大小1.5倍）
font-family//字型系列，取首位有效字型
字型複合屬性順序， font-style font-weight 可省略
body{
font: font-style font-weight font-size/line-height font-family
}
color red/ #FFFFFF// rgb(0,0,0)
text-align 文本對齊
left(預設)
right
center
text-decoration 下劃線
underline
line-through
overline
none
text-indent 縮進
text-indent: 3em;//3個目前文字距離
text-indent: 30px;
line-height 行間距
line-height: 25px
垂直居中：行高==盒高//c3盒子模型内容高度為減去邊框padding後的内容height
css 引入
内部樣式表
行内樣式表
<code><p style = "color: red;">風雨過後</p></code>
外部樣式表
<code><link rel="stylesheet" href="style.css"></code>
padding 屬性是以下各内邊距屬性的簡寫屬性：
padding-top
padding-right
padding-bottom
padding-left
塊元素
<code><h1>-<h5> <p> <div> <ul> <li>等</code>
可以控制寬度高度内邊距
寬度預設是父級寬度100%
獨占一行
容器
文字類元素内不能使用塊級元素<code><p> <h1>-<h6></code>
行内元素
<code><a> <span> <em> <b></code>
一行可以顯示多個行内元素
高寬度設定無效
預設寬度是它本身的寬度
行内元素隻能容納文本或其他行内元素
連結内不能放标簽
特殊情況<code><a></code>裡面可以放塊級元素，//<code><a></code> 轉換塊級模式
行内塊元素
<code><img> <input> <td></code>
和相鄰行内元素（行内塊）在一行上，但是他們之間會有空白間隙，一行可以顯示多個
預設寬度就是它本身内容的寬度
高度行高外邊距可控制
元素顯示模式轉換
行内元素a轉換為塊級元素
<code>a{height: 10px; display: block;} //設定點選區域</code>
轉換為行内元素（不能設定寬高）
<code>display: inline</code>
轉換為行内塊
<code>display: inline-block</code>
背景顔色
<code>background-color :transparent; //預設透明</code>
背景圖檔
<code>background-image: (url)</code>
預設水準和垂直方向平鋪
<code>background-repeat: repeat | no-repeat | repeat-x | repeat-y</code>
位置
<code>background-position: x y;background-position: left top;</code>
<code>background-position: top|center|bottom|left|center|right</code>
使用方位名詞與順序無關,省略時居中
是否滾動
<code>background-attachment: fixed|scroll...</code>
複合屬性 background :顔色 位址 平鋪 滾動 位置
<code>background: transparent url(x.png) no-repeat fixed top</code>
背景色半透明
<code>background: rgba(0,0,0,0.3)//a 不透明度 僅背景顔色</code>
<code>background: rgba(0, 0, 0, 0.6) url(./pic/bgi.png) no-repeat fixed top;</code>
<code>opacity: 0.3;//所有子元素繼承相同透明度</code>
層疊性 //就近
繼承性 //子繼承父
優先級
繼承或* < 元素選擇器< 類選擇器 < id選擇器 < 行内style < important // color: xxx!important 權重((0,0,0,0) (0,0,0,1) 0010,0100,1000,無窮大)
權重的疊加,不進位
繼承：0
不繼承:
-li: .nav li(10+1=0011)
<code>border邊框 (border/border-top/border-left...)</code>
<code>border-width//邊框的粗細px</code>
<code>border-style//邊框樣式//實線 solid 虛線dashed 點線dotted...</code>
<code>boeder-color</code>
<code>border-collapse//表格細線邊框</code>
<code>border 複合寫法 border: 1px solid transparent</code>
<code>邊框影響盒子大小（邊框width獨立于盒子寬高）</code>
<code>border-radius: 5px;</code>
-<code>border-radius: 50%;//長度50%</code>
<code>border-radius: 10px 20px 30px 40px;//左上-順時針</code>
<code>border-top-left-radius: 10px;//左上</code>
content 内容px
padding 内邊距
邊框與内容之間的距離
複合寫法
一個值:padding: 2px;上下左右
兩個值:padding: 2px 5px;上下2，左右5
三個值:padding: 1px 2px 3px;上1 左右2 下3
四個值padding:1px 2px 3px 4px;上1 右2 下3 左4 (順時針)
影響盒子大小
<code>盒子本身沒有指定width/height屬性，則此時padding不會撐開盒子寬/高</code>
marjin 外邊距 盒子之間距離
marjin-botton/top/
複合同padding
水準居中塊級盒子
盒子必須指定寬度
左右外邊距設定為auto
<code>marjin-left: auto;marjin-right: auto;</code>
<code>marjin: 0 auto</code>
水準居中行内元素
父元素添加 text-aline: center
水準居中行内塊元素
外邊距合并-嵌套塊元素塌陷
清除内外邊距
行内元素為了照顧相容性，盡量隻設定左右内外邊距，不設定上下内外邊距(可以轉換成行内塊元素 display:inline-block)
陰影
box-shadow: h-shadow v-shadow blur spread color inset;
水準位置 允許負值
垂直位置的陰影
(可選)模糊距離//虛實
(可選)尺寸
(可選)顔色
(可選)将外陰影(outset)改為内陰影inset
文字陰影 text-shadow: 1px 1px rgba()
多個塊級元素縱向排列-标準流
多個塊級元素橫向排列-浮動（ - 行内塊空隙）
塊級，行内元素
浮動元素會脫離标準流(脫标)
不保留原先的位置，（浮動圖層）
浮動元素會一行内顯示并且元素頂部對齊
浮動元素會具有行内塊元素的特性
行内元素/塊元素添加浮動->行内塊元素(width,height)
與标準流父級一起使用；一浮全浮
浮動隻影響後面的标準流，不影響前面的标準流
元素浮動，後面的标準流占據浮動元素（重疊），
不影響浮動元素前面的标準流（浮動元素前面的标準流獨占一行，浮動元素另起一行，上限為标準流底部）
清除浮動
清除浮動元素脫離标準流造成的影響
閉合浮動 隻讓浮動在父盒子内部影響不影響父盒子外面的其他盒子
父級盒子不友善給高度，浮動盒子不占有位置，導緻父級盒子高度為0
額外标簽法（隔牆法）
在浮動元素末尾添加一個空的塊級标簽
div{clear: both;}
父級元素添加overflow: //hidden
:after僞元素 父級添加clearfix類
雙僞元素
靜态定位 static
相對定位 relative
相對原來的位置
不脫标，保留原來位置
寬度預設變為100%
絕對定位 absolute
沒有父元素或父元素未定位，以浏覽器為基準(Document)
父元素有定位（相對，絕對，固定定位），則以最近一級有定位的父元素為參看點(子絕父相)
脫标，不占有位置
水準/垂直居中
left: 0%
margin-left: -1/2width px;
寬度預設變為0
固定定位 fixed
固定于浏覽器可視區的位置（浏覽器頁面滾動時元素位置不會改變）
不占有原來位置
粘性定位 sticky
以浏覽器可視視窗為參照點（fixed）
占有原先的位置（relative）
必須添加top/left/right/bottom之一才有效
不相容ie
定位疊放次序 z-index
隻有定位的盒子有z-index
數值越大越靠上
z-index: 1;
定位特殊特性
行内元素添加絕對定位或固定定位，可以直接設定高度和寬度
塊級元素添加絕對定位或固定定位，如果不給高度或寬度，預設大小是内容的大小
浮動元素隻會壓住下面标準流的盒子，不會壓住文字或圖檔（文字環繞）
絕對定位或固定定位會壓住所有内容
display
display: none;//隐藏，位置不保留
display: block;//顯示/塊
visibility
visibility: visible;
visibility: hidden;//隐藏後繼續保留原來位置
overflow
溢出
visible(預設)
hidden
scroll//顯示滾動條（溢出and不溢出）
auto//溢出顯示滾動條
可能隐藏有溢出的定位元素
精靈圖
将多個小背景圖整合到一個大圖檔 減少請求次數
background-img
background-position:x y;//左上移動為負
background: url() no-repeat -1px -2px;
将盒子width height 設為零
width: 0;
height: 0;
cursor: default//pointer/move/text/not-allowed
表單邊框(input textarea..)
outline // 取消外邊框 outline: none;
防止文本域移動
resize: none
vertical-align 使行内元素盒模型與其行内元素容器垂直對齊。例如，用于垂直對齊一行文本内的圖檔
：
行内元素 行内塊元素
<./p/Snipaste_2021-08-19_08-24-45.png>
由于圖檔預設(行内塊元素)與文字基線對齊(base-line)
産生 圖檔底側空白縫隙
1.更改vertical-align: bottom...
display: block
單行文本溢出省略号顯示
條件:
強制一行内顯示文本
white-space: nowrap (預設normal 自動換行)
超出部分隐藏
overflow: hidden
文字用省略号代替超出的部分
text-overflow: ellipsis
多行文本溢出省略号顯示(控制盒子大小)
有較大相容性問題，适合webKit浏覽器或移動端
word-break: break-all;單詞所有單詞碰到邊界一律拆分換行
使浮動盒子邊框重疊
顯示被覆寫的盒子邊框-提高層級
無定位
滑鼠經過增加position: relative;
有定位
z-index
浮動元素不會壓住文字
塊中 行内元素，行内塊元素與其内容水準居中
<code><video></code>
常見屬性
autoplay: autoplay;//視訊就緒自動播放(谷歌浏覽器需用muted解決自動播放問題)
<code><video src="#" muted></video></code>
...https://www.runoob.com/tags/tag-video.html
audio
autoplay 谷歌浏覽器禁用
...https://www.runoob.com/tags/tag-audio.html
input類型
type: search 限制輸入内容
....https://www.runoob.com/tags/att-input-type.html
新增表單屬性
required=required // 表單擁有該屬性表示其内容不能為空
placeholder = 提示文本//表單的提示資訊,存在預設值将不再顯示
autofocus = autofocus//自動聚焦屬性,頁面加載完成自動聚焦到指定表單
autocomplete
multiple= multiple //可以多選檔案送出
input[value]//隻選擇有value的input//權重11
input[type=text]//隻選擇type=text的input
input[type^=val]//以val開頭
input[type$=val]//以val結尾
input[type*=val]//含有val
E:first-child//比對父元素中的第一個子元素E
E:last-child//比對父元素中的最後一個E元素
E:nth-child(n)//比對父元素中第n個子元素E
根據: 前面的空格位置判斷父元素
ul :first-child//ul中第一個子元素
ul li:first-child//ul中第一個li元素
lu li :first-child//ul中li的第一個子元素
nth-child(even)//第偶數個
nth-child(odd)//奇數
nth-child(n)//n=0,1,2....第0個和超出的被忽略
2n
2n+1
5n [5,10,15...]
n+5 [5,]
-n+5 [1,..5]
section div:nth-child(1)
section 第一個子元素需要為div
nth-child 會把所有的盒子排列序号
執行時先看 :nth-child(1) 之後回去看前面div //是否比對//選擇//忽略
nth-of-type
section div:nth-of-type(1)
會把指定的盒子排序
執行時先看 div指定的元素 之後回去看 :nth-of-type(1)
利用CSS建立新标簽元素
選擇符：
::before 在元素内部的前面插入内容
::after 在元素内部的後面插入内容
box-sizing: content-box 盒子大小為width+padding+border(預設)
box-sizing: border-box 盒子大小為width// padding和border不會撐大盒子（前提是padding border不超過width）//IE怪異盒模型
filter: blur(5px);//blur模糊處理 數值越大 越模糊
width: clac(100% - 30px);
transition: 要過度的屬性 花費時間 (運動曲線) (何時開始) //誰做過渡給誰加
transition: width 1s
transition: width 1s, height 1s;
transition: all 0.5s//所有元素
本文來自部落格園，作者：w0000，轉載請注明原文連結：https://www.cnblogs.com/w0000/p/15141190.html
![html+css像素塊圖檔（遊戲搖桿）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)