摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。

name：名稱，可以重復，可以一樣;

class：類名，可以重復，也可以擁有多個，給CSS用的；如

id：唯一標示，不能重復，一般多用在JavaScript中；命名規則與其他語言的標示命名規則一樣;

title：標題，可以在標簽中添加；如;

后代關系：父子關系（包含關系）;

兄弟關系：同父關系;

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

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

行內引入：在標簽中加樣式的引入方式；格式：<標簽 style="background:red; font-size:20px;">內容;注意：代碼可維護性極差，CSS代碼與html結構沒有實現分離；影響的范圍只在當前標簽;

內嵌引入：在網頁頭部中加;注意：代碼可維護性比較差，沒有實現CSS代碼與HTML結構分離，影響范圍只在當前頁面;

外聯引入：在網頁外創建一個xx.css文件，網頁頭部中利用;注意：代碼可維護性高，CSS代碼與HTML結構完全分離，影響范圍整個網站所有引入CSS文件網頁中;

結構格式：選擇器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};

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

大括號：大括號里面寫樣式內容;

基礎選擇器：

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

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

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

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

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

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

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

復合選擇器：

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

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

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

相鄰元素選擇器：

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

屬性選擇器：

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

塊元素：用來排版，結構 典型的有：div，p，li，h1，dt;

元素自己獨占一行顯示（與寬度無關）;

可以設置寬度和高度;

當嵌套一個塊級元素，子元素如果不設置寬度，那么該子元素的寬度為父元素的寬度;

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

元素在一行上顯示;

不能直接設置寬度和高度;

行內塊元素：image,input;

元素在一行上顯示;

可以設置寬度和高度;

轉換關系：行內包含行內；塊元素包含塊元素，塊元素可以包含行內元素;

Display: inline 將元素轉化為行內元素

Display：inline-block 將元素轉化行內塊元素

Display: block 將元素轉化為塊元素

字體有關屬性：

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

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

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

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

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

文本：

color:顏色;

text-indent：縮進【單位是em】;

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

word-spacing:單詞之間距離;

letter-spacing：字母鍵距離;

text-align：水平對齊方式【默認left，center，right】;

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

尺寸：是塊元素的尺寸，行內元素不可以設置寬高，想設定得轉換;

width：寬度;

height：高度;

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

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

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

border:1px solid red;給ul整體設置邊框

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

背景：

背景顏色background-color;

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

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

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

設置背景是否固定background-attachment： Scroll（默認值）滾動;fixed （圖片固定）;

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

行高line-height:

盒子模型：用來進行網頁布局，必須設置寬度

組成部分：

border邊框：

padding內邊距：設置內容距離盒子邊框之間的距離

margin外邊距： 設置盒子與盒子之間的距離

盒子邊框屬性：

邊框寬高：border-width:1px;

邊框顏色：border-color:red;

邊框樣式：border-style:solid實線/dotted點線/dashed虛線/none無;

屬性聯寫：border:1px solid red; 注意：屬性聯寫的時候沒有先后順序限制，邊框顏色可以不寫，邊框寬度可以不寫

分開寫法：

     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. 多帶帶設置屬性法：

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

盒子大小：

盒子大小計算： 寬度=內容寬度+左右邊框+左右內邊距

邊框可以影響盒子大小

內邊距影響盒子大小

以后進行頁面盒子布局的實現，如果給盒子設置了內邊距，對應的要將內容寬度或者高度減去相應的值

盒子大小影響的地方：繼承的盒子再父盒子寬度范圍內，padding值不會影響該盒子大小

margin外邊距： 設置盒子與盒子之間的距離

屬性聯寫：

Margin: 10px 上 右 下 左 10px

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

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

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

盒子居中：

標準流下的盒子居中:margin:0px auto;

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

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

注意：

當兩個盒子垂直顯示的時候，外邊距以設置的最大值為準（外邊距合并的第一種情況），當兩個盒子橫排顯示時，外邊距疊加

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

給父盒子設置邊框

