摘要：層疊性發(fā)生的前提樣式?jīng)_突優(yōu)先級權(quán)重行內(nèi)引入標(biāo)簽通用把權(quán)重相加，值越大越有先權(quán)重一樣，后面的樣式起作用補(bǔ)充知識(shí)筆記表單優(yōu)化寫法用戶名格式化列表圖標(biāo)表單合并設(shè)置表格邊框合并，適用于表格格式化上下文默認(rèn)值。

name：名稱，可以重復(fù)，可以一樣;

class：類名，可以重復(fù)，也可以擁有多個(gè)，給CSS用的；如

id：唯一標(biāo)示，不能重復(fù)，一般多用在JavaScript中；命名規(guī)則與其他語言的標(biāo)示命名規(guī)則一樣;

title：標(biāo)題，可以在標(biāo)簽中添加；如;

后代關(guān)系：父子關(guān)系（包含關(guān)系）;

兄弟關(guān)系：同父關(guān)系;

CSS注釋：/注釋內(nèi)容寫在這里，給程序員看，頁面上不顯示/;

CSS語法規(guī)則：所有符號(hào)都以英文輸入法狀態(tài)下輸入，要小寫，大括號(hào)里寫屬性，每條屬性語句都以分號(hào)結(jié)束，屬性值要帶像素單位（px）；格式：屬性:屬性值;

行內(nèi)引入：在標(biāo)簽中加樣式的引入方式；格式：<標(biāo)簽 style="background:red; font-size:20px;">內(nèi)容;注意：代碼可維護(hù)性極差，CSS代碼與html結(jié)構(gòu)沒有實(shí)現(xiàn)分離；影響的范圍只在當(dāng)前標(biāo)簽;

內(nèi)嵌引入：在網(wǎng)頁頭部中加;注意：代碼可維護(hù)性比較差，沒有實(shí)現(xiàn)CSS代碼與HTML結(jié)構(gòu)分離，影響范圍只在當(dāng)前頁面;

外聯(lián)引入：在網(wǎng)頁外創(chuàng)建一個(gè)xx.css文件，網(wǎng)頁頭部中利用;注意：代碼可維護(hù)性高，CSS代碼與HTML結(jié)構(gòu)完全分離，影響范圍整個(gè)網(wǎng)站所有引入CSS文件網(wǎng)頁中;

結(jié)構(gòu)格式：選擇器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};

選擇器：選擇頁面元素的工具;

大括號(hào)：大括號(hào)里面寫樣式內(nèi)容;

基礎(chǔ)選擇器：

通用選擇器：用來初始化網(wǎng)頁默認(rèn)樣式的，樣式表開頭就寫；格式：*{padding:0;margin:0;};

標(biāo)簽選擇器:給指定標(biāo)簽加樣式；格式：p{color:green;};

類選擇器：選擇制定類選擇器樣式；格式:.class名{background:pink;};注意：class名在標(biāo)簽中定義，如class="one";如果幾個(gè)塊內(nèi)容樣式一樣，那么給他們一樣的樣式就可以;

id選擇器：唯一標(biāo)示，不能重復(fù)出現(xiàn)；格式：#id名{backgound-image:url(1.jpg);}注意：id名在標(biāo)簽中定義id="one";id不能隨表加，幾個(gè)塊內(nèi)容樣式一樣時(shí)幾個(gè)塊的id名都得不一樣;;

id和class的區(qū)別：注意上一點(diǎn)——ID必須能夠唯一的確定DOM節(jié)點(diǎn)。如果你全篇都使用ID選擇器，那么即使兩個(gè)DOM節(jié)點(diǎn)樣式完全相同，那么你也必須把節(jié)點(diǎn)樣式寫兩遍, 如果后期要進(jìn)行維護(hù),那么你必須對兩處的代碼都進(jìn)行維護(hù)！！！極大的增加了維護(hù)的成本;

偽類選擇器：順序LoVe HAte原則，可以跳過去，但順序不能換；分別是鏈接狀態(tài)(link)，訪問過的狀態(tài)(visited)，活動(dòng)狀態(tài)(hover)和點(diǎn)擊狀態(tài)(active);

