01.標(biāo)準(zhǔn)流和display屬性
02.浮動
03.文字環(huán)繞
04.清除浮動
05.定位
06.盒子模型
07.其他常用的屬性
01.標(biāo)準(zhǔn)流和display屬性
1.標(biāo)準(zhǔn)流：瀏覽器對標(biāo)簽?zāi)J(rèn)的布局方式就是標(biāo)準(zhǔn)流
2.標(biāo)準(zhǔn)流布局原則：
塊級：
a.塊級標(biāo)簽一個占一行（不管標(biāo)簽的寬度是否是父標(biāo)簽的寬度）鹅龄。
b.默認(rèn)寬度是瀏覽器的寬度壤巷，默認(rèn)高度是內(nèi)容高度
c.直接設(shè)置寬高有效
行內(nèi)塊標(biāo)簽：
a.多個行內(nèi)塊可以在一行顯示
b.默認(rèn)的寬高都是內(nèi)容的寬高
c.直接設(shè)置寬高有效
行內(nèi)標(biāo)簽：
a.多個行內(nèi)可以在一行顯示
b.默認(rèn)的寬高都是內(nèi)容的寬高
c.直接設(shè)置寬高無效
3.displays屬性：轉(zhuǎn)換標(biāo)簽的性質(zhì)
block：塊級
inline：行內(nèi)
inline-block：行內(nèi)塊
注意：行內(nèi)塊和其他的標(biāo)簽之間默認(rèn)有間隙半火，而且這個間隙無法消除
02.浮動
1.怎么浮動
通過給float屬性賦值為left或者right來讓標(biāo)簽浮動定续，浮動會讓標(biāo)簽脫流肠缔。
浮動的目的就是讓豎著顯示的可以橫著來（針對快）
2.浮動的效果
a.所有的標(biāo)簽浮動后，一行可以顯示多個腿宰；默認(rèn)的寬高是內(nèi)容的大性笏摇；可以設(shè)著寬和高
b.一行顯示不了的時候才會自動換行
3.注意事項：
a.如果同一級的標(biāo)簽台谍，后邊的需要浮動须喂，前面的也要浮動吁断，否則可能出現(xiàn)顯示的問題
b.浮動的標(biāo)簽不占底層的位置，只占頂部的位置坞生；但是不浮動的既占底層又占頂部
03.文字環(huán)繞
文字環(huán)繞效果：
被環(huán)繞的標(biāo)簽不浮動仔役，文字對應(yīng)的標(biāo)簽浮動。就會自動產(chǎn)生文字環(huán)繞的效果
<body>
<img src="img/微信截圖_20180919112456.png" style="float: left;"/>
<p>大家分開圣誕節(jié)福利科技的說法文件大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利
大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利
大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利
大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利
大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利大家分開圣誕節(jié)福利科技的說法文件反饋圣誕節(jié)福利</p>
</body>
04.清除浮動
1.清除浮動：清除浮動不是將標(biāo)簽的浮動給去掉是己，而是清除因為浮動而產(chǎn)生的高度塌陷的問題
高度塌陷：父標(biāo)簽不浮動又兵，子標(biāo)簽浮動，并且不設(shè)置子標(biāo)簽高度卒废，就會產(chǎn)生高度塌陷的問題（父標(biāo)簽）
2.解決方案
方案一：添加空盒子沛厨，在高度塌陷的標(biāo)簽(父標(biāo)簽)的最后添加一個空的div，并設(shè)置樣式clear的值為both
方案二：給父標(biāo)簽添加樣式設(shè)置overflow的值為hidden
05.定位
CSS中可以通過left摔认，right逆皮，bottom，top屬性來設(shè)置標(biāo)簽到上下左右的距離(但是默認(rèn)這些值不是都有效的)
想要讓定位屬性有效参袱，必須通過position屬性來設(shè)置參考對象电谣。
1.position
initial：默認(rèn)值，沒有相對定位
absolute：相對第一個非static/initial父標(biāo)簽進(jìn)行定位
relative：相對于自己在標(biāo)準(zhǔn)流中位置來定位抹蚀。（當(dāng)標(biāo)簽本身不希望去定位剿牺，只想讓自己的字標(biāo)簽可以相對本身來定位的時候使用）
fixed：相對于瀏覽器定位
sticky：當(dāng)網(wǎng)頁的內(nèi)容不超過一屏的時候，就按照標(biāo)準(zhǔn)流進(jìn)行定位环壤，超過就相對了瀏覽器定位
2.注意：如果想要設(shè)置right值要保證相對標(biāo)簽的寬度是穩(wěn)定的晒来。如果想要設(shè)置bottom值要保證相對對象的高度是確定的。
3.技巧：當(dāng)遇到某個方向定位死活無效的時候郑现，可以嘗試將這個標(biāo)簽浮動潜索，然后在定位
06.盒子模型
html中所有可見的標(biāo)簽都是一個黑子模型：包括長和寬決定的內(nèi)容的大小、padding懂酱、border、margin四個部分組成誊抛。
其中內(nèi)容列牺、padding、border是可見的拗窃，margin不可見
1.內(nèi)容：設(shè)置width和height影響的就是內(nèi)容部分的大小瞎领。添加字標(biāo)簽、添加內(nèi)容都是放在內(nèi)容部分的
2.padding：在內(nèi)容的外圍随夸，可見部分如果標(biāo)簽有背景顏色九默，那么這個部分的顏色和內(nèi)容一致
3.border：邊框，border是在padding的外圍宾毒，如果沒有padding就在內(nèi)容的外圍驼修，可見部分。可以設(shè)置顏色和大小
<style type="text/css">
div{
background-color: red;
/*1.內(nèi)容*/
width: 100px;
height: 60px;
/*2.padding*/
/*padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*同時設(shè)置上右下左的padding值*/
padding: 20px 30px 40px 50px;
/*3.border:寬度 樣式 顏色*/
border-left: 2px solid blue; /*單獨設(shè)置某一邊的邊框*/
border: 10px double blue; /*同時設(shè)置四個邊的邊框*/
/*4.margin：寬度*/
margin-left: 100px;
}
input{
padding-left: 20px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<div id="" align="center">
aaa
</div>
</body>
07.其他常用的屬性
1.字體相關(guān)的屬性
字體顏色：color
字體大幸腋鳌：font-size
字體名：font-family
字體加粗：font-weight
字體傾斜：font-style
p{
font-family: "微軟雅黑";
font-weight: bolder;
font-style: italic;
}
2.對齊方式：text-align
left：左對齊
right：右對齊
center：水平方向居中
p{
text-align: center;
}
3.行高：line-height
設(shè)置一行的高度
p{
line-height: 40px;
}
4.文本修飾：text-decoration
none：取消修飾
underline：下劃線
overline：上劃線
line-through：刪除線
a{
text-decoration: none;
}
5.首行縮進(jìn)：text-indent
單位是：em(表示空格)
p{
text-indent: 2em;
}
6.字間距：letter-spacing
單位：em墨礁，px*/
p{
letter-spacing: 2em;
}
<body>
<p>hello world!!<br />你好世界!!</p>
<a href="">不要點！耳峦！</a>
</body>
