CSS 規則
?css 語法：選擇器 、一條或者多條聲明（css屬性）
CSS引入方式
1. 行內式
? ? 通過style這個標簽屬性 將css鍵值對直接寫入標簽內
2. 內嵌式（嵌入式）
? ? 使用style標簽將css屬性名和屬性值引入到html頁面中 通常style標簽放置在head標簽中
????<style type="text/css">
????????p{ width: 100px;}......
????</style>
3. 外聯式（外鏈式）
? ? 通過link標簽將獨立的css文件引入到html文件中
? ? <link rel="stylesheet" type="text/css"? href="index.css" >
4. 導入式
? ? 通過 @import 'url'? ?引入一個獨立的css文件??url:被鏈接文檔的位置
? ? 導入式依賴css樣式文件 所以要放在style或者css樣式表里
? ? 如果style里面既有內嵌的樣式 又有導入的樣式 導入的樣式要在內嵌式的上面，放在下面會失效
? ? <style type="text/css">
? ? @import? url(style.css)? ?</style>
>> 外聯式和導入式的區別(重要)
? ? 1. link和@import都是引入外部css文件 ，link是html標簽 @import完全是css提供的方式
? ? 2. 加載順序有區別 當一個頁面加載時候 link引用的css文件會被同時加載 而import引入的css會等頁面全部加載完后再加載
? ? 3. 當使用js控制DOM區改變css樣式的時候 只能使用link標簽 因為import是不能被DOM控制的
? ? 4.?兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題
CSS命名規范
1）必須英文開頭 開頭字母一律小寫 所有的命名最好都小寫
2）盡量不適用英文縮寫 除非可以一目了然
3）遵守駝峰命名法
4）如果遇到相差不太大的class或者id 主功能識別字母在前 位置識別字母在后 位置識別字母第一個可大寫（navTop，menuLeft）
CSS選擇器
標簽選擇器? ? ?類選擇器（.）? ? ? id選擇器（#）? ? ? ?通配符選擇器
通配符選擇器（*）：代表頁面上所有的標簽名 可以去掉瀏覽器默認自帶的間距
*{
margin: 0; /*外間距*/
padding: 0; /*內間距*/
}
并集選擇器
? ? 樣式相同的標簽可以并列在一起 節約代碼量 減少代碼的多次重復使用 符號是逗號
交集選擇器
????兩種屬性同屬一個元素的時候 可以使用交集選擇器進行元素的準確選擇
? ? 在class或者id名前面加上標簽名 縮小查找范圍
????標簽名.classname | id { ... }? ??
派生（后代）選擇器
? ? 后代選擇器：單個選擇器用空格隔開 層級嵌套不要超過3個 只需要保留一些關鍵節點
子代選擇器
????與后代選擇器相比 子元素選擇器只能選擇作為某元素子元素的元素 符號為右尖括號
相鄰兄弟選擇器
? ? 相鄰兄弟選擇器可選擇緊接在另一元素后的元素 且二者有相同的父親
? ? +：相鄰兄弟
? ? ~：所有兄弟
屬性選擇器
? ? 屬性：標簽（天生的）和自定義的標簽屬性
? ? 符號：[屬性]
? ? ? ? ? ? ? ? [屬性名="屬性值"]
偽類選擇器
????a:link {}? ? /*未訪問的鏈接*/
????a:visited {}? ? ?/*已訪問的鏈接*/
????a:hover {}? ?/*鼠標移動到鏈接上*/
????a:active {}? ?/*選定的鏈接（鼠標按下）*/
? ? 表單元素input :?
? ? ????input: focus? ? 獲取焦點（鼠標光標）
? ????? input:blur????????失去焦點（鼠標光標）
偽元素選擇器
? ? :first-line? ?第一行內容??
? ? :first-letter? ?第一個字符?
? ? :before? ?元素之前添加內容
? ? :after? ? ? 元素之后添加內容
? ? 只要碰到偽元素 before after 就要加content=""
? ? 只要是設置寬度不起作用 就加 display：block/ display:inline-block；
? ??display：block;? 獨占一行
? ??display:inline-block；? 不獨占一行
偽類 偽元素區別？
? ? 偽類需要鼠標按上按下? 偽元素不需要
css3中新增的偽選擇器有哪些？
? ? ：not? 排除
? ? :last-child ????最后一個元素
? ? :nth-child(n)? ?n表示具體的第幾個? odd/2n+1 奇數? ? even/2n? 偶數
????:only-child? 僅僅/唯一的元素
????:nth-last-child(n)? ?倒數第幾個元素
????:first-of-type? ? 匹配第一個同級兄弟元素
????:last-of-type? ? 匹配最后一個同級兄弟元素
????:only-of-type? ?只有一個同級兄弟元素
????:nth-of-type(n)? ?第幾個同級兄弟元素
????:nth-last-of-type(n)? ?倒數幾個同級兄弟元素
? ? :empty? ?空內容
? ? :checked? 表示被選中 主要用在input表單元素
CSS權重
優先級的順序如下：
！important > 內聯(style) > ID > 類(class) > 標簽(li...) | 偽類(:hover,:focus...) | 屬性選擇[attr=''] > 偽對象(:before,:after) > 通配符(*) > 繼承(inherit)
可繼承、不可繼承的樣式屬性
不可繼承的樣式：
1. display? ：規定元素應該生成的框的類型
2. 文本屬性
????vertical-align? 垂直文本對齊
????text-decoration? ?規定添加到文本的裝飾
3. 盒子模型的屬性：width、height、margin-top......
4. 背景屬性 background、background-color....
5. 定位屬性：float、clear、 position....
可繼承的屬性
1. 字體系列屬性
? ? fond 、fond-size、fond-weight.....
2. 文本系列
? ? text-indent? 文本縮進
? ? text-align? 水平對齊
? ? line-height? 行高 ...
CSS盒子模型
盒子模型：寬 高 內邊距（padding） 外邊距（margin）
制作三角箭頭：
三角形的大小由border-width邊框線的寬度控制
三角形的顏色由border-color邊框線顏色控制
margin兼容性
面試題：（并列盒子的margin重疊）一個盒子有上邊距 另一個有下邊距 會出現margin邊距重疊問題 那實際邊距是取大取小還是取和？? 取大?
1. margin-top的傳遞問題
????大盒子里面嵌套小盒子 給小盒子加margin-top值 不但沒實現和大盒子的間距 反而傳遞到大盒子身上 導致整體下移 ？
? ? =>解決兼容性問題
? ? 1》給大盒子加屬性 overflow: hidden 解決margin-top的傳遞問題 （此處不是溢出隱藏）
????2》給大盒子加屬性 padding-top：1px； 這種方法會影響實際高 需要height的基礎上減掉
? ? 3》border-top:1px 這種方法會影響高度 需要減掉
? ? 4》不需要給小盒子加margin-top? ?改為給大盒子加padding-top:20px; 高減去20px;這樣就避免了margin-top值導致的傳遞問題（轉移目標對象）
2. margin的負值使用
margin-left:-1300px;
3. margin和padding的區別
????1》 margin 外邊距 padding內邊距
? ? 2》margin不會影響最后元素的實際寬高 padding會影響元素的實際寬高，如果要不影響 需要在width、height里面減去padding對應的值
? ? 3》margin主要用來控制元素和元素之間的間距 padding不能控制元素之間的間距，只能控制它里面的元素
4. 盒子模型的計算
? ? 元素實際高度 = 寬度width+padding-left/padding-right + border-left/border-right
? ? 元素實際寬度 = 高度height + padding-top/padding-bottom + border-top/border-bottom
????總結：元素的實際大小只會受padding和border的影響 跟margin沒有關系
????如果加了padding和border的值 需要在width和height上減去 否則內容會溢出
CSS背景
1. 背景顏色
2. 背景圖片
????background-image: url(地址)
? ??text-indent: -99999px;/*首段縮進或者將文字內容消失*/
3. 背景重復?background-repeat
? ? background-repeat :背景重復（平鋪方式）
????默認值 repeat(x/y軸同時平鋪)
????no-repeat 不平鋪
????repeat-x? x軸平鋪
????repeat-y? y軸平鋪
? ? background-color/background-image=>簡寫成background
? ? 若是想要將圖片和平鋪方式合并（復合寫法） 這樣寫
????background: url("http://www.zhufengpeixun.com/skin/20142/img/navbj.png") repeat-x;
4. 背景定位? [???background-position ]
????backgroound-position：x軸坐標 y軸坐標；? 背景定位
????單位： px? 百分比? 方位（left right? top? bottom center） 方位詞成對出現 如果僅指定一個 其他值會是center
????inherit? ?指定background-psition 屬性設置應該從父元素繼承
? ? 復合寫法：
? ??background: #3345ff url("http://www.zhufengpeixun.com/skin/20142/img/logo.png") no-repeat left center;
????background-position: left;=>left center
????background-position: 50%;=>50% 50%
5. 背景相關? background-attachment?
? ? 設置背景圖像是否固定或者隨著頁面的其余部分滾動
? ? scroll? ? ? ? 背景圖片隨著頁面的滾動條滾動 這是默認
? ? fixed? ? ? ? 背景圖像是固定的
? ? inherit? ? ? 指定background-attachment 的設置從父元素繼承
? ? 可復合寫在background 中
6. 背景尺寸? ? background-size
? ? 設置對象的背景圖片的大小
? ? background-size: x軸尺寸大小 y軸尺寸大小；
? ? 值： px? 百分比 auto(自動 背景圖片原本的尺寸)? ?
????????????cover (完全覆蓋)：背景圖片等比例拉伸 到完全覆蓋盒子大小為止 變虛
? ? ? ? ? ? contain? :圖片等比例拉伸 只要一條邊觸碰到盒子的任意一條邊 它就會停止拉伸 會出現留白
7. 背景裁剪? ? ?background-clip
? ? content-box: 從內容區域之外開始裁剪（裁剪掉的內邊距和邊框區域）
????padding-box: 從內邊距區域之外開始裁剪 （不包括內邊距 裁剪掉的是邊框區域）
? ? border-box : 裁剪邊框之外的內容 （不包括邊框線） 效果不明顯
8. 設置背景圖片的參考原點（位置）? background-origin
? ? padding-box：從padding區域（含padding）開始顯示背景圖像
? ? border-box： 從border區域（含border）開始顯示背景圖像
? ? content-box： 從content區域開始顯示背景圖像
css新增屬性
? ? background-size
? ? background-clip
? ? background-origin?
面試題：請完整列舉background的屬性值（8個）
? ? css:
? ? background-color、background-image、background-repeat、background-position、background-attachment、
? ? 復合屬性：
? ? background: background-color background-image background-repeat background-position background-attachment;
? ? css3新增：
? ? background-size
? ? background-origin
? ? background-clip
overflow 作用
1. 溢出隱藏 （超出內容之外的部分隱藏起來）
2. 清除浮動產生的影響
3. 解決margin-top產生的傳遞問題
讓多個元素在一行顯示的方法？面試題
display：inline;
display:inline-block;
float: left/right;
1. display:inline? 把元素轉化為行內元素? 但是設置寬高屬性不起作用
2. display:inline-block 可以讓元素在一行顯示 但是它會受空格/換行鍵的影響 會有默認的間距
? ? =》解決方法：
? ? 1.去掉空格、換行鍵的影響 讓標簽全都在一行（不推薦 閱讀性差）
? ? 2. 給父元素加一個屬性 fond-size:0; (但是會發現一個問題：元素里面有文字的話 文字消失了 =》解決：在元素身上加一個fond-size把父元素覆蓋)（最佳解決方法）
? ? display:inline-block在IE6,7下不兼容的解決方法：(css hack兼容)
? ? =>*display:inline;
? ? =>*zoom:1;
? ? 3. 利用浮動 float:left/right? 但是需要清除浮動
單行文本出現省略號必備條件？? 面試題
1. width? 寬度（不寫寬度 默認繼承父元素的寬度）
2. overflow:hidden? 溢出隱藏
3. white-space:nowrap? 強制不折行
4. 文字以省略號的方式隱藏
例如：
width :100px;? /*寬度*/
overflow:hidden; /*溢出隱藏*/
white-space: nowarp; /*強制文字不折行*/
text-overflow: ellipsis; /*文字隱藏的方式：以省略號的方式（ellipsis）? */
多行文本出現省略號的必備條件？面試題
display:-webkit-box; /*彈性盒模型*/
-webkit-box-orient： vertical;? /*規定元素的排列方式：垂直排列*/
-webkit-line-clamp:2;? /*文字的行數*/
overflow: hidden; /*溢出隱藏*/
浮動元素 float
浮動元素的特點：
1. 使元素在一行顯示
2. 浮動元素會脫離文檔流 導致下面沒有浮動的元素識別不了它的高度和位置就會往上跑 占領浮動元素的位置（浮動元素下面的元素不能識別浮動元素的高度和位置）
3.浮動元素自動具有塊級元素的屬性（不需要加display:block;）
4. 元素都是float:left;? 左浮動 元素從左往右依次排列
? ? 元素都是float:right;? 右浮動? 元素從右往左依次排列
5. 浮動元素的子元素并不會繼承父元素浮動 如果子元素需要在一行顯示 則給每個子元素加浮動
6. 浮動屬性不能繼承
7. 所有元素都可以用浮動屬性
浮動元素的值：
?left（向左）? right（向右）? none(不浮動 正常的文檔流)? ?inherit(繼承父元素float的值)
浮動產生的影響（副作用）：
1. 父元素設置的背景顏色不起作用
2. 父元素設置內邊距屬性不會被撐開
3. 父元素設置的邊框屬性不會被撐開
如何清除浮動（解決浮動產生的影響）：
1. 給浮動元素的父元素添加一個height 屬性（不推薦）
2. 給浮動元素的父元素設置 overflow:hidden/auto
3. 在浮動元素的父元素結束標簽之前加一個具有塊級元素特點的標簽（一般是 div），給元素加一個clear:both? <div style="clear:both;"></div>
4. clearfix 清除浮動
[clear 清除浮動]
clear：both? ?不允許左右兩邊有浮動對象（清除左右兩邊浮動的影響）
clear：left? ? ? 不允許左邊有浮動對象（清除左邊浮動的影響）
clear：right? ? ? 不允許右邊有浮動對象（清除右邊浮動的影響）
clear：none? ? ? 允許兩邊有浮動對象? 默認值（不清除兩邊浮動的影響）
.clearfix { *zoom: 1 ;? /*css hack? 兼容IE7 瀏覽器? */}
思考題：overflow:hidden 和 visibility:hidden 有什么區別？
overflow:hidden; 讓超出的元素隱藏，在設置該屬性的時候根據你設置的寬高把多余的部分剪掉
?visibility:hidden 就是你看不到它的內容但是它內容所占據的空間還是存在的（看不見但摸得到）
什么叫文檔流
文檔流：（指的是元素排列方式）
正常文檔流：從左往右 從上往下
文檔流分兩個等級：行內元素 塊級元素
=》行內元素：從左往右
=》塊級元素：從上往下
需求：需要塊級元素（div）在一行顯示
脫離文檔流：元素的正常排列方式被打破
脫離文檔流的影響：1. float? 2. 定位
行內元素和塊級元素的區別？舉例說明
HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種
塊級元素：
? ? (1).塊級元素會獨占一行，從上到下依次排列 默認情況下寬度自動填滿其父元素寬度
? ? (2). 塊級元素可以設置寬高
? ? (3). 塊級元素可以設置margin，padding? ? ?display:block;
? ? (4) 自帶 display:block;
? ? (5)?p標簽里面不能嵌套任何塊級元素 本身也不能，可以嵌套行內元素
????常見塊級元素：div、h1~h6、center、hr、ul、ol、p、table、form、nav、footer、header、
figure figcaption、dl 、dd、dt、、menu、
行內元素（內聯元素）：
? ? (1).行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化
? ? (2).行內元素不識別寬高，寬高由內容大小決定
? ? (3). 行內元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效
? ? (4) 行內元素里不能嵌套塊級元素 a比較特殊
? ? (5) a標簽里面不能嵌套a標簽 瀏覽器會解析成并列
? ? 常見行內元素（內聯元素）：a、b、br、em、i、img、span、strong、sub、sup、button、mark、select、datalist、input、small、big、textarea、u、s、
行內塊狀元素特征：(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右
? ? 常見的有：img? 、input
使用display屬性能夠將三者任意轉換：
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
如何讓元素消失在我們的視野中？
1. 加透明度? opacity:0;? [0~1]
2. display:none;? 隱藏 盒子看不到 但是所占的大小依然存在
3. height:0 （width:0）和 overflow:hidden
4. line-height:0 和 overflow:hidden? （沒有設置高度的情況下）
5. visibility: hidden? 讓所有可見性的元素隱藏
6. margin/padding? 設置足夠大 只要消失即可
7. 利用旋轉transform? 設置足夠大 transform: translateY(-999999);
定位元素
絕對定位( position:absolute) ：
1. 四個方位可以設置（left right top bottom）
2. 絕對定位會脫離文檔流 不占位 導致后面的元素往前跑 占領它的位置
3. 絕對定位元素一定要有相對參照（直接父級元素） 如果父級元素沒有加相對參照物 它會一級一級往上查找 直到找到最外層的根元素html
4. 如果方位里同時有left和right? left有效 所以設置一個即可
? ? 同時又top和bottom top有效? ?設置一個即可
5. z-index越大 層級越高 越在上 z-index必須和定位元素（絕對 相對 固定）同時使用才有效果
6. 一個元素定在一個元素上或者兩個元素疊加的這種情況 可以使用定位實現
注意：絕對定位一定要有相對參照
? ? ? ? ? ?絕對定位一定要指明它定位的方向
7.相對參照物只要是定位元素就可（絕對定位 相對定位 固定定位） 優先選擇相對定位
=》絕對定位和固定定位都會脫離文檔流 不占位
相對定位 (position:relative)：
1. 相對定位不會脫離文檔流 占位 后面的元素不會往前跑?
2.?四個方位可以設置（left right top bottom）
????如果方位里同時有left和right? left有效 所以設置一個即可
? ? 同時又top和bottom top有效? ?設置一個即可
3. 參照物：自己本身
4.?z-index越大 層級越高 越在上 z-index必須和定位元素（絕對 相對 固定）同時使用才有效果
固定定位 (position: fixed)：
1.?會脫離文檔流
2.?四個方位可以設置（left right top bottom）
????如果方位里同時有left和right? left有效 所以設置一個即可
? ? 同時又top和bottom top有效? ?設置一個即可
3. 參照物：整個瀏覽器窗口
4. 可以設置?z-index? ??z-index越大 層級越高 越在上?
標簽語義化
標簽語義化：
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析（合理的標簽做合理的事情）
為何要遵循標簽語義化：
1.利于SEO優化 （也就是搜索引擎抓取 搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重）搜索引擎的爬蟲是讀不懂無語義的span和div的，因此語義化標簽能使爬蟲抓取更多的有效信息
2. 在樣式丟失的時候 還是可以比較好的呈現結構
3. 更好的支持各種終端 例如五張啊閱讀和有聲小說等
4. 利于團隊開發和維護 W3C定了一個標準 那我們就要遵循 這樣代碼的差異就會減小 在開發和維護的時候可以提高效率
怎樣遵循標簽語義化：
1. 盡量少使用無意義的標簽 例如span 和div
2. 盡量不使用標簽本身的css屬性，例如b、font、s等標簽 如果需要這些樣式 那么使用css樣式來添加
3. 在需要強調的部分 使用strong、em 但是樣式盡量使用css樣式描述
4. 表格搭建時 使用<thead>表格頭部</thead> <tbody>表格身體</tbody><tfoot>表格尾部</tfoot>
5. 列表搭建時 使用ul 無序列表 ol有序列表? dl定義列表
