web前端———CSS基礎(chǔ)知識點總結(jié)

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

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

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

4、的樣式）CSS選擇符（器）CSS基本選擇符：類型選擇符、id選擇符、class選擇符（類選擇符）、包含選擇器Css選擇符分類：類型選擇符（標記選擇器）類選擇符（class選擇符）ID選擇符（id選擇器）偽類選擇器通配符（*）設(shè)置全局屬性群組選擇符（集合選擇器）包含選擇符（后代選擇器）屬性選擇符偽對象選擇符選擇符權(quán)重css中用四位數(shù)子表示權(quán)重，權(quán)重的表達方式如：0，0，0，0；權(quán)重規(guī)則：HTML標簽（類型選擇符）的權(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偽元素（對象）選擇符的權(quán)重為0001包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和內(nèi)聯(lián)樣式的權(quán)重為1000繼承樣式的權(quán)重為0000群組集合選擇符權(quán)重為他本身注：如果權(quán)重相同時，則執(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（外邊距）標準盒子模型亡ontDntbonder-toppaddingtopmargintopborder-bottommargin-bottompadding-bottompadding內(nèi)填充5:如果給單一方向添加paddingpadding-top/bottom/left/right6:padding的設(shè)置特點：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默認値（iMiSBSistatic的元養(yǎng)會正常顯示它始弊會處于文檔流給予的位瓷（static元素會忽略任何top、bottom.1申或right聲明）absolute相對于己經(jīng)定彳立父級元素的絕對定位，浮出、脫韶布局流E不占據(jù)空間就是我們所說的層其位國目對于最近的已定位父兀素而言

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

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

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

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

13、屬性1、display:flex、inline-flex注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。2、flex-direction屬性決定主軸的方向(即項目的排列方向)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屬性的簡寫形式，默認值為rownowrap;5、j

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

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