整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
準(zhǔn)流的默認(rèn)特性
1、分行、塊級(jí)元素，并且能夠dispay轉(zhuǎn)換。
2、塊級(jí)元素（block）：默認(rèn)獨(dú)占一行，不能并列顯示，能夠設(shè)置寬、高，寬度為父盒子的100%。例如：div、p、標(biāo)題元素（h1-h6）、列表元素（ul li、dl dt dd）
3、行內(nèi)元素（inline）：默認(rèn)并排顯示，不能設(shè)置寬、高，寬度為內(nèi)容的寬度。例如：span、a、b、i
4、margin-bottom 和margin-top 塌陷，以最大值為準(zhǔn)。
脫標(biāo)的元素的特性
只要是脫離了標(biāo)準(zhǔn)流，元素都是不區(qū)分行、塊的，體現(xiàn)在任何元素都可以設(shè)置寬、高了。都有了收縮的 性質(zhì)，就是不設(shè)置寬度，就自動(dòng)縮減為里面內(nèi)容的寬度。
浮動(dòng)的元素有貼邊的性質(zhì)，絕對(duì)定位的元素可以自由定位。
1.盒子的浮動(dòng)（float 屬性）：
在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，直到包含它的元素的邊界；在豎直方向和兄弟元素一次排列。不能并排。
CSS的float屬性默認(rèn)為none，將float屬性設(shè)置為left或者right后，元素會(huì)向其父元素的左側(cè)或右側(cè)緊靠，同時(shí)默認(rèn)情況下，盒子的寬度不再伸展，而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)確定。 脫離了標(biāo)準(zhǔn)文件流。（但是，本顯示會(huì)占據(jù)一定的空間）。
這樣未填滿的部分就會(huì)進(jìn)行填充。 為了消除影響，不讓后面的元素因?yàn)楦?dòng)產(chǎn)生的這些空間進(jìn)行填充，使用clear屬性進(jìn)行消除浮動(dòng)對(duì)后面的元素造成的影響：
clear 屬性：
clear屬性除了可以設(shè)置right、left 也可以設(shè)置為both，表示同時(shí)消除左右兩邊的影響。
clear屬性設(shè)置要放到 float 之后的 要消除float影響的兄弟div里面，而不是float本身所在的div。
設(shè)置上clear之后，該div會(huì)把前面設(shè)置float的div 當(dāng)做塊級(jí)div來(lái)看待。
使用示例：
因?yàn)楦?dòng)的元素都不在標(biāo)準(zhǔn)流里，如果盒子內(nèi)部元素都是浮動(dòng)元素，父級(jí)div 縮成一條。
解決方法，在后面加一個(gè)空div 并清除 浮動(dòng)影響.
高度消失后，父級(jí)將只保留margin和border的高度，與父級(jí)平行的div 將會(huì)緊挨著父級(jí)顯示，顯示漂浮的內(nèi)容 會(huì)占據(jù)空間，后面div內(nèi)容 會(huì)依次緊挨著漂浮的內(nèi)容顯示。
脫離了標(biāo)準(zhǔn)流，但內(nèi)容顯示上 會(huì)被其他元素包圍。（其他元素可以“趁空而入”）
浮動(dòng)可以使塊級(jí)元素并排顯示，用于頁(yè)面布局。
2.盒子的定位（position）：
static （標(biāo)準(zhǔn)流中默認(rèn)）
盒子按照標(biāo)準(zhǔn)流（包括浮動(dòng)方式）進(jìn)行布局。
relative （位于標(biāo)準(zhǔn)流中）：
以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對(duì)于它在原本的的標(biāo)準(zhǔn)位置偏移指定的距離。相對(duì)定位的盒子，仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對(duì)待它。
只要標(biāo)識(shí)該div position:relative ;使用 top left 等屬性 可以設(shè)置偏移量，與父級(jí)元素的定位方式無(wú)關(guān)。
總結(jié)：
1.使用相對(duì)定位的盒子仍在標(biāo)準(zhǔn)流中，它對(duì)付款和兄弟盒子沒(méi)有任何影響。
2.使用相對(duì)定位的菏澤仍在標(biāo)準(zhǔn)流中，它對(duì)父塊和兄弟盒子沒(méi)有任何影響。
對(duì)浮動(dòng)的盒子使用相對(duì)于定位 也是一樣的
absolute （非標(biāo)準(zhǔn)流）
絕對(duì)定位，盒子位置以它的包含框?yàn)榛鶞?zhǔn)進(jìn)行偏移，絕對(duì)定位的盒子從標(biāo)準(zhǔn)流中脫離，其他盒子就當(dāng)這個(gè)盒子不存在一樣。
設(shè)置position后：div 脫離標(biāo)準(zhǔn)流，寬度自動(dòng)按內(nèi)容寬度，覆蓋在后面的元素之上。
設(shè)置top，left等屬性：
top:5px;
跑出了父級(jí)的div ，
把father div塊 設(shè)置成相對(duì)定位：
1.使用絕對(duì)定位的盒子 以它的”最近“的一個(gè)”已經(jīng)定位“的祖先元素 為基準(zhǔn)進(jìn)行偏移，如果沒(méi)有定位定位的祖先元素， 那會(huì)以瀏覽器窗口進(jìn)行定位。
已經(jīng)定位：position 屬性被設(shè)置，且被設(shè)置的不是 static的任意一種方式。
最近，離該節(jié)點(diǎn)最近的一個(gè)已經(jīng)定位的節(jié)點(diǎn)。
2.絕對(duì)定位的框從標(biāo)準(zhǔn)流中脫離，這意味著對(duì)其后兄弟盒子的定位沒(méi)有影響，其他盒子就好像這個(gè)盒子不存在一樣。
通過(guò)實(shí)驗(yàn)可知道：
如果設(shè)置了絕對(duì)定位，而沒(méi)有設(shè)置偏移屬性，那么它仍將保持原來(lái)的位置，這個(gè)性質(zhì)可以用于需要使某個(gè)元素脫離標(biāo)準(zhǔn)流，而仍然希望保持原來(lái)的位置的情況。
fixed （以窗口為基準(zhǔn)）
固定定位，基準(zhǔn)不是祖先元素 而是瀏覽器窗口 或者其他縣市設(shè)備的窗口。
z-index:
當(dāng)塊被設(shè)置了position屬性時(shí)，該值便可設(shè)置各塊之間的重疊高低關(guān)系，默認(rèn)z-index值為0
盒子的display屬性：
none :此元素不會(huì)被顯示。
block：顯示為塊級(jí)元素，前后會(huì)帶有換行符。
inline：默認(rèn) 此元素被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
list-item：作為列表顯示
圖書推薦：大家可以參考《CSS徹底研究》來(lái)進(jìn)行學(xué)習(xí)，如需相關(guān)資料請(qǐng)留言！
浮動(dòng)是為了元素標(biāo)簽的并排顯示問(wèn)題。
我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì)看到 幾個(gè) div 塊是可以并排顯示的， 浮動(dòng)就是解決這樣問(wèn)題的方法之一。
float屬性有以下的值
浮動(dòng)的特點(diǎn)
一個(gè)浮動(dòng)的例子
<!--一個(gè)浮動(dòng)的例子-->
<style>
.box1 {
width: 600px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 201px;
height: 200px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
一個(gè)順序貼靠的例子
<!-- 一個(gè)順序貼靠的例 子-->
<!-- 以下代碼中 兄弟元素 con1， con2， con3 之間會(huì)進(jìn)行順序貼靠-->
<!-- con3 在貼靠 con2 的時(shí)候，發(fā)現(xiàn)父容器的寬度只能是400px, 分別被con1 和 con2 占據(jù)， 所以con3 會(huì)找 cont1 貼靠，最終con3 位于 con1右邊， con2下邊 -->
<style>
.box1 {
width: 400px;
height: 200px;
border: 1px solid #000;
}
.box1 .con1 {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box1 .con2 {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
.box1 .con3 {
width: 200px;
height: 100px;
background-color: yellowgreen;
float: left;
}
</style>
<div class="box1">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>清除浮動(dòng)是為了 不影響設(shè)置浮動(dòng)標(biāo)簽的后續(xù)的標(biāo)簽的布局展示。
因?yàn)椋谝粋€(gè)父容器中，子元素浮動(dòng)了，脫離了標(biāo)準(zhǔn)文檔流，不在占用之前的位置，會(huì)導(dǎo)致 無(wú)法撐開(kāi)沒(méi)有設(shè)置高度的父元素；從而導(dǎo)致后續(xù)的結(jié)構(gòu)擠壓，造成整個(gè)頁(yè)面布局的混亂。
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body><style>
* {
margin: 0;
padding: 0;
}
.box2 {
margin-top: 20px;
clear: both;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="box2">
<p></p>
<p></p>
<p></p>
</div>
</body><style>
* {
margin: 0;
padding: 0;
}
.cleafix::after {
content: '';
clear: both;
display: block
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div class="cleafix">
<p></p>
<p></p>
</div>
<div class="cleafix">
<p></p>
<p></p>
<p></p>
</div>
</body><style>
* {
margin: 0;
padding: 0;
}
.clearboth {
clear: both;
}
p {
float: left;
width: 100px;
height: 100px;
margin-right: 20px;
background-color: red;
}
</style>
<body>
<div>
<p></p>
<p></p>
</div>
<div class="clearboth"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>節(jié)課介紹CSS的浮動(dòng)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