給父盒子設置overflow:hidden;

padding內邊距：設置內容距離盒子邊框之間的距離

屬性聯寫：

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

繼承性發生的前提是標簽之間屬于一種嵌套關系

文字顏色可以實現繼承；文字大小可以實現繼承；字體可以實現繼承；與文字有關的屬性都可以 實現繼承

行高可以實現繼承

特殊性：

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

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

樣式的層疊性與樣式的調用順序沒有關系，與樣式的定義順序有關。

層疊性發生的前提： 樣式沖突

優先級：

權重：行內引入（1000）>id(100)>class(10)>標簽（1）>通用(0)

把權重相加，值越大越有先

權重一樣，后面的樣式起作用

表單優化寫法：用戶名：

格式化列表圖標：list-style: none

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

Bfc “格式化上下文”

overflow:

visible:默認值。內容不會被修剪，會呈現在元素框之外

hidden:內容會被修剪，并且其余內容是不可見的;當圖片改變位置時帶動父元素也改變位置，給父元素加此屬性值可使父元素位置不變

scroll:內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容

auto:如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容

用法： Float:left| right

特點：要浮動都浮動

設置了浮動的元素不占原來的位置（脫標）

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

浮動可以行內元素轉化為行內塊元素

模式轉換的過程中，能用display就用display

清除浮動：

定義：清除浮動不是刪除浮動；清除浮動指的是清除浮動的影響

注意使用時機：當子元素設置了浮動，父元素沒有高度的時候，造成頁面布局混亂；這種情況下進行清除浮動。

清除浮動方法：
[x]注意：在要清除浮動的元素后面添加一個空塊元素（

     .clearfix{
            clrar:both;
      }
     

           

           

           

     

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

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

  [x]使用偽元素清除浮動

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

     

     

     

     

靜態定位：靜態定位就是元素標準流的顯示方式position:static;就是默認的定位

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

當給一個多帶帶的元素設置絕對定位，以瀏覽器左上角（body）為基準設置定位的。

當盒子發生嵌套關系的時候，如果父盒子沒有設置定位，子盒子設置定位以瀏覽器左上角為基準設置定位。

當盒子發生嵌套關系的時候，如果父盒子設置定位，子盒子設置定位父盒子左上角為基準設置定位。

給盒子設置了絕對定位，該盒子不占位置（脫標）

給行內元素設置絕對定位后，該元素轉化為了行內塊元素

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

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

元素設置了相對定位后占原來的位置

設置相對定位以自己的位置為參照設置位置

相對定位不能進行元素的模式轉換

子絕父相（子元素設置絕對定位，父元素設置相對定位）

固定定位：相對于整個穩穩當固定不變；固定定位不占位置（脫標）;將行內元素轉化為行內塊元素position:fixed

層級問題：

只有設置到定位才會有層級問題

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

Z-index:設置層級，值是數字，只要有定位會用到定位設置

瀏覽器中的坐標系

圓點以右為正方向，圓點以下為正

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

精靈圖的使用

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

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

測量精靈圖中的元素的坐標使用矩形選擇器

或者使用快捷鍵 字母： k

overflow: hidden 將超出部分進行隱藏

display: none 直接將元素隱藏

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

visibility:hidden 將元素隱藏

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

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

每一種inlne-block元素都有一個默認的vertical-align:baseline

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

網頁布局過程中能用標準流就用標準流

標準流不能解決浮動

浮動不能解決定位

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

div可以包含任何標準流下的標簽

p標簽不能包含div和標題標簽和列表標簽

標題便簽可以包含其他標簽

行內元素最好不要包含其他標簽

在浮動之后，元素可以設置寬高

在絕對定位后，元素可以設置寬高

在固定定位后，元素可以設置寬高

CSS3和CSS2：CSS功能強大，代碼簡潔

偽類選擇器：

第一個子元素：first-child

最好一個元素：last-child

第n個子元素：nth-child（n）;n給數值

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

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

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

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

背景：background