python網(wǎng)頁(yè)制作實(shí)例指定關(guān)鍵詞seo報(bào)價(jià)
CSS布局——浮動(dòng)
- 前言
- 一、普通流
- 二、浮動(dòng)
- 三、什么是浮動(dòng)?
- 四、浮動(dòng)的內(nèi)幕特性
- 總結(jié)
前言
CSS盒子布具的三種機(jī)制：普通流（標(biāo)準(zhǔn)流）、定位、浮動(dòng)。
一、普通流
普通流：網(wǎng)頁(yè)內(nèi)元素自上而下，從左到右排序。
二、浮動(dòng)
-
浮動(dòng)最開(kāi)始的時(shí)候浮動(dòng)是做文字環(huán)繞效果
<html> <head><style>div {width: 200px;height: 100px;margin: 0 auto;}img {float: right;}</style> </head> <body><div>123899hj9d<img src="#.png" width="12" height="10" alt=""></div> </body> </html> -
后來(lái)發(fā)現(xiàn)可以用浮動(dòng)布局盒子
三、什么是浮動(dòng)?
-
普通流改到浮動(dòng)
<html> <head><style>div {width: 200px;height: 100px;background-color: pink;display: inline-block; /*轉(zhuǎn)換為行內(nèi)塊元素，放到一行但是元素中間有空格*/float: left; /*左側(cè)浮動(dòng) 一行排列沒(méi)有空隙*/}div:nth-child(2) {background-color: hotpink;}div:last-child {background-color: deeppink;}</style> </head> <body><div></div><div></div> </body> </html> -
實(shí)現(xiàn)塊級(jí)元素放在一行。用display轉(zhuǎn)換為行內(nèi)塊元素，但是此時(shí)div之間的空格難以去掉。用float: left; 可以放在一行且沒(méi)有空格。
-
元素的浮動(dòng)指定了浮動(dòng)屬性的元素脫離標(biāo)準(zhǔn)流，移動(dòng)到父元素中指定位置的過(guò)程。在CSS中用float屬性來(lái)定義浮動(dòng)，其基本語(yǔ)法格式：
float: left;
float: right;
float: none; -
具體來(lái)說(shuō)，浮動(dòng)體現(xiàn)在脫離標(biāo)準(zhǔn)流，壓在標(biāo)準(zhǔn)流上面。
<html> <head><style>div:first-child {width: 200px;height: 100px;background-color: pink;float: left; /*加入這行，第一個(gè)盒子浮動(dòng)到最上面，第二個(gè)盒子在底層從左上開(kāi)始*/}div:last-child {width: 200px;height: 700px;background-color: blue;}/*如果兩個(gè)盒子不加浮動(dòng)，都是標(biāo)準(zhǔn)流，塊級(jí)元素自上而下顯示*/</style> </head> <body><div></div><div></div> </body> </html>
四、浮動(dòng)的內(nèi)幕特性
-
浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，壓在標(biāo)準(zhǔn)流上面。浮動(dòng)只有左右浮動(dòng)。
-
使用的時(shí)候需要首先創(chuàng)造包含塊的概念，即浮動(dòng)的元素找它最近的父級(jí)元素對(duì)齊，但不超出內(nèi)邊距。
<html> <head><style>.father {width: 200px;height: 100px;background-color: pink;border: 10px solid purple;padding: 10px;}.son {width: 100px;height: 50px;background-color: blue;float: left; }</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html> -
浮動(dòng)元素的排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。
<html> <head><style>section {width: 500px;height: 500px;background-color: pink;padding: 10px;}section div:first-child {width: 100px;height: 50px;background-color: blue;float: left; }section div:last-child {width: 100px;height: 50px;background-color: purple;float: left; }</style> </head> <body> <section><div>1</div><div>2</div> </section> </body> </html>- 一個(gè)父盒子里面的子盒子，如果有一個(gè)子級(jí)有浮動(dòng)，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。
- 元素添加浮動(dòng)之后，具有行內(nèi)塊特性。元素的大小取決于定義的大小或者默認(rèn)的內(nèi)容大小。
<html> <head><style>div {width: 500px;height: 500px;background-color: pink;float: left; /*塊級(jí)元素浮動(dòng)之后 具有行內(nèi)塊特性*/}span {height: 100px;background-color: hotpink;float: left; /*行內(nèi)元素浮動(dòng)之后 具有行內(nèi)塊特性*/}/*行內(nèi)塊特性 可以一行放多個(gè) 具有寬度和高度 盒子的大小由內(nèi)容決定*/</style> </head> <body> <section><div>1</div><div>2</div><span>123</span><span>123</span> </section> </body> </html>
總結(jié)
浮動(dòng)的目的為了讓多個(gè)塊級(jí)元素同一行顯示。
float 浮漏特
浮：加了浮動(dòng)的元素盒子是浮起來(lái)的，漂浮在標(biāo)準(zhǔn)流盒子上面
漏：加了浮動(dòng)的盒子不占位置，原來(lái)的位置漏給了標(biāo)準(zhǔn)流盒子
特：特別注意，浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父類搭配使用，浮動(dòng)可以使元素顯示模型表現(xiàn)為行內(nèi)塊特性