描點(diǎn)類：a:link{color:yellow;}   a:visited{color:blue;}  a:hover{color:red;} a:active{color:pin;}  獲取焦點(diǎn)時(shí)的樣式a:focus{};注意：屬性中可以加文本屬性，背景顏色和圖片；a{}與a:link{}實(shí)現(xiàn)的效果是一樣的;
列表類：li:link{color:yellow;};li:visited{color:blue;}  li:hover{color:red;} li:active{color:pin;};注意：屬性中可以加文本系列屬性，背景顏色和圖片等;

復(fù)合選擇器：

分組選擇器（并集選擇器，多元選擇器）：用來給多個(gè)元素加同一個(gè)樣式；例：.one,#one,a,span{color:red;font-size:14px;}意思是類one,#one,a標(biāo)簽，span標(biāo)簽有共同屬性;

后代選擇器：給子類元素加屬性;例：.one a{text-decoration:none;}意思是類one的后代a標(biāo)簽修飾的內(nèi)容無下劃線;

子元素選擇器（指定式選擇器）：給指定的子元素加屬性；例：#one>p{color:red;};意思是給id選擇器one的兒子p標(biāo)簽休息的內(nèi)容加屬性;

相鄰元素選擇器：

1.兩個(gè)緊挨著的兄弟選擇器加屬性,不給自己加屬性，只給后面的兄弟加屬性；.one+p{background:red;};
2.one~p{background:green}意思是給one選擇器后面的所有p標(biāo)簽元素加屬性，前提是他們擁有一個(gè)父類;

屬性選擇器：

1.給帶有屬性的元素的加屬性;img[id]{background:red;}給帶id的元素加屬性;
給帶有指定屬性值的元素加屬性：img[src="b.jpg"]{background:red;}給帶b.jpg的元素加屬性;
3.給帶有指定字符開頭的的元素加屬性：img[src^="b"]{background:red;}給以b開頭的所有元素加屬性;
4.選擇器帶有以指定屬性值為結(jié)尾的元素：img[src$="b"]{background:red;}給以b結(jié)尾的所有元素加屬性;
5.選擇器帶有包含指定屬性值的元素:img[src*="b"]{background:red;}給含b的所有元素加屬性;

塊元素：用來排版，結(jié)構(gòu) 典型的有：div，p，li，h1，dt;

元素自己獨(dú)占一行顯示（與寬度無關(guān)）;

可以設(shè)置寬度和高度;

當(dāng)嵌套一個(gè)塊級元素，子元素如果不設(shè)置寬度，那么該子元素的寬度為父元素的寬度;

行內(nèi)元素： 用來加樣式的；span,a,font,strong;注意：行內(nèi)元素不要給上下的margin和padding，上下會(huì)被忽略，左右起作用（一般不用）;

元素在一行上顯示;

不能直接設(shè)置寬度和高度;

行內(nèi)塊元素：image,input;

元素在一行上顯示;

可以設(shè)置寬度和高度;

轉(zhuǎn)換關(guān)系：行內(nèi)包含行內(nèi)；塊元素包含塊元素，塊元素可以包含行內(nèi)元素;

Display: inline 將元素轉(zhuǎn)化為行內(nèi)元素

Display：inline-block 將元素轉(zhuǎn)化行內(nèi)塊元素

Display: block 將元素轉(zhuǎn)化為塊元素

字體有關(guān)屬性：

font-size:字體大小，多少像素，px;

font-weight:字體粗細(xì)，bold（700-900），normal，可以寫100-900;

font-style：字體傾斜，italic，normal;

font-family:字體，微軟雅黑，黑體;

屬性連寫：font: font-style font-weight font-size/line-height font-family;注意： font屬性聯(lián)寫必須有 font-size 和font-family(其他屬性可以不寫)；font-size 和font-family的順序不能換;

文本：

color:顏色;

text-indent：縮進(jìn)【單位是em】;

text-decoration：文本線【underline下劃線，overline上劃線，line-through刪除線，none取消線】;

word-spacing:單詞之間距離;

