? ? ?在最開(kāi)始接觸HTML5的時(shí)候，你會(huì)遇到的大多是一些常見(jiàn)常用的屬性以及屬性值。它們分類廣、品種雜且使用率高。到css各種樣式的時(shí)候，你會(huì)接觸到更多的東西，各種屬性、選擇器、盒子模型都是重點(diǎn)。那么，現(xiàn)在我們就看一下它們到底是什么。

?列表

列表是很重要的一個(gè)塊級(jí)標(biāo)簽。

分為有序列表ol、無(wú)序列表ul和定義描述列表dl，我們常會(huì)用到的就是無(wú)序列表ul。列表中的每一項(xiàng)都用li表示。

無(wú)序列表ul需要注意的是，列表中的每一項(xiàng)前面都會(huì)有一個(gè)符號(hào)，而我們?cè)谟玫剿鼤r(shí)一般是不會(huì)要前面的符號(hào)的。這時(shí)就要用到 list-style：none；了，取消無(wú)用的符號(hào)。

1 <ul> 2 <li>第一項(xiàng)</li> 3 <li>第二項(xiàng)</li> 4 <li>第三項(xiàng)</li> 5 </ul>

CSS常用選擇器

css修改頁(yè)面樣式時(shí)，必須使用選擇器進(jìn)行包裹。

選擇器{
? 屬性1：屬性值2；
? 屬性2：屬性值2；
? }

常用選擇器：

選擇器名	寫法
標(biāo)簽選擇器	HTML標(biāo)簽名{}
類選擇器（class選擇器）	.class名{}
ID選擇器	#ID名{}
通用選擇器	*{}
并集選擇器	選擇器1，選擇器2，選擇器3，...選擇器n{} 多個(gè)選擇器之間逗號(hào)分隔
交集選擇器	選擇器1選擇器2...選擇器n{} 多個(gè)選擇器之間緊挨著，沒(méi)有分隔
后代選擇器?	選擇器1 選擇器2 ... 選擇器n{} 空格分隔
子代選擇器	選擇器1>選擇器2>...>選擇器n{}

選擇器優(yōu)先級(jí)：

1.css生效的第一規(guī)則是“近者優(yōu)先”！！即，那個(gè)選擇器作用于最里層標(biāo)簽，則這個(gè)選擇器生效。
2.當(dāng)選擇器作用于同一層時(shí)，可以根據(jù)選擇器的優(yōu)先級(jí)權(quán)重進(jìn)行累加計(jì)算。
? ? ID選擇器*10 + class選擇器*10 + 標(biāo)簽選擇器*1
? ? 注意：并集選擇器，相當(dāng)于多個(gè)選擇器拆開(kāi)寫，因此并集選擇器不參與權(quán)重累加。
3.當(dāng)做用于同一層，而且選擇器優(yōu)先級(jí)完全相同時(shí)，誰(shuí)寫在后面誰(shuí)生效。（后來(lái)者居上）

?

CSS常用文本屬性

font-weight：字體粗細(xì)。bold-加粗、normal-正常、lighter-細(xì)體；也可以使用100-900的數(shù)值，400表示normal，700表示bold。

font-style：字體傾斜。italic-傾斜、normal-正常

font-size：字號(hào)。可以寫px單位，也可以用%表示。

font-family:字體系列（字體族）。可以直接寫字體名，也可以寫字體系列名；常用的字體系列有：serif-襯線體? sans-serif 非襯線體

line-height:行高。可以使用px單位、可以直接寫數(shù)字（表示默認(rèn)行距的幾倍）、也可以寫百分比（表示默認(rèn)行距的百分比）。行高的重要作用：讓單行文字在父容器中垂直居中！

text-align：設(shè)置區(qū)域內(nèi)的行級(jí)元素的水平對(duì)齊方式；

letter-spacing：字符間距，字與字之間的間距。

text-decoration:文本修飾。常用與去掉超鏈接的下劃線。

overflow:設(shè)置超出區(qū)域的文字如何顯示；

auto，默認(rèn)效果。文字少不顯示滾動(dòng)條，文字超出時(shí)顯示垂直滾動(dòng)條；

