行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。
，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。 行內(nèi)塊元素的特點(diǎn)：
（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會(huì)有空白縫隙。
（2）默認(rèn)寬度就是它本身內(nèi)容的寬度。
（3）高度，行高、外邊距以及內(nèi)邊距都可以控制。
標(biāo)簽顯示模式轉(zhuǎn)換 display
塊轉(zhuǎn)行內(nèi)：display:inline; 行內(nèi)轉(zhuǎn)塊：display:block; 塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;
CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范，是你專業(yè)化的開始。
空格規(guī)范
【強(qiáng)制】 選擇器 與 { 之間必須包含空格。 示例： .selector { } 【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。 示例： font-size: 12px;
選擇器規(guī)范
【強(qiáng)制】 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。 示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
【建議】 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)，位置靠后的限定條件應(yīng)盡可能精確。 示例：
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}
屬性規(guī)范
【強(qiáng)制】 屬性定義必須另起一行。 示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強(qiáng)制】 屬性定義后必須以分號(hào)結(jié)尾。 示例：
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
CSS 三大特性
層疊 繼承 優(yōu)先級(jí) 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性。
CSS層疊性
個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉 比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。 一般情況下，如果出現(xiàn)樣式?jīng)_突，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)。
-
樣式?jīng)_突，遵循的原則是就近原則。 那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式。
-
樣式不沖突，不會(huì)層疊
CSS繼承性
所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。 簡(jiǎn)單的理解就是： 子承父業(yè)。 注意：恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
CSS優(yōu)先級(jí)
定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。 在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下： 繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。 行內(nèi)樣式優(yōu)先。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100?？傊?，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。 權(quán)重相同時(shí)，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最大。 CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。
CSS的特性
總結(jié)優(yōu)先級(jí)：
-
使用了 !important聲明的規(guī)則。
-
內(nèi)嵌在 HTML 元素的 style屬性里面的聲明。
-
使用了 ID 選擇器的規(guī)則。
-
使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規(guī)則。
-
使用了元素選擇器的規(guī)則。
-
只包含一個(gè)通用選擇器的規(guī)則。
-
同一類選擇器則遵循就近原則。
總結(jié)：權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)
CSS 背景(background)
CSS 可以添加背景顏色和背景圖片，以及來進(jìn)行圖片設(shè)置。
背景圖片(image)
語法：
background-image : none | url (url)
參數(shù)：
none : 無背景圖（默認(rèn)的）
url : 使用絕對(duì)或相對(duì)地址指定背景圖像
background-image 屬性允許指定一個(gè)圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復(fù)地話，圖片覆蓋不到地地方都會(huì)被背景色填充。 如果有背景圖片平鋪，則會(huì)覆蓋背景顏色。 小技巧： 我們提倡 背景圖片后面的地址，url不要加引號(hào)。
背景平鋪（repeat）
語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數(shù)：
repeat : 背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
設(shè)置背景圖片時(shí)，默認(rèn)把圖片在水平和垂直方向平鋪以鋪滿整個(gè)元素。
repeat-x : 背景圖像在橫向上平鋪
repeat-y : 背景圖像在縱向平鋪
背景位置(position)
語法：
background-position : length || length
background-position : position || position
參數(shù)：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。請(qǐng)參閱長度單位
position : top | center | bottom | left | center | right 說明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)。
如果只指定了一個(gè)值，該值將用于橫坐標(biāo)。縱坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。 注意：
-
position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。
-
如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前，y坐標(biāo)后面。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)。
實(shí)際工作用的最多的，就是背景圖片居中對(duì)齊了。
背景附著
語法：
background-attachment : scroll | fixed
參數(shù)：
scroll : 背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
fixed : 背景圖像固定
說明：
設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。
背景簡(jiǎn)寫
background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫： background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
背景透明(CSS3)
CSS3支持背景半透明的寫法語法格式是:
background: rgba(0,0,0,0.3);
最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。
導(dǎo)航欄案例
使用技巧
：在一行內(nèi)的盒子內(nèi)，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中。
專區(qū)說明
申請(qǐng)資格
兌換獎(jiǎng)勵(lì)
下載游戲
盒子模型（CSS重點(diǎn)）
其實(shí)，CSS就三個(gè)大模塊： 盒子模型 、 浮動(dòng) 、 定位，其余的都是細(xì)節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。 所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。 看透網(wǎng)頁布局的本質(zhì)
把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。
盒子模型（Box Model）
盒子邊框（border）
邊框就是那層皮。橘子皮、柚子皮、橙子皮。 語法：
border : border-width || border-style || border-color
邊框?qū)傩浴O(shè)置邊框樣式（border-style）
邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：
none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
solid：邊框?yàn)閱螌?shí)線(最為常用的)
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線
盒子邊框?qū)懛偨Y(jié)表
表格的細(xì)線邊框
以前學(xué)過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。 table{ border-collapse:collapse; } collapse 單詞是合并的意思 border-collapse:collapse; 表示邊框合并在一起。
圓角邊框(CSS3)
從此以后，我們的世界不只有矩形。radius 半徑（距離） 語法格式：
border-radius: 左上角 右上角 右下角 左下角;
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。 padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
外邊距（margin）
margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。 margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內(nèi)邊距相同。 外邊距實(shí)現(xiàn)盒子居中
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：
-
必須是塊級(jí)元素。
-
盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區(qū)別
-
文字水平居中是 text-align: center
-
盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
-
插入圖片 我們用的最多 比如產(chǎn)品展示類
-
背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的默認(rèn)內(nèi)外邊距
為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內(nèi)元素是只有左右外邊距的，是沒有上下外邊距的。 內(nèi)邊距，在ie6等低版本瀏覽器也會(huì)有問題。
我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。
content寬度和高度
使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。
width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。
大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：
/*外盒尺寸計(jì)算（元素空間尺寸）*/
Element空間高度 = content height + padding + border + margin
Element 空間寬度 = content width + padding + border + margin
/*內(nèi)盒尺寸計(jì)算（元素實(shí)際大?。?/
Element Height = content height + padding + border （Height為內(nèi)容高度）
Element Width = content width + padding + border （Width為內(nèi)容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。
2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。
3、如果一個(gè)盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。
盒子模型布局穩(wěn)定性
開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？ 答案是： 其實(shí)他們大部分情況下是可以混用的。 就是說，你用內(nèi)邊距也可以，用外邊距也可以。 你覺得哪個(gè)方便，就用哪個(gè)。 但是，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下： 按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。
width > padding > margin
原因：
-
margin 會(huì)有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
-
padding 會(huì)影響盒子大小， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用。
-
width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。
盒子陰影
語法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；
-
前兩個(gè)屬性是必須寫的。其余的可以省略。
-
外陰影 (outset) 但是不能寫 默認(rèn) 想要內(nèi)陰影 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大?。?nbsp;陰影顏色 內(nèi)/外陰影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
浮動(dòng)(float)
前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？ CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。
什么是浮動(dòng)？
元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過程。 在CSS中，通過float屬性來定義浮動(dòng)，其基本語法格式如下：
選擇器{float:屬性值;}
布局流程
為了提高網(wǎng)頁制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下： 1、確定頁面的版心（可視區(qū)）。
2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。
3、制作HTML結(jié)構(gòu) 。
4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。
一列固定寬度且居中
最普通的，最為常用的結(jié)構(gòu)
清除浮動(dòng)的方法
其實(shí)本質(zhì)叫做閉合浮動(dòng)更好一些, 記住，清除浮動(dòng)就是把浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。 在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：
選擇器{clear:屬性值;}
定位(position)
元素的定位屬性主要包括定位模式和邊偏移兩部分
1、邊偏移 也就說，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
絕對(duì)定位
當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。
四種定位總結(jié)
CSS高級(jí)技巧
所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的鼠標(biāo)樣式， 表單輪廓等。但是比如滾動(dòng)條的樣式改動(dòng)受到了很多瀏覽器的抵制，因此我們就放棄了。 防止表單域拖拽
鼠標(biāo)樣式cursor
設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。
cursor : default 小白 | pointer 小手 | move 移動(dòng) | text 文本
鼠標(biāo)放我身上查看效果哦：
我是小白
我是小手
我是移動(dòng)
我是文本
盡量不要用hand 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用
輪廓 outline
是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的。 最直接的寫法是 ： outline: 0; 或者 outline: none;
防止拖拽文本域resize
resize：none 這個(gè)單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動(dòng) 文本域。 右下角可以拖拽： 右下角不可以拖拽：
以前我們講過讓帶有寬度的塊級(jí)元素居中對(duì)齊，是margin: 0 auto; 以前我們還講過讓文字居中對(duì)齊，是 text-align: center;
字體設(shè)計(jì)推薦網(wǎng)站
http://icomoon.io
icomoon字庫 IcoMoon成立于2011年，推出的第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。 內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。 推薦網(wǎng)站：
http://www.iconfont.cn/
阿里icon font字庫 http://www.iconfont.cn/
這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫?？梢允褂肁I制作圖標(biāo)上傳生成。 一個(gè)字，免費(fèi)，免費(fèi)??！
當(dāng)前標(biāo)題：前端基礎(chǔ)入門二（CSS）
鏈接地址：http://weahome.cn/article/ihcsoo.html
-
在線咨詢
 微信咨詢 
 電話咨詢 -
028-86922220（工作日）
18980820575（7×24）
-
 提交需求
-
 返回頂部
| 
重慶分公司
重慶分公司