letter-spacing：字母鍵距離;

text-align：水平對齊方式【默認(rèn)left，center，right】;

line-height：行高，文字所在行的高度【行高和元素高度相等時(shí)文字垂直居中】;

尺寸：是塊元素的尺寸，行內(nèi)元素不可以設(shè)置寬高，想設(shè)定得轉(zhuǎn)換;

width：寬度;

height：高度;

列表ul，li的屬性：list-style-type在ul中加了可以的li中不用加;

list-style-type:none;去掉符號(hào),square方塊，circle圓，disc實(shí)體圓，加圖片了后可以不寫也可以list-style-type:none;

list-style-image:url(1.jpg)圖片

border:1px solid red;給ul整體設(shè)置邊框

list-style-position:outside;樣式圖片定位：inside,outside

背景：

背景顏色background-color;

背景圖片background-image注意：設(shè)置背景圖片的時(shí)候一定要設(shè)置寬度和高度;

背景平鋪background-repeat：repeat （默認(rèn)值）|no-repeat （不平鋪）|repeat-x | （橫向平鋪）repeat-y （縱向平鋪）

背景位置background-position：設(shè)置具體值： left| right| top| bottom| cneter；設(shè)置具體值的時(shí)候不區(qū)分先后順序；設(shè)置具體數(shù)字的時(shí)候，第一個(gè)值代表水平方向，第二個(gè)值代表垂直方向，設(shè)置前背景圖片設(shè)置格式改成background-image;

設(shè)置背景是否固定background-attachment： Scroll（默認(rèn)值）滾動(dòng);fixed （圖片固定）;

屬性聯(lián)寫：沒有數(shù)量限制和先后順序限制：background:url("") red no-peat 30px 40px;

行高line-height:

盒子模型：用來進(jìn)行網(wǎng)頁布局，必須設(shè)置寬度

組成部分：

border邊框：

padding內(nèi)邊距：設(shè)置內(nèi)容距離盒子邊框之間的距離

margin外邊距： 設(shè)置盒子與盒子之間的距離

盒子邊框?qū)傩裕?/p>

邊框?qū)捀撸篵order-width:1px;

邊框顏色：border-color:red;

邊框樣式：border-style:solid實(shí)線/dotted點(diǎn)線/dashed虛線/none無;

屬性聯(lián)寫：border:1px solid red; 注意：屬性聯(lián)寫的時(shí)候沒有先后順序限制，邊框顏色可以不寫，邊框?qū)挾瓤梢圆粚?/p>

分開寫法：

     div{
          width:300px;
          height:200px;
         border-top:1px solid red;
         border-left:1px solid  red;
         border-right:1px solid  red;
         border-bottom:1px solid  red;
        }

6. 多帶帶設(shè)置屬性法：

     border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;

盒子大小：

盒子大小計(jì)算： 寬度=內(nèi)容寬度+左右邊框+左右內(nèi)邊距

邊框可以影響盒子大小

內(nèi)邊距影響盒子大小

以后進(jìn)行頁面盒子布局的實(shí)現(xiàn)，如果給盒子設(shè)置了內(nèi)邊距，對應(yīng)的要將內(nèi)容寬度或者高度減去相應(yīng)的值

盒子大小影響的地方：繼承的盒子再父盒子寬度范圍內(nèi)，padding值不會(huì)影響該盒子大小

margin外邊距： 設(shè)置盒子與盒子之間的距離

屬性聯(lián)寫：

Margin: 10px 上 右 下 左 10px

Margin:10px 20px 上下10px 左右20px

Margin: 10px 20px 30px 上10px 左右20px 下30px

Margin: 10px 20px 30px 40px 上右下左

盒子居中：

標(biāo)準(zhǔn)流下的盒子居中:margin:0px auto;

定位的盒子居中：先走父盒子的一半，再往回走自己寬度的一半

 one{
       width: 100px;
      height:100px;
      border: solid red  1px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
      }

注意：

當(dāng)兩個(gè)盒子垂直顯示的時(shí)候，外邊距以設(shè)置的最大值為準(zhǔn)（外邊距合并的第一種情況），當(dāng)兩個(gè)盒子橫排顯示時(shí)，外邊距疊加

