CSS基礎(chǔ)
1、css引入方式
1、外部樣式表，把CSS樣式代碼寫在獨(dú)立的一個(gè)文件中擴(kuò)展名：CSS文件名.CSS
引入外部文件：<link href="XX.css"rel="stylesheet"type="text/css"/><link>要放在<head>標(biāo)簽之間
2、CSS導(dǎo)入式
@import "css.css" @import url(css.css);
2、CSS使用方法的優(yōu)先級(jí)
優(yōu)先級(jí)
行內(nèi)樣式＞內(nèi)部樣式＞外部樣式
說明：
1.鏈入外部樣式與內(nèi)部樣式表之間的優(yōu)先級(jí)取決于所處位置的先后
2.最后定義的優(yōu)先級(jí)最高（就近原則）
CSS選擇器
1、標(biāo)簽選擇器
以HTML標(biāo)簽作為選擇器：如，p{color:red;font-size:30px;}
2、類選擇器
1、為HTML標(biāo)簽添加class屬性：（在開始標(biāo)簽添加）
<h1 class="special">內(nèi)容</h1>
2、通過類選擇器來為具有此class屬性的元素設(shè)置css樣式，如：.special{color:red;}
注意：
- 可對(duì)不同類型元素的同一個(gè)名稱的類選擇器設(shè)置不同的樣式規(guī)則,如：p.special{font-size:30px;}（在類選擇器前面加上標(biāo)簽名就可以，這樣只有設(shè)置了class為special的p標(biāo)簽才會(huì)生效）
- 同一元素可以設(shè)置多個(gè)類，之間用空格隔開如：<p class="special special1>內(nèi)容</p>
3、id選擇器
為HTML標(biāo)簽添加ID屬性：如
<p id="p1">內(nèi)容1</p>
<p id="p2">內(nèi)容2</p>
通過ID選擇器來為具有此ID的元素設(shè)置CSS規(guī)則：
#p1{color:red;}
#p2{color:blue;}
ID選擇器與類選擇器區(qū)別：(class是點(diǎn)，id是#)
- 1.id不能像class元素添加在多種元素上面，因?yàn)閕d是唯一的
- 2.同一種元素一般不能引用多種id的樣式；除有一些瀏覽器可以，就算可以也會(huì)影響到以后其他功能的識(shí)別
- 3.同一個(gè)文件下面，每一個(gè)id是唯一的
4、群組選擇器與全局選擇器
- 群組選擇器可以設(shè)置同一個(gè)樣式（標(biāo)簽選擇器（h1），ID選擇器（#h1），類選擇（.h1）器）注意：class和id的名字是區(qū)分大小寫的如寫錯(cuò)會(huì)顯示不出來效果
p.special,#three,p,h1,h2{color:red:} - 全局選擇器：給所有標(biāo)簽設(shè)置樣式
*{ 屬性:值; 屬性:值; 屬性:值; 屬性:值; }
5、后代選擇器
即通過標(biāo)簽的父子關(guān)系對(duì)標(biāo)簽設(shè)置樣式，如：
```
p a em{ ...} //代表p標(biāo)簽中包含a標(biāo)簽中的em標(biāo)簽所使用的樣式
#p1 em{...} //代表id為p1的標(biāo)簽中的em標(biāo)簽所使用的樣式
p.red a em{...} //代表class為red的p標(biāo)簽中的a標(biāo)簽中的em標(biāo)簽所使用的樣式
```
5、偽類選擇器
定義標(biāo)簽不同狀態(tài)下顯示不同的樣式，舉個(gè)栗子：
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}/* 選定的鏈接 */
注意：
a:hobver 必須置于a:link 和 a:visited之后，才有效- a:active 必須置于a:hover之后，才有效
- 偽類名稱對(duì)大小寫不敏感
偽類順序：link > visted > hover > active
偽類選擇器就很多了，常見的就是這些：
:first-child選擇某個(gè)元素的第一個(gè)子元素；
:last-child選擇某個(gè)元素的最后一個(gè)子元素；
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素；
:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最后一個(gè)開始計(jì)算；
:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素；
:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素；
:only-child選擇的元素是它的父元素的唯一一個(gè)了元素；
:only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素；
:empty選擇的元素里面沒有任何內(nèi)容。
CSS繼承與層疊、優(yōu)先級(jí)
1、繼承
繼承的好處：父元素設(shè)置樣式，子元素可以繼承（部分?。傩裕瑴p少CSS代碼
- IE6以下版本border不會(huì)繼承body的屬性，所以用群組的方式進(jìn)行相應(yīng)的樣式設(shè)置
- 瀏覽器默認(rèn)字體為：16px（2em）
- 當(dāng)上級(jí)元素定義了樣式與元素本身默認(rèn)的樣式?jīng)_突時(shí)，這時(shí)它將忽略繼承得來的樣式即若設(shè)定body為12px而h1默認(rèn)為2em（16）則樣式?jīng)_突而h1變?yōu)?4px
2、CSS層疊：
- 同一個(gè)元素可以定義多個(gè)樣式
- 若元素不沖突時(shí)（不存在兩個(gè)相同屬性的不同值時(shí)），多個(gè)樣式可以層疊為一個(gè)（葫蘆娃合體葫蘆小金剛）
- 元素沖突時(shí)（存在兩個(gè)相同屬性的不同值時(shí)）就按就近原則來應(yīng)用
3、CSS優(yōu)先級(jí)
- id選擇器>class選擇器>標(biāo)簽選擇器
- 相同類型定義時(shí)，就近原則
css權(quán)值
同一樣式表中:
1.權(quán)值相同（就近原則）；
2.權(quán)值不同（哪種權(quán)值高，就使用哪種）
- 選擇器權(quán)值：
標(biāo)簽選擇器：權(quán)值為1
類選擇器和偽類：權(quán)值為10
ID選擇器：權(quán)值為100
通配符選擇器：權(quán)值為0
行內(nèi)樣式：權(quán)值為1000
- 權(quán)值規(guī)則
統(tǒng)計(jì)不同選擇器個(gè)數(shù)
選擇器個(gè)數(shù)乘以相應(yīng)權(quán)值
相加所有值得最終權(quán)值。
eg: b{color:purple}// 1個(gè)
p b{color:yellow} //2個(gè)，此權(quán)值高
CSS優(yōu)先級(jí)總結(jié)
- !important一定條件下優(yōu)先級(jí)最高。
- css總樣式的優(yōu)先級(jí)：行內(nèi)>內(nèi)部樣式>外部樣式，
link鏈入式和style內(nèi)部樣式優(yōu)先級(jí)取決于先后順序。 - 樣式表中優(yōu)先級(jí)：id>class>標(biāo)簽>通配符，當(dāng)權(quán)值不同根據(jù)權(quán)值計(jì)算總的權(quán)值比較，權(quán)值相同就近原則
CSS命名規(guī)范
CSS樣式命名
1.采用英文字母、數(shù)字以及“-”和"_"
2.只能以小寫字母開頭。
3.命名形式：?jiǎn)巫?，連字符 -，下劃線 _和駝峰 eg:mainTitle
4.使用有意義的命名常用CSS樣式命名
1.頁面結(jié)構(gòu)
頁頭：header 導(dǎo)航：nav
頁面主體：main 頁尾：footer
內(nèi)容：content/container 容器：container
側(cè)欄：sidebar 欄目：column
頁面外圍控制：wrapper 左右中：left right center
2.導(dǎo)航
導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar
菜單：menu 子菜單：submenu 標(biāo)題:title
摘要：summary
3.功能
標(biāo)志：logo 廣告：banner 登錄：login
登錄條：loginbar 注冊(cè)：register
搜索：search 功能區(qū)：shop 標(biāo)題：title
注：id不要濫用，后期JS要用id對(duì)文檔操作，謹(jǐn)慎使用，適當(dāng)用class
CSS文本樣式
1、字體樣式
字體屬性
字體：font-family、文字大?。篺ont-size、文字顏色：color、文字粗細(xì)：font-weight、文字樣式：font-style
font-family屬性（具體字體名、字體集）："字體1",“字體2”...
注意：含空格字體名和中文,用英文引號(hào)(")括起，多個(gè)字體用英文","隔開，引號(hào)嵌套，外使用雙引號(hào)，內(nèi)使用單引號(hào) 。說人話（style="family:'宋體'"）
設(shè)置多個(gè)字體的好處是，瀏覽器依次查找如果沒有就會(huì)使用自帶的默認(rèn)樣式
字體集：Serif（會(huì)在字體尾部添加一下裝飾線）、Sans-serif（沒有裝飾線）、Monospace、Cursive、Fantasy
字體大小
font-size文字大?。憾x元素內(nèi)文字大小，語法：font-size：絕對(duì)單位|相對(duì)單位
- 絕對(duì)單位：任何分辨率下顯示的都是絕對(duì)的大小，不會(huì)改變 in英寸、cm厘米、mm毫米、pt磅、pc
1英寸=2.54厘米，1厘米=0.394英寸，1毫米=0.1厘米，72磅=1英寸，1pc=12pt - 當(dāng)不設(shè)置字體大小時(shí)，默認(rèn)為瀏覽器默認(rèn)值。
xx-small（9px）x-small（11px）small（13px）medium（16px）large（19px）x-large（23px）xx-large（28px） - 相對(duì)單位：px像素 、em/% 、langer、smaller
em/% 、langer、smaller，都是針對(duì)父元素
px單位值受顯示器分辨率影響（在手機(jī)端設(shè)置大小時(shí)，一般不使用px）
字體顏色
語法 color:具體顏色名稱/RGB值/16進(jìn)制
如：color:blue color:rgb(255,255,0) color:rgb(100%,100%,0%) color:#f2f2f2 (0-f) #008822=#082
可以通過查找“網(wǎng)頁的安全色“ 查找相應(yīng)的顏色值
字體樣式
font-weight加粗。normal,bold,bloder,lighter
粗細(xì)值位100~900一個(gè)閾值，因?yàn)榧哟质茏煮w限制，100~600幾乎相同，700~900幾乎相同，所以在開發(fā)過程中一般用normal、bold，其中normal相當(dāng)于400粗細(xì)值，bold相當(dāng)于700粗細(xì)值.
html中斜體是em、i
font-style文字格式。normal、italic斜體、oblique傾斜。
font-variant字體變形(針對(duì)英文，設(shè)置為小型大寫字母)。normal、small-caps小型大寫字母。
字體屬性總結(jié)
font屬性系列簡(jiǎn)寫，順序，空格分開是重點(diǎn)
font：font-style font-variant font-weight font-size/font-height font-family。這個(gè)順序很重要
注意：
- 1、同時(shí)設(shè)置font-size和font-family，屬性才會(huì)起作用且必須先size再是family 。
- 2、style variant weight可以打亂順序
- 3、style variant weight必須寫在size前面
- 4、height是行高，必須和size寫在一起用分號(hào)隔開
總結(jié)：font屬性簡(jiǎn)寫的話，每個(gè)屬性值之間用空格隔開，書寫順序是：font-style font-variant font-weight font-size font-family，如果font-family的值有多個(gè)時(shí)，值用逗號(hào)分開。
2、文本樣式
文本對(duì)齊方式
- text-align,設(shè)置元素內(nèi)文本的水平對(duì)齊方式，四種對(duì)齊方式left,right,center,justify（兩端對(duì)齊）。
- 該屬性只對(duì)塊級(jí)元素設(shè)置有效；不同瀏覽器會(huì)對(duì)元素有不同的展示效果。
p{width:50%;margin:0 auto;} 設(shè)置瀏覽器一致顯示居中,（上下為0） auto（左右自動(dòng)）
行高
為了大段文字便于閱讀（line-height:長(zhǎng)度值|百分比）
注意：
- 1.當(dāng)行高為固定值px，且小于字體大小 (font-size>line-height) 時(shí)，行與行之間會(huì)發(fā)生重疊的現(xiàn)象
- 2.當(dāng)字體發(fā)生什么變化，行高也隨之發(fā)生變化時(shí)，不能用px單位，而是要用em或者%；因?yàn)閑m和%與字體大小有關(guān)系。如：
·當(dāng)font-size：20px，line-height：1.3em時(shí)，行高=201.3=26px
·當(dāng)font-size：20px，line-height：120%時(shí)，行高=20120%=24px - 3.在開發(fā)過程中，一般使用em單位來定義
- 4.瀏覽器有默認(rèn)行高，不同瀏覽器默認(rèn)行高不一樣（一般行高默認(rèn)為字體的120%）
- 5.line-height的屬性是可以繼承的。
·繼承的是計(jì)算后的值，不是直接把em或%的值繼承過來
vertical-align屬性
作用：設(shè)置元素內(nèi)容的垂直方式，垂直方式的屬性只對(duì)行內(nèi)元素和單元格有效，對(duì)塊級(jí)元素不生效
屬性有：baseline（默認(rèn)對(duì)齊）、sub（下標(biāo)對(duì)齊）、super（上標(biāo)對(duì)齊）、top（頂線對(duì)齊）、text-top（文本頂端對(duì)齊）、middle（中線對(duì)齊）、bottom（底線對(duì)齊）、text-bottom（文本底線對(duì)齊）。
- 垂直對(duì)齊方式的屬性只對(duì)行內(nèi)元素有效。如span、p標(biāo)簽等
- vertical-align：-15px（向下移）、15px（向上移）、100%向上移
- 單行文本想要垂直居中則將line-height與高度值相同
- 多行垂直居中，因?yàn)榇怪本又袑傩灾荒茏饔糜谛袃?nèi)元素和單元格元素，所以，先將塊級(jí)元素轉(zhuǎn)換為單元格，要知道這個(gè)思路！??！
1.素轉(zhuǎn)為單元格元素 添加display:table-cell
2將父元素也設(shè)置為表格 即添加樣式 display:table
3現(xiàn)在才能用用垂直居中 vertical-align:middle
3、文本其他樣式
line-height:行高
text-indent:25px首行縮進(jìn)
文本樣式屬性
word-spacing：元素內(nèi)單詞之間的間距
letter-spacing：元素內(nèi)字母之間間距
text-transform：capitalize：首字母大寫，uppercase：轉(zhuǎn)成大寫，lowercase：轉(zhuǎn)成小寫，none：無
text-decoration：underline：下劃線，overline： 上劃線，line-through：貫穿線（刪除線） ，blink：閃爍效果（有兼容性問題） ，none：
text-decoration不可以被繼承，這個(gè)屬性允許對(duì)文本設(shè)置某種效果，如加下劃線。如果后代元素沒有自己的裝飾，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中
CSS 盒子模型
CSS盒子模型介紹
CSS模型屬性介紹
1、寬度
寬度屬性(width寬度，max-width最大寬度，min-width最小寬度)：是設(shè)置內(nèi)容的寬度，不是元素的寬度
width:長(zhǎng)度值(in、cm、px)|百分比|auto(自動(dòng));
max-width:長(zhǎng)度值(in、cm、px)|百分比|auto(自動(dòng));
min-width:長(zhǎng)度值(in、cm、px)|百分比|auto(自動(dòng));
- 1當(dāng)設(shè)置了width、max-width或min-width（根據(jù)繼承的樣式與我們?cè)O(shè)置的樣式是否沖突來選擇要實(shí)現(xiàn)的樣式）。max-width、min-width為寬度的界限，若width未超過界限則顯示width,超過max,顯示max.低于min,顯示min.
- 2.max-width和min-width有兼容性問題，IE6及以下只能識(shí)別width的值。
- 3，同時(shí)設(shè)置max和min時(shí)，width超過max，顯示max；低于min，顯示min。若設(shè)置的max低于min,顯示min。
- 4.%是針對(duì)于父元素寬度來設(shè)置當(dāng)前元素的寬度的。
2、高度屬性設(shè)置
高度屬性(使用方法，同寬度屬性width基本一致)
高度：height: 長(zhǎng)度值/百分比/auto
最大高度：max-height:長(zhǎng)度值/百分比/auto
最小高度：min-height:長(zhǎng)度值/百分比/auto
注：
- 1.min與max的高度與寬度設(shè)置在IE6及以下不兼容 ，無法實(shí)現(xiàn)。
- 2.float屬性（浮動(dòng)屬性）
例：.p{float：left}——應(yīng)用這個(gè)樣式的p標(biāo)簽的內(nèi)容都在同一行顯示，沒有換行顯示。 - 3.設(shè)置塊級(jí)元素和替換元素的內(nèi)容高度（一般內(nèi)容的高度相當(dāng)于元素（容器）的高度，因塊級(jí)元素，占一整行，默認(rèn)（設(shè)置）其他邊框、邊距都為0px。）
- 4.height與line-height的區(qū)別：height是整個(gè)內(nèi)容（可有多行）的高度（也就是規(guī)定一個(gè)容器有多高的內(nèi)容），line-height只是一行的高度（是文本實(shí)際高度，所以會(huì)出現(xiàn)文本高度line-height超出我們規(guī)定的高度height）
- 5.%是針對(duì)于父元素高度來設(shè)置當(dāng)前元素的高度的。
3、border邊框?qū)傩?(針對(duì)元素的邊框)
- 1.邊框?qū)挾龋╞order-width），格式如下：
border-width:thin（窄或薄）|medium（中等）|thick（厚）|長(zhǎng)度值(px,em); - 2.邊框顏色（border-color），格式如下：
border-color:顏色（三種方式）|transparent（透明）; - 3.邊框樣式（border-style），格式如下：border-style:值;
值有：none（定義無邊框，默認(rèn)值），hidden（與none相同，除非在表格元素中解決邊框沖突時(shí)），dotted（定義點(diǎn)狀邊框，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)現(xiàn)），dashed（定義虛線，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線），solid（定義實(shí)線），double（定義雙線），groove（定義3D凹槽邊框），ridge（定義3D壟狀邊框），inset（定義3D inset邊框），outset（定義3D outset邊框），inherit（規(guī)定應(yīng)該從父元素繼承邊框樣式）。
4、padding 屬性
定義：設(shè)置元素的內(nèi)容與邊框之間的距離（內(nèi)邊距或填充）。分4個(gè)方向（上、右、下、左）格式為：
padding-top:長(zhǎng)度值（px）|百分比;
padding-right:長(zhǎng)度值|百分比;
padding-bottom:長(zhǎng)度值|百分比;
padding-left:長(zhǎng)度值|百分比;
說明：
- 1.值不能為負(fù)值
- 2.盒子在網(wǎng)頁中占的空間，不單單與width和height屬性有關(guān)，還與padding屬性有關(guān)。
- padding屬性縮寫，格式如下：
padding:值1;——4個(gè)方向都為值1
padding:值1 值2;——上下=值1，左右=值2
padding:值1 值2 值3;——上=值1，左右=值2，下=值3
padding:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（值與值之間用空格隔開。padding屬性有4個(gè)值時(shí)，按照順時(shí)針來排列，即上、右、下、左）
具體例：padding:10px 5px 8px 20px;
5、margin屬性
定義:設(shè)置元素與元素之間的距離（外邊距，也可理解為4個(gè)方向的邊框延伸出去的距離）
- 1.4個(gè)方向（上、右、下、左），格式如下：
margin-top:長(zhǎng)度值（px）|百分比|auto;
margin-right:長(zhǎng)度值（px）|百分比|auto;
margin-bottom:長(zhǎng)度值（px）|百分比|auto;
margin-left:長(zhǎng)度值（px）|百分比|auto;
值可以設(shè)置為負(fù)數(shù)
- 2.margin屬性的縮寫,格式如下：
margin:值1;——4個(gè)方向都為值1
margin:值1 值2;——上下=值1，左右=值2
margin:值1 值2 值3;——上=值1，左右=值2，下=值3
margin:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（從”上“開始順時(shí)針，值之間用空格隔開） - 3.默認(rèn)情況下，相應(yīng)的一些HTML塊級(jí)元素（body、h1～h6、p等）存在外邊距。在開發(fā)過程中，為了不受元素本身默認(rèn)的外邊距影響，在開發(fā)之前可以聲明margin屬性，覆蓋默認(rèn)樣式。格式：
body,h1,h2,h3,h4,h5,h6,p{margin:0;} - 4.margin值為auto時(shí)，實(shí)現(xiàn)水平方向居中（本元素相對(duì)于父元素而言）顯示效果，且由瀏覽器計(jì)算外邊距(格式為兩種：1.margin:0 auto; 2.margin:auto;)
- 5.垂直方向（水平方向也一樣），兩個(gè)相鄰元素都設(shè)置外邊距（一個(gè)元素的下外邊距，一個(gè)元素的上外邊距（這兩者一般設(shè)置為一樣）），外邊距會(huì)發(fā)生合并（兩個(gè)外邊距合并形成一個(gè)外邊距）。
即：合并后兩元素之間的距離=兩個(gè)發(fā)生合并的外邊距中的最大值
盒子模型計(jì)算
width(寬度)=左邊框（margin）+左內(nèi)邊距(padding)+內(nèi)容寬度+右內(nèi)邊距+右邊框
height(高度)=上邊框+上內(nèi)邊距+內(nèi)容高度+下內(nèi)邊距+下邊框
ie盒子模型
注：IE盒子模型與標(biāo)準(zhǔn)盒子模型的區(qū)別：width（寬度）和height（高度）所描述的對(duì)象不同。
IE盒子模型：（盒子是包含外邊距，邊框，內(nèi)邊距和內(nèi)容的）
注意：
- 1.不使用Doctype文檔類型聲明，各瀏覽器按照自己的方式解析。
- 2.如果有Doctype文檔類型聲明，按照標(biāo)準(zhǔn)盒子模型來解析。聲明方法
<!Doctype HTML>
盒子模型的應(yīng)該
1、display 屬性
display屬性：
- 1、inline：元素將顯示為內(nèi)聯(lián)元素，元素前后沒有換行符；
- 2、block：元素將顯示為塊級(jí)元素，元素前后會(huì)有換行符；
a、 將塊級(jí)元素設(shè)置為內(nèi)聯(lián)元素：display：inline；
b、 將內(nèi)聯(lián)元素設(shè)置為塊級(jí)元素：display：block；
注意：內(nèi)聯(lián)元素之間有縫隙，如何去除？
a、可能是標(biāo)簽之間有換行，那么寫代碼時(shí)不添加換行或者空格就行了；
b、去外層添加一個(gè)父元素，設(shè)置父元素的font-size：0px；然后子元素單獨(dú)設(shè)置font-size:16px;
c、行內(nèi)元素不具有寬高屬性，給其設(shè)置寬高不起作用，內(nèi)邊距起作用，外邊距上下不起作用； - 3、inline-block：行內(nèi)塊元素，元素呈現(xiàn)為inline，具有block相應(yīng)特性,
即display：inline-block；（可以設(shè)置寬高、內(nèi)邊距、外邊距屬性） - 4、display：none
實(shí)現(xiàn)子元素剛開始不顯示，當(dāng)鼠標(biāo)經(jīng)過父元素時(shí)顯示
在子元素內(nèi)設(shè)置：display：none；
在父元素內(nèi)設(shè)置： 父元素：hover 子元素{display：block}鼠標(biāo)經(jīng)過時(shí)塊狀顯示子元素
在父元素內(nèi)設(shè)置： 父元素：hover 子元素{display：inline}鼠標(biāo)經(jīng)過時(shí)行內(nèi)顯示子元素
補(bǔ)充：
html常用塊級(jí)元素：
p 、div、h1~h6、ul、ui、ol、dl、dt 、dd等
行內(nèi)元素： span/a/em/input/img
2、盒子模型應(yīng)用總結(jié)
盒子模型應(yīng)用-案例應(yīng)用：
- 1.為了不影響全局，我們首先要對(duì)body、p、div等某些元素的margin和padding值設(shè)置為0，字體統(tǒng)一設(shè)置為微軟雅黑，我們也可以直接用通配符。
- 2.設(shè)置頂部水平居中對(duì)齊，可用margin:0,auto;
- 3.先搭建html結(jié)構(gòu)，在寫css聲明，從外到內(nèi)，從大到小。
- 4.一個(gè)元素可以賦予多個(gè)選擇器，在同一個(gè)class中用空格隔開。
CSS 背景與列表
CSS背景
1、背景顏色 background-color
語法：backgroud-color:顏色|transparent（默認(rèn)值）
說明:
- 1.transparent（透明色）的作用
如果你不希望某個(gè)元素有背景顏色，同時(shí)又不希望用戶對(duì)瀏覽器的設(shè)置影響了你的設(shè)計(jì)，就有必要設(shè)置了。即透明色，其展現(xiàn)形式基本等于沒設(shè)置。 - 2.顏色值（顏色名|rgb|十六進(jìn)制）
- 3.背景區(qū)（背景顏色區(qū)域）包括內(nèi)容、內(nèi)邊距（padding）和邊框（border），不包括外邊距（margin）
注：邊框（border）的設(shè)置，不僅需要設(shè)置邊框?qū)挾?，還需要設(shè)置邊框樣式和邊框顏色。
- 如果沒有設(shè)置邊框樣式，則邊框顯示不出來；
- 邊框顏色會(huì)覆蓋掉背景顏色；
- 邊框顏色在沒有設(shè)置的時(shí)候是默認(rèn)和（內(nèi)容中）文本的顏色一樣的；——border:20px solid;
2、背景圖片
background-image語法：background-image:url(地址)|none;——（none無背景圖片）
說明：
- 1.url地址可以是相對(duì)地址也可以是絕對(duì)地址。
- 2.元素的背景圖片占據(jù)了元素的全部尺寸，包括內(nèi)容、內(nèi)邊距和邊框，但不包括外邊距。
- 3.默認(rèn)地，背景圖片位于元素的左上角，并在水平和垂直方向上重復(fù)（當(dāng)圖片大小無法充滿元素的全部尺寸時(shí)，元素的其余尺寸在水平和垂直方向上重復(fù)顯示該圖片，使圖片占據(jù)了元素的全部尺寸）。
注：
當(dāng)你既設(shè)置背景圖片又設(shè)置背景顏色的時(shí)候，背景圖片會(huì)覆蓋掉背景顏色（與兩者代碼前后順序無關(guān)，背景圖片都會(huì)覆蓋掉背景顏色）。開發(fā)過程中一般會(huì)同時(shí)設(shè)置背景圖片和背景顏色，以防圖片失效后還可以看到背景顏色。
2.1背景圖片重復(fù)屬性（background-repeat）；必須基于有背景圖片的情況下才是有效的。
設(shè)置元素的背景圖片的重復(fù)方式，格式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
具體例：background-repeat:no-repeat;
repeat：重復(fù)（默認(rèn)值）
no-repeat：不重復(fù)
repeat-x：水平重復(fù)
repeat-y：垂直重復(fù)（豎直方向重復(fù)）
2.2 背景圖片顯示方式
設(shè)置元素的背景圖片的顯示方式
background-attachment：scroll、fixed
說明：
scroll：默認(rèn)值，背景圖片隨滾動(dòng)條滾動(dòng)
fixed：當(dāng)頁面的其余部分滾動(dòng)時(shí)，背景圖片不會(huì)移動(dòng)
2.3 背景圖片定位
圖片定位background-position用于定位圖片有有以下值
百分比：（x% y%），注：只寫一個(gè)參數(shù)的話，第二個(gè)默認(rèn)為居中
具體數(shù)值：（x y），注只寫一個(gè)參數(shù)的話，第二個(gè)默認(rèn)為居中
top：頂部顯示，相當(dāng)于垂直方向（50% 0）
right：右邊顯示，相當(dāng)于（100% 50%）
bottom：底部顯示，相當(dāng)于（50% 100%）
left：左邊顯示，相當(dāng)于（0 50%）
center：中間顯示（50% 50%）
總結(jié)：
2.4 背景圖片設(shè)置縮寫
背景縮寫屬性（background）
background:background-color background-image background-repeat background-attachment background-position；
具體例：background:#000000 url(img/bg.png) no-repeat top fixed;
說明：
- 1.各值之間用空格分割，不分先后順序，可寫一個(gè)或多個(gè)值。
- 2.當(dāng)background-attachment 屬性是fixed的時(shí)候，也就是說，背景圖片不隨滾動(dòng)條滾動(dòng)的時(shí)候，那么background-position的值(百分比)，都是相對(duì)于整個(gè)頁面來說的，而不是背景圖片的容器來說的，比如，這個(gè)時(shí)候，我設(shè)置居中，就是在整個(gè)頁面的居中，如果這個(gè)時(shí)候，我attachment的屬性是scroll的話，那么居中，就是針對(duì)背景圖片的容器說的，
CSS列表樣式
1、列表項(xiàng)的標(biāo)記樣式類型
設(shè)置列表項(xiàng)的標(biāo)記樣式類型，語法：
list-style-type:關(guān)鍵字|none;——disc是默認(rèn)值，具體例：list-style-type:circle;list-style-type:lower-roman;
屬性值為：
- 1.無序列表
none（無標(biāo)記）、disc（實(shí)心的圓點(diǎn)）、circle（空心的圓點(diǎn)）、square（實(shí)心的方塊） - 2.有序列表
none（無標(biāo)記）、decimal（從1開始的整數(shù)）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）
注：css列表樣式（列表項(xiàng)標(biāo)記屬性）可以將ul設(shè)置成有序列表, 將ol設(shè)置成無序列表，或者將ul，ol設(shè)置成無標(biāo)記列表。列表項(xiàng)標(biāo)記屬性一般是作用在li標(biāo)簽（有標(biāo)記的標(biāo)簽）樣式上的
2、使用圖片來當(dāng)列表項(xiàng)標(biāo)記
設(shè)置語法：list-style-image: url(圖片鏈接)
3、列表項(xiàng)標(biāo)志位置設(shè)置
列表項(xiàng)標(biāo)記位置語法：
list-style-position：inside | outside 列表項(xiàng)標(biāo)記在list內(nèi)的顯示位置，基本屬性：
- 1.inside(標(biāo)記在文本內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊）
- 2.outside(默認(rèn)值，放置在文字外面，不包含標(biāo)記，第二行跟文本對(duì)齊）
4、列表屬性縮寫
列表樣式縮寫（list-style）——一般是使用在有標(biāo)記的標(biāo)簽（li）樣式上的。語法：list-style:list-style-type list-style-position list-style-image;具體例：list-style:square inside url(img/em.png); 說明：
- 1.值之間用空格分隔
- 2.值的順序不固定
- 3.list-style-image會(huì)覆蓋list-style-type的設(shè)置
浮動(dòng)
浮動(dòng)屬性介紹
1、基本概念
css float（浮動(dòng)）的基礎(chǔ)知識(shí)
- 1.浮動(dòng)會(huì)使元素向左或向右移動(dòng)，只能左右，不能上下。
- 2.浮動(dòng)元素碰到包含框或另一個(gè)浮動(dòng)框，浮動(dòng)停止。
- 3.浮動(dòng)元素之后的元素將圍繞它，之前的不受影響。
- 4.浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流。
浮動(dòng)清除：
語法 clear : none | left | right | both
清除浮動(dòng)常用的方法:
- .在浮動(dòng)元素后使用一個(gè)空元素。 例如：'<div class="clear></div> ';在.clear 里面設(shè)置 clear: both;
- 2.給浮動(dòng)元素的容器（父元素）添加 overflow( 溢出 ): hidden( 隱藏 );
- 3.使用CSS3 的 :after 偽元素 （主流方法）
/zoom: 1; / 觸發(fā) hasLayout屬性 兼容IE6、7 *
.clearfix:after{
content:'.'; //內(nèi)容為空
height:0;
display:block;
visibility:hidden;
clear:both;
}
浮動(dòng)應(yīng)用實(shí)例
/*重置代碼部分*/
*{
margin: 0;
padding: 0;
}
ul{list-style: none;}
a{text-decoration: none;}
/*當(dāng)前頁面樣式*/
.container{
width: 1200px; /*最外側(cè)框架，給它個(gè)固定寬度*/
margin: 0 auto; /*上下外邊距為0 左右居中*/
}
.header{
width: 1200px;
background: #ccc;
/*高由內(nèi)容撐起來*/
overflow: hidden; /*清除浮動(dòng)帶來的高度塌陷*/
zoom:1;/*使上面清除效果兼容IE*/
}
.header .logo{ /*這里的寬高就是logo的寬高*/
width: 200px;
height: 80px;
float: left;
/*logo位置太靠左，下面進(jìn)行微調(diào)*/
margin: 0 40px;/*可先給個(gè)大概的值看看效果，不好再改*/
}
.header .nav{
/*高由內(nèi)容撐起來*/
float: right;
overflow: hidden;/*清除浮動(dòng)*/
zoom:1;
/*導(dǎo)航太靠右，下面進(jìn)行微調(diào)*/
padding-right: 40px;
}
.header .nav li{
/*寬高由內(nèi)容撐起來*/
float: left;
margin-right:20px; /*導(dǎo)航之間加點(diǎn)間距*/
}
.header .nav li a{
/*寬度可由內(nèi)容撐起來*/
padding: 0 20px;
height: 80px;
line-height: 80px; /*垂直居中*/
display:block;/*轉(zhuǎn)成塊元素才能設(shè)置高度*/
font-size:16px;
font-family:"微軟雅黑";
color:#333;
}
.header .nav li a:hover{ /*鼠標(biāo)經(jīng)過導(dǎo)航的效果*/
color:#fff;
}
.main{
width: 1200px; /*和頭部同寬，高度由內(nèi)容撐起*/
overflow: hidden;/*清除浮動(dòng)問題*/
zoom:1;
}
.main .con{
width: 1000px;
height: 500px;
background: blue;
float: left;
}
.main .sidebar{
width: 200px; /*1200-1000*/
height: 500px;
background: orange;
float: left;
}
.footer{
width: 1200px;
height: 100px;
background: red;
}
/*以下僅為演示效果*/
.main,.footer{
font-size: 22px;
color:#fff;
}
body內(nèi)容：
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免費(fèi)課程</a></li>
<li><a href="#">職業(yè)路徑</a></li>
<li><a href="#">實(shí)戰(zhàn)</a></li>
<li><a href="#">猿問</a></li>
<li><a href="#">手記</a></li>
</ul>
</div>
<div class="main">
<div class="con">
content
</div>
<div class="sidebar">
sidebar
</div>
</div>
<div class="footer">
footer
</div>
</div>
CSS定位
position屬性詳情
- position屬性-static（靜態(tài)定位/常規(guī)定位/自然定位）
語法：position:static;
原理：使元素定位于常規(guī)/自然流中，參照物就是頁面內(nèi)的水平左右，垂直上下。
特點(diǎn)：
- 1.忽略top、bottom、left、right、Z-index聲明，強(qiáng)制元素回歸到正常的自然流。
- 2.兩個(gè)相鄰元素設(shè)置了margin，最終外邊距=兩者外邊距中最大的。
- 3.具有固定寬高的元素，把水平或者垂直邊距設(shè)為auto，會(huì)造成居中的效果。
2.position屬性relative
相對(duì)定位的元素不會(huì)離開自然流，也就是說用top/right/bottom/left/z-index進(jìn)行偏移后，這個(gè)元素原先所占的位置還留在那里，別的元素不會(huì)占掉那個(gè)位置。
而相對(duì)定位的相對(duì)是相對(duì)于元素本來在自然流中的位置所定位。
可以使浮動(dòng)元素進(jìn)行偏移，并控制其堆疊順序。
3.position屬性absolute
absolute絕對(duì)定位是可以將元素脫離 常規(guī)自然流的布局方式。absolute的幾個(gè)特點(diǎn)
- 3.1會(huì)使元素脫離常規(guī)自然流，這時(shí)候原布局不再保留脫離元素的空間，周圍元素的布局也會(huì)受到影響。
- 3.2當(dāng)設(shè)置元素偏移量偉百分比的時(shí)候，該元素會(huì)以最近的設(shè)置了relative的定位祖先元素為參照進(jìn)行偏移，當(dāng)文檔中找不到這樣的元素，那么就以body偉參照。
- 3.3聯(lián)合上一節(jié)的知識(shí)，設(shè)置為relative的元素，他的子元素可以以其為參照進(jìn)行布局。從課件上可以看出，如果想把元素設(shè)置在父元素的外部，那么可以設(shè)置負(fù)值將其布局到父元素的外邊，這種方法可以實(shí)現(xiàn)廣告掛接的效果，也就是局部定位。
- 3.4lrtb(上下左右)如果設(shè)置為0，當(dāng)元素沒設(shè)置寬和高，元素會(huì)對(duì)齊到最近定位祖先元素的各邊（填充父容器）；當(dāng)設(shè)置了寬和高，而且設(shè)置了margin屬性，那么元素將會(huì)針對(duì)margin方向值為auto的方向進(jìn)行居中對(duì)齊。
- 2.1.5當(dāng)lrtb都設(shè)置為auto，元素會(huì)回歸常規(guī)自然流。
- 2.1.6z-index可以實(shí)現(xiàn)元素的堆疊。
4.position:之fixed
跟absolute區(qū)別：
絕對(duì)定位absolute，相對(duì)于網(wǎng)頁而言，如果網(wǎng)頁過高，可以滾動(dòng)，那么絕對(duì)定位的元素也會(huì)跟著滾動(dòng)
固定定位fixed，相對(duì)于用戶視角而言，在可視化范圍內(nèi)固定，不隨著網(wǎng)頁滾動(dòng)而滾動(dòng)
position:fixed
5.sticky 磁貼定位（了解）
概念
說明：
- 1.要有一個(gè)定位矩形的概念，當(dāng)這個(gè)定位矩形完全捕獲到磁鐵元素，則磁鐵元素固定住
- 2.偏移標(biāo)尺是由最近祖先元素來決定
- 3.要注意其兼容性，因?yàn)槠鋵?shí)后起之秀
網(wǎng)頁布局
經(jīng)典行布局1
- 基礎(chǔ)行布局：寬（width）和高（height）設(shè)置具體的單位長(zhǎng)度（px）
- 行布局自適應(yīng)：設(shè)置最大的容器相對(duì)于瀏覽器（body）的百分比寬度
- 行布局自適應(yīng)限制最大寬：設(shè)置max-width，當(dāng)瀏覽器視口小于設(shè)置的最大寬度（max-width），內(nèi)容寬度則為設(shè)置的 百分?jǐn)?shù)，若大于設(shè)置的最大寬度；內(nèi)容寬度則是max-width的具體值。這時(shí)設(shè)置居中的話，就可以實(shí)現(xiàn)水平寬度的自適應(yīng)。（如{width: 100%;max-widrh:1000px;height:1000px;margin:0 auto;}）
- 行布局垂直水平居中
垂直水平居中方式，距離top偏移50%，距離left偏移50%，再讓上邊距margin-top和左邊距margin-left，分別向負(fù)方向偏移，元素高寬的一半。
.container{
width:800px;
height:200px;
background-color:#4c77f2;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-400px;
}
經(jīng)典行布局2
- 行布局固定寬：width:~px
- 行布局某部位自適應(yīng)：width:100%
- 行布局導(dǎo)航隨屏幕滾動(dòng)：position:fixed
經(jīng)典兩列布局
1.兩列布局固定：
①一個(gè)大div設(shè)置寬高固定值，包含兩個(gè)div
②兩個(gè)div寬度合計(jì)等于大div，高度分別等于大div
③兩個(gè)div分別進(jìn)行左右浮動(dòng)后會(huì)在一行
2.兩列布局自適應(yīng)：
將上述的寬度設(shè)置改為百分比即可
