web前端———CSS基礎(chǔ)知識(shí)點(diǎn)總結(jié)

1、web冃iu而,CSS基礎(chǔ)知識(shí)點(diǎn)總結(jié)CSSCSS（cascadingstylesheet）漢譯為層疊樣式表（層疊性）,是用于控制網(wǎng)頁(yè)樣式WEB標(biāo)準(zhǔn)中的表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言，在網(wǎng)頁(yè)中主要對(duì)網(wǎng)頁(yè)信息的顯示進(jìn)行控制。目前推薦遵循的是W3C發(fā)布的CSS3.0版本；用來(lái)表現(xiàn)HTML或者XHTML等樣式文件的計(jì)算機(jī)語(yǔ)言。1998年5月21日由w3C正式推出的css2.0CSS語(yǔ)法css語(yǔ)法由兩部分組成：選擇符、聲明。聲明包括：屬性和屬性值選擇符（選擇器）屬性:屬性值;屬性:屬性值;pwidth:100px;height:200px;1）每個(gè)css樣式由兩部分組成，即選擇符和聲明，聲明又分為屬性和屬性值；2）聲明必

2、須放在花括號(hào)中，屬性與屬性值用冒號(hào)連接。（html屬性與屬性值用等號(hào)鏈接）3）每條聲明用分號(hào)結(jié)束。4）當(dāng)一個(gè)屬性有多個(gè)屬性值的時(shí)候，屬性值與屬性值不分先后順序,用空格隔開(kāi)。5）在書寫樣式過(guò)程中，空格、換行等操作不影響屬性顯示。（html會(huì)受空格換行影響）表單表單標(biāo)簽（內(nèi)聯(lián)塊標(biāo)簽）屬性：action=接口地址method=get/postname=表單名稱表單控件屬性：type=控件類型name:屬性標(biāo)識(shí)表單域的名稱；Value:屬性定義表單域的默認(rèn)值，其他屬性根據(jù)type的不同而有所變化。maxlength:控制最多輸入的字符數(shù)，Size:控制框的寬度（以字符為單位）1）文本框2）密碼框3）提

3、交按鈕4）重置按鈕5）空按鈕CSS樣式表內(nèi):部樣式表語(yǔ)法：css語(yǔ)句注：使用style標(biāo)記創(chuàng)建樣式時(shí)，最好將該標(biāo)記寫在;2:外部樣式（1）語(yǔ)法：說(shuō)明：使用link元素導(dǎo)入外部樣式表時(shí)，需將該元素寫在文檔頭部，即與/head之間。rel:用于定義文檔關(guān)聯(lián)，表示關(guān)聯(lián)樣式表；type:定義文檔類型；（2）、導(dǎo)入外部樣式表importurl（目標(biāo)文件的路徑及文件名全稱”）；3:內(nèi)聯(lián)樣式表/標(biāo)簽CSS樣式表的權(quán)重關(guān)系1）內(nèi)聯(lián)樣式表的優(yōu)先級(jí)別最高2）內(nèi)部樣式表與外部樣式表的優(yōu)先級(jí)和書寫的順序有關(guān)，后書寫的優(yōu)先級(jí)別高。3）同在一個(gè)樣式表中的優(yōu)先級(jí)和書寫的順序也有關(guān)，后書寫的優(yōu)先級(jí)別高。（被覆蓋的只是相同屬性

4、的樣式）CSS選擇符（器）CSS基本選擇符：類型選擇符、id選擇符、class選擇符（類選擇符）、包含選擇器Css選擇符分類：類型選擇符（標(biāo)記選擇器）類選擇符（class選擇符）ID選擇符（id選擇器）偽類選擇器通配符（*）設(shè)置全局屬性群組選擇符（集合選擇器）包含選擇符（后代選擇器）屬性選擇符偽對(duì)象選擇符選擇符權(quán)重css中用四位數(shù)子表示權(quán)重，權(quán)重的表達(dá)方式如：0，0，0，0；權(quán)重規(guī)則：HTML標(biāo)簽（類型選擇符）的權(quán)重是1,class的權(quán)重是10,id的權(quán)重是100。類型選擇符的權(quán)重為0001class選擇符的權(quán)重為0010id選擇符的權(quán)重為0100屬性選擇符的權(quán)重為0010偽類選擇符的權(quán)重為0

5、010偽元素（對(duì)象）選擇符的權(quán)重為0001包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和內(nèi)聯(lián)樣式的權(quán)重為1000繼承樣式的權(quán)重為0000群組集合選擇符權(quán)重為他本身注：如果權(quán)重相同時(shí)，則執(zhí)行后寫的樣式；css屬性繼承不可纟繼承的：display、margin、border、padding、background、height、min-height、max-height、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align所有元素可繼承：visi

6、bility和cursor。內(nèi)聯(lián)元素可纟繼承：letter-spacing、word-spacing、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。塊狀元素可繼承：text-indent和text-align列表元素可纟繼承：list-style、list-style-type、list-style-position、list-style-image。表格元素可繼承：border-collapse。盒模型盒模型組成=c

7、ontent（內(nèi)容）+padding（內(nèi)填充）+border（邊框）+margin（外邊距）標(biāo)準(zhǔn)盒子模型亡ontDntbonder-toppaddingtopmargintopborder-bottommargin-bottompadding-bottompadding內(nèi)填充5:如果給單一方向添加paddingpadding-top/bottom/left/right6:padding的設(shè)置特點(diǎn)：padding:30px;四周padding:10px30px;上下左右padding:10px30px50px上左右下padding:10px30px50px100px上右下左margin外邊距、邊