外邊距塌陷（有難問題）解決步驟：

給父盒子設(shè)置邊框

給父盒子設(shè)置overflow:hidden;

padding內(nèi)邊距：設(shè)置內(nèi)容距離盒子邊框之間的距離

屬性聯(lián)寫：

Padding: 10px; 上，右，下，左的距離為10px

Padding: 10px 20px; 上下10px 左右20px

Padding: 10px 20px 30px； 上10px 左右20px 下30px

Padding: 10px 20px 30px 40px; 上， 右 ， 下， 左

清除邊距：

方法1：*{padding：0；margin：0；}

方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div,span{margin:0px;padding:0px;}

繼承性：

可繼承性：color，text-align，text-indent，font-size，font-weight，font-family

不可繼承：text-decoration，border，display，margin，float，padding

繼承性發(fā)生的前提是標(biāo)簽之間屬于一種嵌套關(guān)系

文字顏色可以實(shí)現(xiàn)繼承；文字大小可以實(shí)現(xiàn)繼承；字體可以實(shí)現(xiàn)繼承；與文字有關(guān)的屬性都可以 實(shí)現(xiàn)繼承

行高可以實(shí)現(xiàn)繼承

特殊性：

不能繼承父元素中的文字顏色（層疊掉了）

重疊性：層疊性是指樣式的覆蓋

樣式的層疊性與樣式的調(diào)用順序沒有關(guān)系，與樣式的定義順序有關(guān)。

層疊性發(fā)生的前提： 樣式?jīng)_突

優(yōu)先級：

權(quán)重：行內(nèi)引入（1000）>id(100)>class(10)>標(biāo)簽（1）>通用(0)

把權(quán)重相加，值越大越有先

權(quán)重一樣，后面的樣式起作用

表單優(yōu)化寫法：用戶名：

格式化列表圖標(biāo)：list-style: none

