第一章了解div+css

1.1 ? ?什么是div皮官，什么是css？

1.2????div+css缺點(diǎn)妇拯？

1.3????為什么使用div+css

第二章 div+css第一階段

2.1 ? ?css四種引入方式

2.2? ? css選擇器

（1）標(biāo)簽選擇器

（2）id選擇器（id唯一）

（3）類選擇器（class選擇器）

（4）交叉選擇器

交叉選擇器中間一定沒有空格

（5）子代選擇器/父子選擇器/包含選擇器

（6）群組選擇器

（7）通用選擇器

2.3????偽類選擇器

2.4????css繼承性和疊加性

css繼承性：

子元素會(huì)繼承父級(jí)元素的文字相關(guān)的樣式脯丝；

css疊加性：

不同選擇器給同一個(gè)元素加的不同的樣式，能同時(shí)生效宾濒；

第三章 div+css第二階段

3.1? ? css優(yōu)先級(jí)

優(yōu)先級(jí)排序：

繼承樣式<瀏覽器默認(rèn)樣式<通用選擇器<標(biāo)簽選擇器<類選擇器<id選擇器<后代選擇器<行內(nèi)樣式

描述越精確，優(yōu)先級(jí)越高屏箍。

3.2? ?塊級(jí)元素绘梦、?行級(jí)元素橘忱、行內(nèi)塊級(jí)元素

a.塊級(jí)元素：

（1）能設(shè)置寬高

（2）獨(dú)占一行不和其他元素呆在同一行

常見塊級(jí)元素：div、p谚咬、ul鹦付、li尚粘、h1-h6...

b.行級(jí)元素

（1）不能設(shè)置寬高

（2）能和其他元素呆在同一行

常見行級(jí)元素：a择卦、span、strong郎嫁、em秉继、u...

c.行內(nèi)塊級(jí)元素/塊內(nèi)行級(jí)元素

（1）能設(shè)置寬高

（2）能和其他元素（行級(jí)元素、行內(nèi)塊級(jí)元素）呆在同一行

常見行內(nèi)塊級(jí)元素：img泽铛、表單（form）

3.3????css控制文字樣式

瀏覽器中文字大小默認(rèn)16px尚辑；

文字大小設(shè)置一般用px；

文字所在行高范圍內(nèi)垂直居中盔腔，可利用這個(gè)特性設(shè)置文字居中

font-weight （加粗）沒有單位杠茬，例：font-weight:400；

取值范圍是1-900弛随，400是正常粗細(xì)瓢喉，700為最常用的 加粗；

letter-spacing 字符間距舀透；例如：letter-spacing:10px

3.4????網(wǎng)頁(yè)開發(fā)三步：

a栓票、根據(jù)內(nèi)容選標(biāo)簽，將內(nèi)容放到頁(yè)面中

b愕够、給元素加樣式

c走贪、給元素定位置

第四章 div+css第三階段

4.1? ? 盒子模型

（1）什么是盒子模型？

實(shí)例圖：

在css中惑芭，盒子模型包括內(nèi)容坠狡、內(nèi)邊距（填充）、邊框遂跟、外邊距組成擦秽；

4.2????內(nèi)邊距

（1）加內(nèi)外邊距不會(huì)影響內(nèi)容的寬高；

例如：width=600px漩勤，表示內(nèi)容寬度為600px感挥，而盒子總寬為：邊框邊距*2+內(nèi)容寬+左邊距+右邊距；

效果：

（2）padding 填充（內(nèi)邊距）

padding：20px越败；（上下左右）

padding：20px ?30px触幼；（上下、左右）

padding：20px ?30px ?40px究飞；（上置谦、左右堂鲤、下）

padding：20px 30px 40px 50px；（上媒峡、右瘟栖、下、左（順時(shí)針方向））

4.3????外邊距

左右外邊距累加谅阿，上下外邊距合并（取最大值）半哟；

margin：20px；（上下左右）

margin：20px ?30px签餐；（上下寓涨、左右）

margin：20px ?30px ?40px；（上氯檐、左右戒良、下）

