選擇器
ID選擇器 #id
類選擇器 .class
標(biāo)簽選擇器 標(biāo)簽名 例 div
通配符選擇器 * 等同于body
可以代表所有元素 給所有元素設(shè)置公共樣式 通常用代碼初始化
群組選擇器
選擇器，選擇器，選擇器{}
后代選擇器
選擇器 選擇器{}
第一個(gè)選擇器是父代選擇器 第二個(gè)選擇器 是子孫標(biāo)簽
一個(gè)標(biāo)簽內(nèi)包含的所有指定的類標(biāo)簽
子代選擇器 選擇器 >選擇器 {}
選擇第一個(gè)選擇器的 直屬子標(biāo)簽 緊跟的屬于直屬
是一個(gè)標(biāo)簽的下一代指定類標(biāo)簽
選擇器的優(yōu)先級(jí)（可不是樣式的優(yōu)先級(jí)>
ID>CLASS>標(biāo)簽
在前端代碼規(guī)范中ID不能設(shè)置樣式
樣式編譯規(guī)則
優(yōu)先級(jí)！important>行間樣式>ID>class>標(biāo)簽
由上到下編譯 在后面寫的樣式會(huì)覆蓋前面的樣式
誰最精準(zhǔn) 誰生效
樣式的編寫方式
行間樣式
在內(nèi)部使用style屬性
在body里面寫
<div style="width:100px;></div>
內(nèi)部樣式
可以寫在<html></html>標(biāo)簽的任何地方
在前端規(guī)范中 一般寫在<head></head>標(biāo)簽中 <title></title>標(biāo)簽下面
外部樣式
創(chuàng)建一個(gè).css文件
然后通過<LINK rel="stylesheet" href="">標(biāo)題引入。html文件中
在href屬性里面設(shè)置.css文件的路徑
在前端代碼規(guī)范 一般寫在<head></head>標(biāo)簽中<title></title>標(biāo)簽下面
通常情況下css文件中寫的是那個(gè)那個(gè)頁面的樣式 命名是名字與該html文件的命名相同
style
在標(biāo)簽內(nèi)部寫（行間樣式） 叫屬性
單獨(dú)使用雙箭頭寫出來<style></style>叫標(biāo)簽 有一個(gè)特例 就是(!coptype)不屬于標(biāo)簽 。他說告訴網(wǎng)頁檔期那進(jìn)行的是什么版本
功能 聲明此為css代碼 需要用css代碼編譯規(guī)則
.css文件里面不用寫style .css文件本來就執(zhí)行css編譯規(guī)則
類如 index.html index.css
特點(diǎn)
一般情況不適用行間樣式 簡(jiǎn)化 HTML界面
當(dāng)代碼少于100行 可以使用內(nèi)部樣式
當(dāng)代碼大于100行 可以用外部樣式
命名規(guī)則
由字母數(shù)字下劃線組成
不能使用中文 （不管是文件夾還是文件）
必須以字母開頭 不能以數(shù)字或者下劃線開頭
見名知義 看見名字 就知道是哪個(gè)模塊
地中海命名 .text_top 中間用下劃線鏈接
駝峰命名 .textTop 后一個(gè)單詞首字母大寫
對(duì)于項(xiàng)目來說
所有圖片都必須在image/img/images文件夾里面
一個(gè)項(xiàng)目的首頁的相關(guān)文件 必須用index 來命名
index.heml index.css index.js
屬性選擇器
- ：first-chid 選擇每一個(gè)父元素第一個(gè)子元素的指定元素 p標(biāo)簽
:first-of-type 選擇器匹配元素其父級(jí)是特定類型的第一個(gè)子元素。
提示: 和 :nth-of-type(1) 是一個(gè)意思。
：first-of-type 選擇每一個(gè)父元素下面的 第一個(gè)指定元素 必須是p標(biāo)簽
：list-chid 選擇每一個(gè)作為父元素 最后一個(gè)子元素 的指定標(biāo)簽
last-child
：list-of-type 選擇每一個(gè)父元素的指定標(biāo)簽
：not（selector）選擇指定標(biāo)簽的標(biāo)簽 p
：nth-child（n） 選擇每一個(gè)父元素下面的 第n個(gè)子元素的目標(biāo)元素
：nth-last-child 選擇每一個(gè)父元素下面 倒數(shù)第n個(gè) 子元素 的目標(biāo)元素
nth-last-of-type(n) 選擇每一個(gè)父元素下面的 倒數(shù)第n個(gè) 目標(biāo)元素
nth--of-type(n) 選擇每一個(gè)父元素下面的 第n個(gè) 目標(biāo)元素
什么是浮動(dòng)？
float none 元素不浮動(dòng)
float left 元素向左浮動(dòng)
float right 元素向右浮動(dòng)
float both 整體浮動(dòng)
浮動(dòng)特性（浮動(dòng)的元素會(huì)脫離文檔流也就是脫標(biāo)）
脫離標(biāo)準(zhǔn)普通流的控制（浮）移動(dòng)到指定位置（動(dòng)）俗稱脫標(biāo)
浮動(dòng)的盒子不會(huì)保留原先的位置其他標(biāo)準(zhǔn)流會(huì)占用之前的位置
浮動(dòng)的元素會(huì)一行顯示并且元素頂部對(duì)齊
浮動(dòng)的元素具有行內(nèi)塊的元素的特性
浮動(dòng)的盒子是沒有間隙的 他是緊挨在一起的
如果塊級(jí)元素沒有設(shè)置寬度默認(rèn)和父級(jí)一樣寬 添加浮動(dòng)后和 大小根據(jù)內(nèi)容決定
浮動(dòng)布局注意點(diǎn)
1浮動(dòng)和標(biāo)準(zhǔn)流的父盒子搭配
先用標(biāo)準(zhǔn)流的父盒子排列上下位置 之后內(nèi)部子元素采取浮動(dòng)排列左右位置
2.一個(gè)元素浮動(dòng)了 理論上其余的兄弟元素也要浮動(dòng)
一個(gè)盒子里面有多個(gè)子盒子 如果其中一個(gè)盒子浮動(dòng)了 那么其余兄弟也應(yīng)該浮動(dòng) 防止出現(xiàn)問題
浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流不會(huì)影響前面的標(biāo)準(zhǔn)流
1。清除浮動(dòng)的原因
由于父盒子在很多情況下 不方便給高度 由于子盒子浮動(dòng)不占有位置 導(dǎo)致父盒子高度為0 導(dǎo)致下面 的標(biāo)準(zhǔn)流受影響
清除浮動(dòng)的本質(zhì):主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0的問題。
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。
給其父元素設(shè)置一個(gè)高度
給父元素加上overflow：hidden 清楚浮動(dòng)帶來的效果
給父元素最后面添加一個(gè)塊標(biāo)簽設(shè)置css clear:both; 給父元素設(shè)置一個(gè)div塊標(biāo)簽 給父元素最后寫 <div clean:both></div>
通常會(huì)在代碼初始化的時(shí)候?qū)懮弦粋€(gè).clear{clear：both；} 只針對(duì)塊元素
position 定位 一個(gè)元素蓋在一個(gè)元素可用定位
* 相對(duì)定位 relative
* 不會(huì)脫離文檔流
* 不管你怎么設(shè)置位置 他原先所占的位置 一直都在
* 如果給元素設(shè)置margin的時(shí)候 依舊會(huì)影響正常文檔流的排列
* 只想對(duì)其本身做移動(dòng) 不影響其他元素 但是元素設(shè)置margin會(huì)影響
* 絕對(duì)定位 absolute
* 會(huì)脫離文檔流
* 誰有relative 誰就是參考點(diǎn) 向上查找 如果其父元素 設(shè)置了相對(duì)定位 則其父元素為參照物 如何沒有 不斷向上查找 知道找到其設(shè)置相對(duì)定位的祖先元素 如果祖先元素沒有 則以body為參照物
* 不能以祖先元素的兄弟元素參照我 必須是直系祖先元素
* 如果不止一個(gè)祖先元素設(shè)置了相對(duì)定位那么就以最近的元素為參照物
* fixed 固定定位
* 會(huì)脫離文檔流
* 直接以窗口為參照物
* 不管窗口 怎么滾 他都是以固定的位置存在
