前端之css基础学习（更正版）
css是什么
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。
簡單的說css的引入就是為了使得HTML語言能夠更好地適應(yīng)頁面的美工設(shè)計。
同時我們可以理解html與css的關(guān)系如下圖：
?
使用CSS的優(yōu)點：
?
?
css的語法與注釋規(guī)則
?
?css的三種引入方式
css有三種引入方式，分別為：
內(nèi)聯(lián)式
<p style="color: red">不卑不亢不慫</p> 嵌入式
<style type="text/css">p{color: red}</style>
外部式
<link rel="stylesheet" type="text/css" href=""> 注意
三種方式都具有優(yōu)缺點，內(nèi)聯(lián)式便于查找具體的一個標(biāo)簽修改樣式，嵌入式分離html與css,但是推薦外部式，因為可復(fù)用，降低代碼量，可能會產(chǎn)生請求，但是可以通過技術(shù)避免，也符合軟件開發(fā)規(guī)范，推薦使用外部式。
三種引入方式的優(yōu)先級
內(nèi)聯(lián)式>嵌入式&外部式，外部式與嵌入式的優(yōu)先級由html文件解析順序決定，后執(zhí)行的覆蓋先執(zhí)行的，也就是為什么css叫層疊樣式表的原因了。（其實是一種覆蓋現(xiàn)象，內(nèi)聯(lián)式直接在標(biāo)簽內(nèi)所以優(yōu)先級最大）
?
css選擇器
css選擇器是用于選擇需要的標(biāo)簽進(jìn)行樣式操作的工具，有很多不同形式的選擇器。
基礎(chǔ)選擇器
標(biāo)簽選擇器
顧名思義就是根據(jù)標(biāo)簽進(jìn)行選擇，示例如下：
p{color: red }
ID選擇器
根據(jù)標(biāo)簽ID進(jìn)行選擇
#i1{color:red; }
類選擇器
根據(jù)自定義的類進(jìn)行選擇，同時一個標(biāo)簽中可以使用多個類，通過類選擇器我們可以實現(xiàn)一個類操作多個標(biāo)簽的功能。
如何玩好類選擇器，提取類中的公共類，實際就是一個降低代碼冗余的過程，提高頁面加載速度，寫更少的代碼，實現(xiàn)同樣的功能。
.active{color:red; }
css高級選擇器
后代選擇器
后代選擇器，顧名思義就是當(dāng)前選擇器的后代選擇，只要是后代就可以被選擇，沒有代數(shù)限制,各個基礎(chǔ)選擇器直接用空格連接。
div a{color:red; }
子代選擇器
選擇當(dāng)前基礎(chǔ)選擇器的下一代的選擇器，之間用>連接。
div>a{color:red; }
組合選擇器
組合選擇器將不同的基礎(chǔ)選擇器進(jìn)行并列選擇，使用,連接。
div,a,p{color:red; }
交集選擇器
設(shè)置兩個基礎(chǔ)選擇器之間的樣式，直接連接。
?
偽類選擇器
偽類選擇器是用于標(biāo)簽狀態(tài)的選擇器，圖中已做詳細(xì)說明。
其中hover不止適用于a標(biāo)簽，也能使用在其他任何標(biāo)簽。同時偽類選擇器也可以與其他選擇器一起使用
css的繼承性
css中也具有繼承性，例如body下設(shè)置的樣式可以在其他標(biāo)簽中生效，但是不是所有繼承，具體可以通過瀏覽器的控制臺查看屬性是否高亮進(jìn)行判斷，高亮則是繼承的。
css選擇器權(quán)重
權(quán)重是用于判斷使用哪個樣式的計算方法，永不進(jìn)位。
? 注意
在權(quán)重中，繼承的權(quán)重接近于0，低于其他權(quán)重，示例代碼如下：
?
? 一個!important的問題：!important改變的只是當(dāng)前所在那一行的屬性，其余仍舊遵循權(quán)重規(guī)則。
css字體屬性
font-family
font-family是字體的類型屬性，比如宋體、黑體等，可以填寫很多備選字體，瀏覽器會依次查找本機(jī)電腦安裝的字體，從而進(jìn)行展示。
font-size
font-size是字體大小的屬性，通常用px表示大小，谷歌瀏覽器中默認(rèn)為16px,px是像素，是一種點陣的概念
color
color是字體的顏色屬性，通常有3種表示方式：英文法，rgb（255，255，255） & rgba（255，255，255，.5），16進(jìn)制法(其實就是rgb換算成16進(jìn)制的結(jié)果#FFFFFF)。
font-style
字體的樣式，正常或者斜體的樣式，斜體的屬性為italic
font-weight
font-weight屬性用于設(shè)置字體的粗細(xì)默認(rèn)是normal,bold是加粗。
也可使用數(shù)值進(jìn)行調(diào)節(jié)，區(qū)間是100-900，400是正常值。
css文本屬性
text-decoration
文本的下劃線，刪除線，上劃線樣式的屬性，none用于清除
?
?
?text-indent
用于文本的首行縮進(jìn)，可以使用em或者px單位，一般縮進(jìn)兩格推薦使用2em
文本行高、字間距、英文間距設(shè)置
?text-align
文本水平居中顯示為center，靠左為left（默認(rèn)），靠右是right
元素
元素分類
在css中元素分為三類，分別為塊狀元素、行內(nèi)元素、行內(nèi)塊元素。
塊狀元素
屬于塊狀元素的有:div, ui, ol, p, h, table, form
行內(nèi)元素
屬于行內(nèi)元素的有:a, span, em, strong, lable
行內(nèi)塊元素
?
?
?屬于行內(nèi)塊元素的有:input, img
?display屬性
display屬性用于修改標(biāo)簽的元素屬性，即塊狀元素、行內(nèi)元素、行內(nèi)塊元素。
通常的屬性為：塊級元素 block, 行內(nèi)元素 inline, 行內(nèi)塊元素 inline-block
我們可以通過display屬性修改標(biāo)簽實現(xiàn)我們所需要的功能
?
?盒子模型（重點）
?什么是盒模型
官方說法：
css model這一術(shù)語是用來設(shè)計和布局時使用。
所有的HTML元素可以看做盒子。
它包括：外邊距、邊距、內(nèi)填充和實際內(nèi)容。
具體實例
一般塊級元素都具有盒子模型的特征，以div模型為例，如圖:
?
此圖是在控制臺的屬性圖其中有四個屬性，分別為：
1.內(nèi)容（content）,是圖中最中間的部分，通常設(shè)置寬高修改的是content的寬高
2.內(nèi)邊距（padding），是邊框距離內(nèi)容的距離，修改之后視覺上感覺盒子變大，實際修改的是內(nèi)邊距。
padding的一些基礎(chǔ)用法:
?
?
3.邊框（border）,是圖中黑色實線部分，也可修改邊框的寬度。可以根據(jù)方向修改邊框粗細(xì)，形狀以及樣式。?
清除input默認(rèn)樣式可以使用border:0/none,點擊時的外邊框則是outline:0/none
?
?
4.外邊距（margin）,是盒子與盒子的距離，修改可以改變盒子的位置。
margin在水平方向上的邊距是疊加的，在垂直方向上的是包含的，又稱塌陷，即取最大邊距為準(zhǔn)。
清除html的一些默認(rèn)樣式
為了是我們的網(wǎng)頁更加符合UI的設(shè)計，我們通常需要將一些標(biāo)簽的默認(rèn)樣式清除，下圖是部分樣式清除的方法：
?
?
同時我們可以使用其他大牛寫好的樣式清除CSS文件來實現(xiàn)樣式清除，比如reset.css等。
?
HTML盒子居中顯示
想要使一個盒子在另一個盒子里面居中顯示，可以使用margin:0 auto實現(xiàn)。如果是帶方向的margin-left；auto則會盒子向右移，同理其他方向的auto也是如此。
浮動
浮動一開始的出現(xiàn)是為了解決文本環(huán)繞問題，類似圖片周圍包裹著文字。現(xiàn)在多用于多元素的排版，常用屬性有：
?
關(guān)于文字環(huán)繞
在將圖片和文字都存在的頁面中。如果我們將圖片設(shè)置浮動，則文字就會包裹著圖片，形成一種文本環(huán)繞的現(xiàn)象，其實是一個文本流的問題。
文檔流?
在html文件中，文件的解析過程是從左往右，自上而下的，也就是文檔流的解析過程。而浮動在這里就是脫離文本流的存在，給人一種飄起來的感覺。同時也會引發(fā)一個文本塌陷問題，根本原因就是浮動的元素與普通元素不在一個文本流上，無法支撐一定的高度，導(dǎo)致下面的元素向上擠，從從而導(dǎo)致文本塌陷。
清除浮動
有四個方法，具體如圖：
偽元素選擇器清除浮動
將我們需清除浮動的標(biāo)簽中添加該屬性，可以清除浮動，并且此方式較為友好，不改變代碼結(jié)構(gòu)。
?
?
? 通過overflow:hidden實現(xiàn)浮動清除（添加于父級標(biāo)簽）
?
?
?BFC
目前已知通過bfc去計算浮動的元素的高度，從而解決高度塌陷問題。
?
?
?
?
?
?
解決兩個標(biāo)簽高度不一致的問題
在css樣式中添加vertical-align:middle;
原理探索：
定位
定位的分類
其中靜態(tài)定位不能夠設(shè)置定位，即靜態(tài)定位是默認(rèn)狀態(tài)的定位。
?
?相對定位 position:relative
相對定位不脫離文檔流，可以調(diào)整元素。定位以該元素原來的位置為參考點，原來位置所占區(qū)域不脫離文本流。
絕對定位 子絕父相
?
?固定定位 position:fixed
?浮動和定位給行內(nèi)元素帶來的影響
總結(jié)一句話，只要是脫離了標(biāo)準(zhǔn)文本流的行內(nèi)元素，它的寬高就可以被修改。
z-index
該屬性用于解決不同定位元素之間的壓蓋現(xiàn)象，屬性的值為整數(shù)，數(shù)值大的壓蓋數(shù)值小的元素，只能用于已經(jīng)定位的元素。
從父現(xiàn)象
如果兩個同級元素各自有自己定位的父級元素，則z-index越大的父級壓蓋另外的父級，就是所說的從父現(xiàn)象。
css背景屬性
屬性總覽
?
?
?background-position詳解
除了使用px定位，還可使用關(guān)鍵字、百分比等定位，其中百分比定位于之前的絕對定位等不同，具體為水平百分比的值 = 容器寬度的百分比 - 背景圖片的百分比
?
?示例：MIUI大圖居中顯示，代碼如下，實際應(yīng)用的代碼為注釋代碼的簡寫，一般X-Y都可以用X的簡寫來實現(xiàn)。
?
?雪碧圖技術(shù)
雪碧圖技術(shù)，就是將頁面中一些不隨著用戶需求而改變的類似圖標(biāo)的小圖合成一個大圖，通過定位去截取獲取圖標(biāo)的技術(shù)，這樣可以減少頁面請求次數(shù)（因為每一次建立鏈接需要時間），提高網(wǎng)頁性能。
示例代碼：
?
?快速修改背景圖的縮放比例，注意，將大圖比例縮小之后，其他定位的比例也需要等比縮小
?
?雪碧圖技術(shù)的項目示例中，小的選項的列表重合部分可以使用圖片邊框顏色調(diào)透明來實現(xiàn)不重疊的現(xiàn)象。
?
?通過border-radius實現(xiàn)圓，半圓等圖形
?
邊框陰影
可參考此網(wǎng)站:https://www.html.cn/tool/css3Preview/Box-Shadow.html
css命名規(guī)范
http://www.divcss5.com/jiqiao/j4.shtml#no3
各類元素的居中方式
行內(nèi)元素水平垂直居中
?
其中方法二是將元素設(shè)置成單元格的形式，從而實現(xiàn)居中效果的。
塊級元素水平垂直居中的方法
方法一：通過定位position加margin:auto的方法實現(xiàn)，實現(xiàn)水平或者垂直只需其中兩個屬性即可。
.box1{width: 200px;height: 200px;background: green;position: relative;}.box2{width: 100px;height: 100px;background: red;position: absolute;margin: auto;top: 0;right: 0;left: 0;bottom: 0;}
方法二：通過設(shè)置單元格的模式居中，但是子元素必須是行內(nèi)塊標(biāo)簽
?
?
?
?方法三：通過設(shè)置具體像素實現(xiàn)定位，使用較多的一種方式
?
轉(zhuǎn)載于:https://www.cnblogs.com/swearBM/p/11490643.html
總結(jié)
以上是生活随笔為你收集整理的前端之css基础学习（更正版）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CF803C Maximal GCD
- 下一篇： 一周总结（4）