hidden，無(wú)論蚊子多少都不顯示滾動(dòng)條，文字超出時(shí)將隱藏不顯示；

scroll，無(wú)論文字多少都會(huì)顯示垂直、水平兩根滾動(dòng)條；

white-space: nowrap; 設(shè)置中文，行末不斷行顯示。

text-overflow: ;設(shè)置行末多余文字的顯示方式。

【設(shè)置行末顯示省略號(hào)的方法（三行代碼，缺一不可）】

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

?

CSS常用背景屬性

background-color:背景色。

background-image:背景圖。使用url("")選擇圖片路徑。當(dāng)背景圖和背景色同時(shí)存在時(shí)，背景圖會(huì)覆蓋背景色。

background-repeat:背景圖的重復(fù)方式。repeat-平鋪（默認(rèn)）； no-repeat-不平鋪 ；repeat-x-沿x軸平鋪 ；repeat-y-沿x軸平鋪

background-position:背景圖偏移量。

background縮寫形式：background-color | background-image | background-repeat | background-attachment | background-position

?

偽類選擇器

?：link - 未訪問(wèn)狀態(tài)
?：visited - 已訪問(wèn)狀態(tài)
?：hover - 鼠標(biāo)指上狀態(tài)
?：active - 激活選定狀態(tài)（鼠標(biāo)線點(diǎn)下未松開(kāi)）

注意：當(dāng)超鏈接多種偽類狀態(tài)共存時(shí)，必須按照l(shuí)ink-visited-hover-active的順序排列，否則會(huì)導(dǎo)致某些狀態(tài)不能生效。

?

CSS盒子模型

margin:外邊距

①只寫一個(gè)值時(shí)，表示四周的外邊距都是這個(gè)值；
②寫兩個(gè)值：第一個(gè)表示上下，第二個(gè)值表示左右；
③寫三個(gè)值：分別表示上、右、下，左邊默認(rèn)表示右邊；
④寫四個(gè)值：分別表示上、右、下、左，順時(shí)針?lè)较颉?/span>
⑤margin: 0px auto; 設(shè)置塊級(jí)元素在父容器中水平居中！！！！很重要！！！

padding:內(nèi)邊距,屬于div區(qū)域，但不能往里面寫東西。

①只寫一個(gè)值時(shí)，表示四周的外邊距都是這個(gè)值；
②寫兩個(gè)值：第一個(gè)表示上下，第二個(gè)值表示左右；
③寫三個(gè)值：分別表示上、右、下，左邊默認(rèn)表示右邊；
④寫四個(gè)值：分別表示上、右、下、左，順時(shí)針?lè)较颉?/span>
設(shè)置padding后，將導(dǎo)致div可見(jiàn)區(qū)域被撐大！！使用時(shí)必須注意div所占的實(shí)際大小。

border：邊框

共接收3個(gè)屬性：邊框的寬度、邊框的樣式、邊框的顏色。
邊框樣式不能省略，其他兩個(gè)可以省略。但是原則上一般三個(gè)屬性都要寫。
三個(gè)屬性的順序可以隨意顛倒，沒(méi)有先后要求。

• 如果當(dāng)父盒子包裹子盒子，給子盒子添加margin-top時(shí)，子盒子和父盒子的上邊線重合，而導(dǎo)致兩個(gè)盒子同時(shí)下來(lái)。

【解決辦法】
1、給父容器添加一定的padding-top。會(huì)導(dǎo)致父容器產(chǎn)生不必要的padding區(qū)域。不推薦使用！！
2、給父容器添加一定的上邊框（border-top）。會(huì)導(dǎo)致父容器產(chǎn)生不必要的邊框域。不推薦使用！！
3、給父容器或子容器添加float屬性；
4、給父容器添加overflow。推薦！對(duì)頁(yè)面布局不會(huì)產(chǎn)生影響。

border-radius:圓角。

共接收8個(gè)屬性值，分別表示：x軸（左上、右上、右下、左下）/Y軸（左上、右上、右下、左下）

box-shadow:盒子陰影。

