初入HTML5
? ? ?在最開始接觸HTML5的時候，你會遇到的大多是一些常見常用的屬性以及屬性值。它們分類廣、品種雜且使用率高。到css各種樣式的時候，你會接觸到更多的東西，各種屬性、選擇器、盒子模型都是重點。那么，現(xiàn)在我們就看一下它們到底是什么。
?列表
列表是很重要的一個塊級標簽。
分為有序列表ol、無序列表ul和定義描述列表dl，我們常會用到的就是無序列表ul。列表中的每一項都用li表示。
無序列表ul需要注意的是，列表中的每一項前面都會有一個符號，而我們在用到它時一般是不會要前面的符號的。這時就要用到 list-style：none；了，取消無用的符號。
1 <ul> 2 <li>第一項</li> 3 <li>第二項</li> 4 <li>第三項</li> 5 </ul>CSS常用選擇器
css修改頁面樣式時，必須使用選擇器進行包裹。
選擇器{
? 屬性1：屬性值2；
? 屬性2：屬性值2；
? }
常用選擇器：
| 選擇器名 | 寫法 |
| 標簽選擇器 | HTML標簽名{} |
| 類選擇器（class選擇器） | .class名{} |
| ID選擇器 | #ID名{} |
| 通用選擇器 | *{} |
| 并集選擇器 | 選擇器1，選擇器2，選擇器3，...選擇器n{} 多個選擇器之間逗號分隔 |
| 交集選擇器 | 選擇器1選擇器2...選擇器n{} 多個選擇器之間緊挨著，沒有分隔 |
| 后代選擇器? | 選擇器1 選擇器2 ... 選擇器n{} 空格分隔 |
| 子代選擇器 | 選擇器1>選擇器2>...>選擇器n{} |
選擇器優(yōu)先級：
1.css生效的第一規(guī)則是“近者優(yōu)先”！！即，那個選擇器作用于最里層標簽，則這個選擇器生效。
2.當(dāng)選擇器作用于同一層時，可以根據(jù)選擇器的優(yōu)先級權(quán)重進行累加計算。
? ? ID選擇器*10 + class選擇器*10 + 標簽選擇器*1
? ? 注意：并集選擇器，相當(dāng)于多個選擇器拆開寫，因此并集選擇器不參與權(quán)重累加。
3.當(dāng)做用于同一層，而且選擇器優(yōu)先級完全相同時，誰寫在后面誰生效。（后來者居上）
?
CSS常用文本屬性
font-weight：字體粗細。bold-加粗、normal-正常、lighter-細體；也可以使用100-900的數(shù)值，400表示normal，700表示bold。
font-style：字體傾斜。italic-傾斜、normal-正常
font-size：字號。可以寫px單位，也可以用%表示。
font-family:字體系列（字體族）。可以直接寫字體名，也可以寫字體系列名；常用的字體系列有：serif-襯線體? sans-serif 非襯線體
line-height:行高。可以使用px單位、可以直接寫數(shù)字（表示默認行距的幾倍）、也可以寫百分比（表示默認行距的百分比）。行高的重要作用：讓單行文字在父容器中垂直居中！
text-align：設(shè)置區(qū)域內(nèi)的行級元素的水平對齊方式；
letter-spacing：字符間距，字與字之間的間距。
text-decoration:文本修飾。常用與去掉超鏈接的下劃線。
overflow:設(shè)置超出區(qū)域的文字如何顯示；
auto，默認效果。文字少不顯示滾動條，文字超出時顯示垂直滾動條；
hidden，無論蚊子多少都不顯示滾動條，文字超出時將隱藏不顯示；
scroll，無論文字多少都會顯示垂直、水平兩根滾動條；
white-space: nowrap; 設(shè)置中文，行末不斷行顯示。
text-overflow: ;設(shè)置行末多余文字的顯示方式。
【設(shè)置行末顯示省略號的方法（三行代碼，缺一不可）】
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;?
CSS常用背景屬性
background-color:背景色。
background-image:背景圖。使用url("")選擇圖片路徑。當(dāng)背景圖和背景色同時存在時，背景圖會覆蓋背景色。
background-repeat:背景圖的重復(fù)方式。repeat-平鋪（默認）； no-repeat-不平鋪 ；repeat-x-沿x軸平鋪 ；repeat-y-沿x軸平鋪
background-position:背景圖偏移量。
background縮寫形式：background-color | background-image | background-repeat | background-attachment | background-position
?
偽類選擇器
?：link - 未訪問狀態(tài)
?：visited - 已訪問狀態(tài)
?：hover - 鼠標指上狀態(tài)
?：active - 激活選定狀態(tài)（鼠標線點下未松開）
注意：當(dāng)超鏈接多種偽類狀態(tài)共存時，必須按照link-visited-hover-active的順序排列，否則會導(dǎo)致某些狀態(tài)不能生效。
?
CSS盒子模型
margin:外邊距
①只寫一個值時，表示四周的外邊距都是這個值；
②寫兩個值：第一個表示上下，第二個值表示左右；
③寫三個值：分別表示上、右、下，左邊默認表示右邊；
④寫四個值：分別表示上、右、下、左，順時針方向。
⑤margin: 0px auto; 設(shè)置塊級元素在父容器中水平居中！！！！很重要！！！
padding:內(nèi)邊距,屬于div區(qū)域，但不能往里面寫東西。
①只寫一個值時，表示四周的外邊距都是這個值；
②寫兩個值：第一個表示上下，第二個值表示左右；
③寫三個值：分別表示上、右、下，左邊默認表示右邊；
④寫四個值：分別表示上、右、下、左，順時針方向。
設(shè)置padding后，將導(dǎo)致div可見區(qū)域被撐大！！使用時必須注意div所占的實際大小。
border：邊框
共接收3個屬性：邊框的寬度、邊框的樣式、邊框的顏色。
邊框樣式不能省略，其他兩個可以省略。但是原則上一般三個屬性都要寫。
三個屬性的順序可以隨意顛倒，沒有先后要求。
- 如果當(dāng)父盒子包裹子盒子，給子盒子添加margin-top時，子盒子和父盒子的上邊線重合，而導(dǎo)致兩個盒子同時下來。
【解決辦法】
1、給父容器添加一定的padding-top。會導(dǎo)致父容器產(chǎn)生不必要的padding區(qū)域。不推薦使用！！
2、給父容器添加一定的上邊框（border-top）。會導(dǎo)致父容器產(chǎn)生不必要的邊框域。不推薦使用！！
3、給父容器或子容器添加float屬性；
4、給父容器添加overflow。推薦！對頁面布局不會產(chǎn)生影響。
border-radius:圓角。
共接收8個屬性值，分別表示：x軸（左上、右上、右下、左下）/Y軸（左上、右上、右下、左下）
box-shadow:盒子陰影。
共接收六個屬性值，用空格分隔；
①水平陰影距離（必選）：可正可負。正數(shù)右移，負數(shù)左移。
②垂直陰影距離（必選）：可正可負。正數(shù)上移，負數(shù)下移。
③陰影模糊半徑（可選）：只能為正數(shù)，默認為0。數(shù)值越大，陰影越模糊。
④陰影擴展半徑（可選）：可正可負，默認為0。數(shù)值增大，陰影擴大；數(shù)值減小，陰影縮小。
⑤陰影顏色（可選）：默認為黑色。
⑥內(nèi)外陰影（可選值）：默認為外陰影。inset 表示內(nèi)陰影。
eg：box-shadow: 0px 0px 10px 0px red inset;設(shè)置為外面一周的陰影。
?
盒子模型分類
1.標準盒子（W3C盒子）：我們設(shè)置的寬度和高度僅僅包含content區(qū)域。再添加padding和border時，會導(dǎo)致盒子的可視區(qū)域增大；box-sizing: content-box;? 使用標準盒子，默認。
2.IE盒子（怪異盒子）：我們設(shè)置的寬度和高度包含content+padding+border；添加padding和border會導(dǎo)致content區(qū)域被壓縮，盒子的可視區(qū)域不會增大；box-sizing: border-box;
?
CSS定位
1.相對定位 relative：
定位機制：①相對定位是相對于自己原來的位置進行定位；當(dāng)top等屬性不設(shè)置時，元素位置不會發(fā)生任何變化；②相對定位不會釋放掉自己原來的位置，也不會影響文檔中其他元素。
2.絕對定位 absolute：
定位機制：?①相對于第一個有定位的祖先元素進行定位。（即，第一個使用relative、absolute、fixed定位的祖先元素）?②如果祖先元素都沒有定位，則相對于瀏覽器的左上角進行定位；但是，如果要使用絕對定位，都要先給父容器使用相對定位。③使用絕對定位的元素，會從文檔流中徹底刪除！原有空間被釋放。
3.固定定位 fixed：
定位機制：①固定定位永遠相對于瀏覽器窗口進行定位。②固定定位會將元素徹底從文檔流中刪除，原有空間釋放；③固定定位的元素不隨滾動條的滾動而滾動!
?
CSS3過渡、變換
- transition：過渡屬性，共接收四個屬性值：
?①參與過渡的CSS樣式屬性。可以指定為all/none；
?②過渡需要多長時間完成。通常0.3s 0.5s。
?③過渡的樣式效果。常選ease！！！
?④過渡延時幾秒后開始。可以省略不寫。
- transform變換屬性：
translate(100px,100px) 平移，分別表示X/Y軸，Y軸不寫默認為0.
scale(1.5) 縮放，只寫一個值，表示X/Y都進行縮放。
rotate(180deg) 旋轉(zhuǎn) 默認繞Z軸轉(zhuǎn)。單位不能省略。
skew(40deg) 傾斜 表示沿X軸、Y軸傾斜多少度。只寫一個值表示沿X軸傾斜。
transform-origin：定義變換起點，常用于與rotate旋轉(zhuǎn)配合。
?
轉(zhuǎn)載于:https://www.cnblogs.com/yanglianwei/p/8596249.html
總結(jié)
- 上一篇： JavaScript 验证表单不为空和获
- 下一篇： 前端插件网址