準(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)系。