8、界3:給單一方向添加marginmargin-left/right/top/bottom4:margin設(shè)置方法：margin:30px;四周margin:10px30px;上下左右margin:10px30px50px上左右下margin:10px30px50px100px上右下左定位position性值static默認(rèn)値（iMiSBSistatic的元養(yǎng)會(huì)正常顯示它始弊會(huì)處于文檔流給予的位瓷（static元素會(huì)忽略任何top、bottom.1申或right聲明）absolute相對(duì)于己經(jīng)定彳立父級(jí)元素的絕對(duì)定位，浮出、脫韶布局流E不占據(jù)空間就是我們所說(shuō)的層其位國(guó)目對(duì)于最近的已定位父兀素而言

9、的位遼可直接指定WfT、J,topbrightIU及“botsnr屬性.若父級(jí)都沒(méi)有達(dá)位則lilhtml根元素）（層髻的順序z-index:value）relative是相對(duì)于默認(rèn)位置的相對(duì)定仏通11設(shè)置left.top.right,bottom值可將基移至相對(duì)于其正常位宣的地萬(wàn)相對(duì)于自己的開(kāi)始的性宣發(fā)生的位置上的移動(dòng)【不會(huì)破壞正常的布局:施占據(jù)空間】）fixed相對(duì)瀏覽器的絕對(duì)走位是相對(duì)于瀏覽器窗口的指定坐標(biāo)逬行走位。此元蠹的位章可1eft-top-right1以及-bottom-屬性乘規(guī)走.不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位聾。sticky可UA看出是position:relative和

10、position:fixed的緒合體當(dāng)兀素在*liiE3口口冃止豆三丄1_*_i錨點(diǎn)命名錨點(diǎn)鏈接的應(yīng)用：命名錨點(diǎn)的作用：在同一頁(yè)面內(nèi)/其他頁(yè)面的不同位置進(jìn)行跳轉(zhuǎn)。制作錨標(biāo)記：1）給元素定義命名錨記名語(yǔ)法：/標(biāo)記2）命名錨記連接語(yǔ)法：擴(kuò)展：scroll-behavior:smooth;CSS3選擇符屬性選擇器1、Eattr:只使用屬性名，但沒(méi)有確定任何屬性值2、Eattr=value:指定屬性名，并指定了該屬性的屬性值3、EattrA=value:指定了屬性名，并且有屬性值，屬性值是以value開(kāi)頭的4、Eattr$=value:指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的5、Ea

11、ttr*=value:指定了屬性名，并且有屬性值，而且屬值中包含了value偽類選擇器結(jié)構(gòu)性偽類選擇器X:first-child匹配子集的第一個(gè)元素IE7就可以支持X:last-child匹配父元素中最后一個(gè)X元素X:nth-child(n)用于匹配索引值為n的子元素。索引值從1開(kāi)始X:nth-last-child(n)從最后一個(gè)開(kāi)始算索引。X:first-of-type匹配同級(jí)兄弟元素中的第一個(gè)X元素X:last-of-type*匹配同級(jí)兄弟元素中的最后一個(gè)X元素X:nth-of-type(n)匹配同類型中的第n個(gè)同級(jí)兄弟元素XX:only-of-type匹配屬于同類型中唯一兄弟元素的XX:

12、nth-last-of-type(n)匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素X動(dòng)態(tài)偽類選擇器a:link鏈接偽類選擇器選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上a:visited鏈接偽類選擇器選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上E:active用戶行為選擇器選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點(diǎn)和按鈕上E:hover用戶行為選擇器選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hoverE:focus用戶行為選擇器選擇匹配的E元素，而且匹配元素獲取焦點(diǎn)FLEXBOX布局(彈性盒)flex容器

13、屬性1、display:flex、inline-flex注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。2、flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)flex-direction:row|row-reverse|column|column-reverse;3、flex-wrap屬性，定義子元素是否換行顯示flex-wrap:nowrap|wrap|wrap-reverse;4、flex-flowflex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為rownowrap;5、j

14、ustify-content屬性定義了項(xiàng)目在主軸（）上的對(duì)齊方式。justify-content:flex-start|flex-end|center|space-between|space-around;6、align-items屬性定義項(xiàng)目在側(cè)軸（單行）上如何對(duì)齊。align-items:flex-start|flex-end|center|baseline|stretch（默認(rèn)值）；7、align-content屬性定義了多根軸線的對(duì)齊方式。對(duì)于單行子元素，該屬性不起作用。align-content:flex-start|flex-end|center|space-between|spa

15、ce-around|stretch;align-content在側(cè)軸上執(zhí)行樣式的時(shí)候，會(huì)把默認(rèn)的間距給合并。對(duì)于單行子元素，該屬性不起作用flex項(xiàng)目屬性1、align-self屬性InternetExplorer和Safari瀏覽器不支持align-self屬性說(shuō)明：align-self屬性規(guī)定靈活容器內(nèi)被選中項(xiàng)目的對(duì)齊方式。注意：align-self屬性可重寫靈活容器的align-items屬性。屬性值auto默認(rèn)值。元素繼承了它的父容器的align-items屬性。如果沒(méi)有父容器則為stretch。Stretch元素被拉伸以適應(yīng)容器。Center元素位于容器的中心。flex-start元素位于容器的開(kāi)頭。flex-end元素位于容器的結(jié)尾。2、order說(shuō)明：number排序優(yōu)先級(jí)，數(shù)字越大越往后排，默認(rèn)為0,支持負(fù)數(shù)。3、fle