文檔流
文檔流指的是文檔中可現(xiàn)實(shí)的對(duì)象在排列時(shí)所占用的位置。
將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。
也就是說(shuō)在文檔流中元素默認(rèn)會(huì)緊貼到上一個(gè)元素的右邊，如果右邊不足以放下元素，元素則會(huì)另起一行，在新的一行中繼 續(xù)從左至右擺放。
這樣一來(lái)每一個(gè)塊元素都會(huì)另起一行，那么我們?nèi)绻朐谖臋n流中進(jìn)行布局就會(huì)變得比較麻煩。
塊元素在文檔流中會(huì)獨(dú)占一行
浮動(dòng)
所謂浮動(dòng)指的是使元素脫離原來(lái)的文本流，在父元素中浮動(dòng)起來(lái)。
浮動(dòng)使用float屬性
- 可選值
none：不浮動(dòng)
left：向左浮動(dòng)
right：向右浮動(dòng)
- 這里要注意的是：一用浮動(dòng)，所有的元素都會(huì)成為一個(gè)塊級(jí)元素
- 當(dāng)一個(gè)塊級(jí)元素浮動(dòng)以后，寬度會(huì)默認(rèn)被內(nèi)容撐開(kāi)，所以當(dāng)漂浮一個(gè)塊級(jí)元 素時(shí)我們都會(huì)為其指定一個(gè)寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動(dòng)</title>
<style>
.box1{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:red;
/*float:right;*/
float:left;
}
.box2{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:yellow;
/*float:right;*/
float:left;
}
.box3{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color:green;
float:left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
在上面的代碼中，大家可以取消浮動(dòng)float然后觀(guān)察效果，再添加浮動(dòng)，就會(huì)看出不同了。
文字繞圖
文字繞圖也用到了浮動(dòng)的知識(shí)，即把上面代碼中盒子box1的位置換成一張圖片的地址，然后把圖片浮動(dòng)起來(lái)，讓文字標(biāo)簽頂上去就會(huì)實(shí)現(xiàn)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動(dòng)</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
/*.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}*/
/*這里把盒子換成圖片就實(shí)現(xiàn)了文字繞圖了*/
img{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
p{
/*當(dāng)我給定內(nèi)容時(shí)，但如果不給定高時(shí)，文字會(huì)自動(dòng)撐開(kāi)父元素*/
/* height: 200px;*/
background-color:blue;
/* overflow:scroll;*/
/* float: left;*/
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<img src="C:\Users\ljy\Desktop\圖片1.png">
<p>
1.形散神聚:"形散"既指題材廣泛、寫(xiě)法多樣，又指結(jié)構(gòu)自由、不拘一格;"神聚"既指中心集中，又指有貫穿全文的線(xiàn)索。散文寫(xiě)人寫(xiě)事都只是表面現(xiàn)象，從根本上說(shuō)寫(xiě)的是情感體驗(yàn)。情感體驗(yàn)就是"不散的神"，而人與事則是"散"的可有可無(wú)、可多可少的"形"。
2."形散"主要是說(shuō)散文取材十分廣泛自由，不受時(shí)間和空間的限制;表現(xiàn)手法不拘一格:可以敘述事件的發(fā)展，可以描寫(xiě)人物形象，可以托物抒情，可以發(fā)表議論，而且作者可以根據(jù)內(nèi)容需要自由調(diào)整、隨意變化。"神不散"主要是從散文的立意方面說(shuō)的，即散文所要表達(dá)的主題必須明確而集中，無(wú)論散文的內(nèi)容多么廣泛，表現(xiàn)手法多么靈活，無(wú)不為更好的表達(dá)主題服務(wù)。
3.意境深邃:注重表現(xiàn)作者的生活感受，抒情性強(qiáng)，情感真摯。
作者借助想象與聯(lián)想，由此及彼，由淺入深，由實(shí)而虛的依次寫(xiě)來(lái)，可以融情于景、寄情于事、寓情于物、托物言志，表達(dá)作者的真情實(shí)感，實(shí)現(xiàn)物我的統(tǒng)一，展現(xiàn)出更深遠(yuǎn)的思想，使讀者領(lǐng)會(huì)更深的道理。
4.語(yǔ)言?xún)?yōu)美:所謂優(yōu)美，就是指散文的語(yǔ)言清新明麗(也美麗)，生動(dòng)活潑，富于音樂(lè)感，行文如涓涓流水，叮咚有聲，如娓娓而談，情真意切。所謂凝練，是說(shuō)散文的語(yǔ)言簡(jiǎn)潔質(zhì)樸，自然流暢，寥寥數(shù)語(yǔ)就可以描繪出
</p>
</body>
</html>
如圖所示:
文字繞圖.JPG
內(nèi)聯(lián)元素的浮動(dòng)
我們?cè)谇懊嬷v到浮動(dòng)的時(shí)候，有一句：元素一旦浮動(dòng)，就會(huì)變成為一個(gè)塊級(jí)元素。
那么內(nèi)聯(lián)元素也是如此，本身內(nèi)聯(lián)元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動(dòng)</title>
<style type="text/css">
.box1{
/*在文檔流中，子元素的寬度默認(rèn)占父元素的全部*/
/*height: 100px;*/
background-color: red;
/*
當(dāng)元素設(shè)置浮動(dòng)以后，會(huì)完全脫離文檔流.
塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開(kāi)
如果沒(méi)有內(nèi)容，我們就得為其設(shè)置寬高
*/
float: left;
}
.s1{
/*
開(kāi)啟span的浮動(dòng)
內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊級(jí)元素
那么我們?cè)O(shè)置的寬和高就能用了
否則內(nèi)聯(lián)元素是不能設(shè)置寬和高的
只能被其內(nèi)容撐開(kāi)。
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
</body>
</html>
有任何問(wèn)題請(qǐng)給我留言，或者直接發(fā)我郵箱taijirenlijunyang163@.com。歡迎大家交流討論。