共接收六個(gè)屬性值，用空格分隔；
①水平陰影距離（必選）：可正可負(fù)。正數(shù)右移，負(fù)數(shù)左移。
②垂直陰影距離（必選）：可正可負(fù)。正數(shù)上移，負(fù)數(shù)下移。
③陰影模糊半徑（可選）：只能為正數(shù)，默認(rèn)為0。數(shù)值越大，陰影越模糊。
④陰影擴(kuò)展半徑（可選）：可正可負(fù)，默認(rèn)為0。數(shù)值增大，陰影擴(kuò)大；數(shù)值減小，陰影縮小。
⑤陰影顏色（可選）：默認(rèn)為黑色。
⑥內(nèi)外陰影（可選值）：默認(rèn)為外陰影。inset 表示內(nèi)陰影。
eg：box-shadow: 0px 0px 10px 0px red inset;設(shè)置為外面一周的陰影。

?

盒子模型分類

1.標(biāo)準(zhǔn)盒子（W3C盒子）：我們?cè)O(shè)置的寬度和高度僅僅包含content區(qū)域。再添加padding和border時(shí)，會(huì)導(dǎo)致盒子的可視區(qū)域增大；box-sizing: content-box;? 使用標(biāo)準(zhǔn)盒子，默認(rèn)。
2.IE盒子（怪異盒子）：我們?cè)O(shè)置的寬度和高度包含content+padding+border；添加padding和border會(huì)導(dǎo)致content區(qū)域被壓縮，盒子的可視區(qū)域不會(huì)增大；box-sizing: border-box;

?

CSS定位

1.相對(duì)定位 relative：

定位機(jī)制：①相對(duì)定位是相對(duì)于自己原來(lái)的位置進(jìn)行定位；當(dāng)top等屬性不設(shè)置時(shí)，元素位置不會(huì)發(fā)生任何變化；②相對(duì)定位不會(huì)釋放掉自己原來(lái)的位置，也不會(huì)影響文檔中其他元素。

2.絕對(duì)定位 absolute：

定位機(jī)制：?①相對(duì)于第一個(gè)有定位的祖先元素進(jìn)行定位。（即，第一個(gè)使用relative、absolute、fixed定位的祖先元素）?②如果祖先元素都沒(méi)有定位，則相對(duì)于瀏覽器的左上角進(jìn)行定位；但是，如果要使用絕對(duì)定位，都要先給父容器使用相對(duì)定位。③使用絕對(duì)定位的元素，會(huì)從文檔流中徹底刪除！原有空間被釋放。

3.固定定位 fixed：

定位機(jī)制：①固定定位永遠(yuǎn)相對(duì)于瀏覽器窗口進(jìn)行定位。②固定定位會(huì)將元素徹底從文檔流中刪除，原有空間釋放；③固定定位的元素不隨滾動(dòng)條的滾動(dòng)而滾動(dòng)!

?

CSS3過(guò)渡、變換

• transition：過(guò)渡屬性，共接收四個(gè)屬性值：

?①參與過(guò)渡的CSS樣式屬性。可以指定為all/none；
?②過(guò)渡需要多長(zhǎng)時(shí)間完成。通常0.3s 0.5s。
?③過(guò)渡的樣式效果。常選ease！！！
?④過(guò)渡延時(shí)幾秒后開(kāi)始。可以省略不寫。

• transform變換屬性：

translate(100px,100px) 平移，分別表示X/Y軸，Y軸不寫默認(rèn)為0.

scale(1.5) 縮放，只寫一個(gè)值，表示X/Y都進(jìn)行縮放。

rotate(180deg) 旋轉(zhuǎn) 默認(rèn)繞Z軸轉(zhuǎn)。單位不能省略。

skew(40deg) 傾斜 表示沿X軸、Y軸傾斜多少度。只寫一個(gè)值表示沿X軸傾斜。

transform-origin：定義變換起點(diǎn)，常用于與rotate旋轉(zhuǎn)配合。

?

轉(zhuǎn)載于:https://www.cnblogs.com/yanglianwei/p/8596249.html

總結(jié)

以上是生活随笔為你收集整理的初入HTML5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。