margin：20px ?30px ?40px ?50px；（上冠摄、右糯崎、下、左（順時(shí)針方向））

margin：0? ?auto河泳；（上下外邊距0沃呢，左右自動(dòng)）是0的話可以不用加px單位；

只能讓塊級(jí)元素基于父布局水平居中乔询；

4.4????全局reset樟插、盒子寬高特點(diǎn)

（1）全局reset（清空默認(rèn)內(nèi)外邊距）

因?yàn)橥ㄓ眠x擇器的優(yōu)先級(jí)大于瀏覽器默認(rèn)樣式的優(yōu)先級(jí)；

也可用群組選擇器清空默認(rèn)內(nèi)外邊距竿刁；

（2）盒子寬高特點(diǎn)

塊級(jí)元素：默認(rèn)寬度是100%黄锤，高度需要多高就是多高；

行級(jí)元素：默認(rèn)寬度根據(jù)內(nèi)容來定食拜，高度需要多高就是多高鸵熟，只能設(shè)置左右外邊距不能設(shè)置上下外邊距；

4.5????display元素轉(zhuǎn)換

任何元素都可進(jìn)行轉(zhuǎn)換

（1）塊級(jí)元素轉(zhuǎn)行級(jí)元素：

display: inline;

（2）行級(jí)元素轉(zhuǎn)塊級(jí)元素:

display: block

行級(jí)元素轉(zhuǎn)成塊級(jí)元素负甸，可設(shè)置寬高屬性流强；

float: left;可以讓塊級(jí)元素排列在同一行

（3）轉(zhuǎn)換成行內(nèi)塊級(jí)元素

display: inline-block;

（4）display: none;元素隱藏

4.6????overflow屬性

overflow: hidden;溢出隱藏（常用）

overflow:auto;自適應(yīng)加滾動(dòng)條（常用）

overflow:scroll;無(wú)論怎樣都加滾動(dòng)條

4.7????邊框詳解

邊框：粗細(xì) 線條樣式 顏色（三個(gè)屬性，無(wú)序）

border：5px solid red呻待；

border-width: 5px;粗細(xì)

border-color: red;顏色

border-style: solid;線條樣式

soild 實(shí)線打月，dotted點(diǎn)狀虛線，dashed虛線...

border-right: 2px yellow soild;單獨(dú)設(shè)置一條邊框蚕捉；

border-top-color : red;單獨(dú)設(shè)置一條邊框顏色奏篙；

4.8????浮動(dòng)float

（1）float可以讓多個(gè)塊級(jí)元素排列到同一行；

float: left;屬性的元素會(huì)先往當(dāng)前這一行最左邊跑，如果跑到最左邊秘通，會(huì)從上一個(gè)行的最右邊出來为严，繼續(xù)向左跑；

（2）如果浮動(dòng)元素的上一行是正常元素肺稀，那么這個(gè)元素是跑不上去的第股；

（3）一個(gè)正常元素在排列位置的時(shí)候會(huì)忽略掉他前面的浮動(dòng)元素；

（4）如果浮動(dòng)的一排元素父級(jí)元素寬度不夠话原，最后的元素會(huì)被擠到下一排夕吻；

（5）如果子元素時(shí)浮動(dòng)的，那么是撐不開父級(jí)元素的高度的稿静；

解決方法：給父布局加overflow:hidden;或者給父級(jí)元素一個(gè)固定高度梭冠；

（6）float: right;右浮動(dòng)與左浮動(dòng)原理相同辕狰；

4.9????float文字環(huán)繞效果

浮動(dòng)元素是脫離文檔流的改备；

利用 “一個(gè)正常元素在排列位置的時(shí)候會(huì)忽略掉他前面的浮動(dòng)元素”這個(gè)特性時(shí)，文字不回被覆蓋蔓倍，從而實(shí)現(xiàn)文字環(huán)繞效果悬钳。

后續(xù)更多內(nèi)容詳見 divcss布局（二）

鏈接：www.reibang.com/p/36b8acf649de

如有問題歡迎交流。

如轉(zhuǎn)載請(qǐng)注明出處偶翅，謝謝默勾！