十三、標準文檔流

什么是標準文檔流

宏觀的將，我們的web頁面和ps等設計軟件有本質的區別，web 網頁的制作，是個“流”，從上而下 ，像 “織毛衣”。而設計軟件 ，想往哪里畫東西，就去哪里畫

標準文檔流下 有哪些微觀現象？

1.空白折疊現象

多個空格會被合并成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象。

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊

3.自動換行，一行寫不滿，換行寫

如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字。

?

?

十四、塊級元素和行內元素

學習的初期，我們就要知道，標準文檔流等級森嚴。標簽分為兩種等級：

• 行內元素
• 塊級元素

比如h1標簽和span，同時設置寬高，來看瀏覽器效果，那么你會發現：

?

行內元素和塊級元素的區別：（非常重要）

行內元素：

• 與其他行內元素并排；
• 不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

• 霸占一行，不能與其他任何元素并列；
• 能接受寬、高。如果不設置寬度，那么寬度將默認變為父親的100%。

塊級元素和行內元素的分類：

在以前的HTML知識中，我們已經將標簽分過類，當時分為了：文本級、容器級。

從HTML的角度來講，標簽分為：

• 文本級標簽：p、span、a、b、i、u、em。
• 容器級標簽：div、h系列、li、dt、dd。

　　PS：為甚么說p是文本級標簽呢？因為p里面只能放文字&圖片&表單元素，p里面不能放h和ul，p里面也不能放p。

?

現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：

• 行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級，但是是個塊級元素。

• 塊級元素：所有的容器級標簽都是塊級元素，還有p標簽。

塊級元素和行內元素的相互轉換

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。

塊級元素可以轉換為行內元素：

一旦，給一個塊級元素（比如div）設置：

display: inline;

那么，這個標簽將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：

• 此時這個div不能設置寬度、高度；
• 此時這個div可以和別人并排了

行內元素轉換為塊級元素：

同樣的道理，一旦給一個行內元素（比如span）設置：

display: block;

那么，這個標簽將立即變為塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

• 此時這個span能夠設置寬度、高度
• 此時這個span必須霸占一行了，別人無法和他并排
• 如果不設置寬度，將撐滿父親

?

?

?

標準流里面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要并排、并且就要設置寬高，那該怎么辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• （1）浮動
• （2）絕對定位
• （3）固定定位

?

?

十五、浮動

浮動

浮動是css里面布局最多的一個屬性，也是很重要的一個屬性。

float：表示浮動的意思。它有四個值。

• none: 表示不浮動，默認
• left: 表示左浮動
• right：表示右浮動

看一個例子

html結構：

<div class="box1"></div><div class="box2"></div><span>路飛學城</span>

css樣式：

.box1{width: 300px;height: 300px;background-color: red;float:left;}.box2{width: 400px;height: 400px;background-color: green;float:right;}span{float: left;width: 100px;height: 200px;background-color: yellow;}

我們會發現，三個元素并排顯示，.box1和span因為是左浮動，緊挨在一起，這種現象貼邊。.box2盒子因為右浮動，所以緊靠著右邊。

?

那么浮動如果大家想學好，一定要知道它的四大特性

1.浮動的元素脫標

2.浮動的元素互相貼靠

3.浮動的元素由"子圍"效果

4.收縮的效果

?

浮動元素脫標

脫標：就是脫離了標準文檔流

?

看例子

<div class="box1">小紅</div><div class="box2">小黃</div><span>小馬哥</span><span>小馬哥</span> .box1{width: 200px;height: 200px;background-color: red;float: left;}.box2{width: 400px;height: 400px;background-color: yellow;}span{background-color: green;float: left;width: 300px;height: 50px;}

效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標簽竟然能夠設置寬高了。

原因1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中占位置了，此時瀏覽器認為小黃是標準文檔流中的第一個盒子。所以就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素“飄起來了”，但我不建議大家這樣叫。

原因2：所有的標簽一旦設置浮動，就能夠并排，并且都不區分行內、塊狀元素，都能夠設置寬高

浮動元素互相貼靠

看例子

html結構

<div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>

css樣式

.box1{width: 100px;height: 400px;float: left;background-color: red;}.box2{width: 150px; height: 450px;float: left;background-color: yellow;}.box3{width: 300px;height: 300px;float: left;background-color: green;}