表單合并：border-collapse:collapse(設(shè)置表格邊框合并，適用于表格）

Bfc “格式化上下文”

overflow:

visible:默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外

hidden:內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的;當(dāng)圖片改變位置時(shí)帶動(dòng)父元素也改變位置，給父元素加此屬性值可使父元素位置不變

scroll:內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容

auto:如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容

用法： Float:left| right

特點(diǎn)：要浮動(dòng)都浮動(dòng)

設(shè)置了浮動(dòng)的元素不占原來的位置（脫標(biāo)）

可以讓塊級元素在一行上顯示

浮動(dòng)可以行內(nèi)元素轉(zhuǎn)化為行內(nèi)塊元素

模式轉(zhuǎn)換的過程中，能用display就用display

清除浮動(dòng)：

定義：清除浮動(dòng)不是刪除浮動(dòng)；清除浮動(dòng)指的是清除浮動(dòng)的影響

注意使用時(shí)機(jī)：當(dāng)子元素設(shè)置了浮動(dòng)，父元素沒有高度的時(shí)候，造成頁面布局混亂；這種情況下進(jìn)行清除浮動(dòng)。

清除浮動(dòng)方法：
[x]注意：在要清除浮動(dòng)的元素后面添加一個(gè)空塊元素（

     .clearfix{
            clrar:both;
      }
     

           

           

           

     

  [x]給父盒子設(shè)置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推薦使用該種方式清除浮動(dòng)**

     .content{
     width:500px；
     overflow:hidden;
     }

  [x]使用偽元素清除浮動(dòng)

     .clearfix:after{
        content:"";
       display:block;
       clear:both;
       height:0;
       visibility:hidden;
     }
     .clearfix
     {
       zoom:1;
     }
     

     

     

     

     

靜態(tài)定位：靜態(tài)定位就是元素標(biāo)準(zhǔn)流的顯示方式position:static;就是默認(rèn)的定位

絕對定位：相對于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就會(huì)找到最初的包含層；不占有以前的位置；position：absolute；

當(dāng)給一個(gè)多帶帶的元素設(shè)置絕對定位，以瀏覽器左上角（body）為基準(zhǔn)設(shè)置定位的。

當(dāng)盒子發(fā)生嵌套關(guān)系的時(shí)候，如果父盒子沒有設(shè)置定位，子盒子設(shè)置定位以瀏覽器左上角為基準(zhǔn)設(shè)置定位。

當(dāng)盒子發(fā)生嵌套關(guān)系的時(shí)候，如果父盒子設(shè)置定位，子盒子設(shè)置定位父盒子左上角為基準(zhǔn)設(shè)置定位。

給盒子設(shè)置了絕對定位，該盒子不占位置（脫標(biāo)）

給行內(nèi)元素設(shè)置絕對定位后，該元素轉(zhuǎn)化為了行內(nèi)塊元素

注意：元素設(shè)置了絕對定位后，通過具體的方位名稱可以隨便設(shè)置元素的位置

相對定位：相對于元素原位置，會(huì)占有以前位置；position：relative；

元素設(shè)置了相對定位后占原來的位置

設(shè)置相對定位以自己的位置為參照設(shè)置位置

相對定位不能進(jìn)行元素的模式轉(zhuǎn)換

子絕父相（子元素設(shè)置絕對定位，父元素設(shè)置相對定位）

固定定位：相對于整個(gè)穩(wěn)穩(wěn)當(dāng)固定不變；固定定位不占位置（脫標(biāo)）;將行內(nèi)元素轉(zhuǎn)化為行內(nèi)塊元素position:fixed

層級問題：

只有設(shè)置到定位才會(huì)有層級問題

兄弟元素中存在相對，絕對等定位，誰的HTML文檔結(jié)構(gòu)在后面，誰在最外層（層級高）

Z-index:設(shè)置層級，值是數(shù)字，只要有定位會(huì)用到定位設(shè)置

瀏覽器中的坐標(biāo)系

圓點(diǎn)以右為正方向，圓點(diǎn)以下為正

CSS精靈是一種處理網(wǎng)頁背景圖像的方式；精靈圖也是一種背景圖片

精靈圖的使用

使用fw一定要用打開的方式打開精靈圖

使用精靈圖作為背景圖片的時(shí)候，常與background-position配合使用

測量精靈圖中的元素的坐標(biāo)使用矩形選擇器

或者使用快捷鍵 字母： k

overflow: hidden 將超出部分進(jìn)行隱藏

display: none 直接將元素隱藏

display：block 將元素顯示(與js配合更搭)

visibility:hidden 將元素隱藏

display: none; 將元素隱藏后不占位置

visibility: hidden; 將元素隱藏后占原來的位置

每一種inlne-block元素都有一個(gè)默認(rèn)的vertical-align:baseline

vertical-align:middle 垂直對齊； vertical-align與inline-block更搭配；

網(wǎng)頁布局過程中能用標(biāo)準(zhǔn)流就用標(biāo)準(zhǔn)流

標(biāo)準(zhǔn)流不能解決浮動(dòng)

浮動(dòng)不能解決定位

使用margin-left/margin-right 取值為auto可以將盒子自動(dòng)沖到兩外一邊

div可以包含任何標(biāo)準(zhǔn)流下的標(biāo)簽

p標(biāo)簽不能包含div和標(biāo)題標(biāo)簽和列表標(biāo)簽

標(biāo)題便簽可以包含其他標(biāo)簽

行內(nèi)元素最好不要包含其他標(biāo)簽

在浮動(dòng)之后，元素可以設(shè)置寬高

在絕對定位后，元素可以設(shè)置寬高

在固定定位后，元素可以設(shè)置寬高

CSS3和CSS2：CSS功能強(qiáng)大，代碼簡潔

偽類選擇器：

第一個(gè)子元素：first-child

最好一個(gè)元素：last-child

第n個(gè)子元素：nth-child（n）;n給數(shù)值

奇數(shù)為子元素：nth-child(odd);或者（nth-child(2n+1)）

偶數(shù)位子元素：nth-child(even)；或者（nth-child(2n)）

文本陰影：text-shadow：水平，垂直，陰影

盒子陰影：box-shaadow:水平，、垂直，陰影

背景：background