效果發現：

如果父元素有足夠的空間，那么3哥緊靠著2哥，2哥緊靠著1哥，1哥靠著邊。
如果沒有足夠的空間，那么就會靠著1哥，如果再沒有足夠的空間靠著1哥，自己往邊靠

?

浮動元素字圍效果

html結構：

<div><img src="./images/企業1.png" alt=""> </div><p>123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛</p>

?

css樣式：

*{padding: 0;margin: 0;}div{float: left;}p{background-color: #666;}

效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。

浮動元素緊湊效果

收縮：一個浮動元素。如果沒有設置width，那么就自動收縮為文字的寬度（這點跟行內元素很像）

html結構：

<div>alex </div>

css樣式：

div{float: left;background-color: red; }

?

大家一定要謹記：關于浮動，我們初期一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清除浮動，

?

為什么要清除浮動

在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。（為什么？）

大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那么此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然后修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。

看一個效果：

html效果：

<div class="father"> <div class="box1"></div><div class="box2"></div><div class="box3"></div>

</div><div class="father2"></div>

css樣式：

*{padding: 0;margin: 0;}.father{width: 1126px;/*子元素浮動 父盒子一般不設置高度*//*出現這種問題，我們要清除浮動帶來影響*//*height: 300px;*/}.box1{width: 200px;height: 500px;float: left;background-color: red;}.box2{width: 300px;height: 200px;float: left;background-color: green;}.box3{width: 400px;float: left;height: 100px;background-color: blue;}.father2{width: 1126px;height: 600px;background-color: purple;}

效果發現：如果不給父盒子一個高度，那么浮動子元素是不會填充父盒子的高度，那么此時.father2的盒子就會跑到第一個位置上，影響頁面布局。

那么我們知道，浮動元素確實能實現我們頁面元素并排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動

還好還好。我們有多種清除浮動的方法，在這里給大家介紹四種：

給父盒子設置高度

clear:both

偽元素清除法

overflow：hidden

給父盒子設置高度

這個方法給大家上個代碼介紹，它的使用不靈活，一般會常用頁面中固定高度的，并且子元素并排顯示的布局。比如：導航欄

clear：both

clear：意思就是清除的意思。

有三個值：

left：當前元素左邊不允許有浮動元素

right：當前元素右邊不允許有浮動元素

both：當前元素左右兩邊不允許有浮動元素

給浮動元素的后面加一個空的div，并且該元素不浮動，然后設置clear：both。

html結構：

<div><ul><li>Python</li><li>web</li><li>linux</li><!-- 給浮動元素最后面加一個空的div 并且該元素不浮動 ，然后設置clear:both 清除別人對我的浮動影響--><!-- 內墻法 --><!-- 無緣無故加了div元素 結構冗余 --><div class="clear"></div></ul></div> <div class="box"></div>

css樣式

*{padding: 0;margin: 0;}ul{list-style: none;}div{width: 400px;}div ul li {float: left;width: 100px;height: 40px;background-color: red;}.box{width: 200px;height: 100px;background-color: yellow;}.clear{clear: both;}

?

偽元素清除法(常用)

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置

.clearfix:after{/*必須要寫這三句話*/content: '.';clear: both;display: block; }

新浪首頁推薦偽元素清除法的寫法

/*新浪首頁清除浮動偽元素方法*/content: ".";display: block;height: 0;clear: both;visibility: hidden

overflow:hidden(常用)

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。

?

有五個值：

值描述

visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

逐漸演變成overflow：hidden清除法。

其實它是一個BFC區域:?https://blog.csdn.net/riddle1981/article/details/52126522

到此為止。關于浮動的實現并排、清除浮動的四個用法已經介紹完畢，大家一定要熟記于心。

?

?

?

十六、margin的用法：

margin塌陷問題

當時說到了盒模型，盒模型包含著margin，為什么要在這里說margin呢？因為元素和元素在垂直方向上margin里面有坑。

我們來看一個例子：

html結構：

?

<div class="father"><div class="box1"></div> <div class="box2"></div> </div>

?

css樣式：

*{padding: 0;margin: 0;}.father{width: 400px;overflow: hidden;border: 1px solid gray;}.box1{width: 300px;height: 200px;background-color: red;margin-bottom: 20px;}.box2{width: 400px;height: 300px;background-color: green;margin-top: 50px;}

當給兩個標準流下兄弟盒子 設置垂直方向上的margin時，那么以較大的為準，那么我們稱這種現象叫塌陷。沒法解決，我們稱為這種技巧叫“奇淫技巧”。記住這種現象，在布局垂直方向盒子的時候主要margin的用法。

當我們給兩個標準流下的兄弟盒子設置浮動之后，就不會出現margin塌陷的問題。

margin：0 auto;

div{width: 780px;height: 50px;background-color: red;/*水平居中盒子*/margin: 0px auto;/*水平居中文字*/text-align: center;}

當一個div元素設置margin：0 auto;時就會居中盒子，那我們知道margin:0 auto;表示上下外邊距離為0，左右為auto的距離，那么auto是什么意思呢？

設置margin-left:auto；我們發現盒子盡可能大的右邊有很大的距離，沒有什么意義。當設置margin-right:auto；我們發現盒子盡可能大的左邊有很大的距離。當兩條語句并存的時候，我們發現盒子盡可能大的左右兩邊有很大的距離。此時我們就發現盒子居中了。

?

另外如何給盒子設置浮動，那么margin:0 auto失效。

?

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標準流下的盒子 才能使用margin:0 auto;?

當一個盒子浮動了，固定定位，絕對定位(后面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

?

另外大家一定要知道margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

善于使用父親的padding，而不是margin

如果讓大家實現如圖的效果，應該有不少的同學做不出來。

那么我們來看看這個案例，它的坑在哪里？

下面這個代碼應該是大家都會去寫的代碼。

*{padding: 0;margin: 0;}.father{width: 300px;height: 300px;background-color: blue;}.xiongda{width: 100px;height: 100px;background-color: orange;margin-top: 30px;}

因為父親沒有border，那么兒子margin-top實際上踹的是“流” 踹的是行,所以父親掉下來了，一旦給父親一個border發現就好了。

那么問題來了，我們不可能在頁面中無緣無故的去給盒子加一個border，所以此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

?

?

?

?

十七、文本屬性和字體屬性

文本屬性

介紹幾個常用的。

文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

屬性值：none | center | left | right | justify

文本顏色

color屬性

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em

文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線)? | line-through (定義穿過文本下的一條線) |?inherit(繼承父元素的text-decoration屬性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

字體屬性

字體大小

font-size表示設置字體大小，如果設置成inherit表示繼承父元素的字體大小值。

字體粗細

font-weight表示設置字體的粗細

屬性值：none(默認值，標準粗細) | bold(粗體) | border(更粗）|?lighter(更細) |?100~900（設置具體粗細，400等同于normal，而700等同于bold）|?inherit（繼承父元素字體的粗細值）

字體系列

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。如果都不支持則顯示宋體。

?

行高 line-height

針對單行文本垂直居中

公式：行高的高度等于盒子的高度，可以使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小于字體的大小，不然上下字之間會緊挨一起。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那么設置盒子的padding-top:75px;同時保證盒子的高度為300px,那么高度改為225px;

?

font-family介紹

使用font-family注意幾點：

1.網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦里面裝沒裝，
比如你設置： font-family: "華文彩云"; 如果用戶電腦里面沒有這個字體，
那么就會變成宋體
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。?
如果頁面中，需要其他的字體，那么需要切圖。 英語：Arial 、 Times New Roman

2.為了防止用戶電腦里面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說如果用戶電腦里面，
沒有安裝微軟雅黑字體，那么就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數個，用逗號隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動的變為后面的中文字體：?
font-family: "Times New Roman","微軟雅黑","宋體";

4.所有的中文字體，都有英語別名，
我們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字號的百分之多少。
一般來說，都是大于100%的，因為行高一定要大于字號。?
font:12px/200% “宋體” 等價于 font:12px/24px “宋體”;?
反過來，比如： font:16px/48px “宋體”;
等價于 font:16px/300% “宋體”

?

轉載于:https://www.cnblogs.com/zzw731862651/p/9082824.html

總結

以上是生活随笔為你收集整理的CSS 知识（13---）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。