整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ul加入zoom:1;overflow:hidden;
ul {
zoom:1;
overflow:hidden;
}
標簽按照規定好的默認方式排序
塊級元素獨占一行 從上向下順序排列
div hr p h1-h6 ul ol form table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
div {
color: bisque;
width: 300px;
background-color: #c5708b;
}
h2 {
color: #1677b3;
width: 300px;
background-color: #5698c3;
}
</style>
</head>
<body>
<div>我是div</div>
<h2>我是h2</h2>
</body>
</html>很多的布局效果,標準流沒有辦法完成,就需要利用到浮動完成布局.
浮動可以改變元素標簽默認的排列方式
網頁布局第一準則:
多個塊級元素縱向排列找標準流
多個塊級元素橫向排列找浮動
float 屬性用于創建浮動框
將其移動到一邊,直到左邊緣或者右邊緣及包含塊或者另一個浮動框的邊緣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
div {
color: bisque;
width: 200px;
background-color: #c5708b;
/* left 左浮動 right 右浮動 none 不浮動(默認) */
float: left;
}
h2 {
color: #1677b3;
width: 300px;
background-color: #5698c3;
}
</style>
</head>
<body>
<div>我是div</div>
<h2>我是h2</h2>
</body>
</html>1.脫離標準普通流的控制移動到指定位置 脫標
2.浮動的盒子不再保留原先的位置
3.多個盒子都設置浮動,按照屬性值一行并排頂端對齊排列(不會有縫隙,多出另起一行對齊)
4.浮動元素會具有行內塊元素特性(任何元素都可浮動)
5.浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流
由于父級盒子很多情況下,不方便給高度,但是的盒子浮動又不占位置,最后父級盒子高度為0時,就會影響下面的標準流盒子.
1.父級沒有高度
2.子盒子浮動了
3.影響下面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid #000;
}
div .child {
color: bisque;
width: 200px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>清除浮動本質:
清除浮動元素脫離標準流造成的影響
清除浮動策略:
閉合浮動,只讓浮動在父盒子內影響,不影響父盒子外面的其他盒子
1. 父級添加overflow 屬性值設置hidden auto scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
overflow: hidden;
}
div .child {
color: bisque;
width: 200px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>弊端:無法顯示溢出的部分
父盒子 500px 子盒子 600px (子盒子的100px被隱藏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
width: 500px;
overflow: hidden;
}
div .child {
color: bisque;
width: 600px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>2.:after 偽元素法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
width: 500px;
}
div .child {
color: bisque;
width: 240px;
background-color: #c5708b;
float: left;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE 6,7專有 解決兼容性問題 */
*zoom: 1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>3.雙偽元素清除浮動
、純文本的排列。
文檔流就像我們的文本內容一樣，所有的文字都會緊挨著，一個個排列下來，如果到了邊界，就會換一行排列。當然如果敲回車或者按下空格鍵一般都會認為是一個詞間距，因為英文中每個單詞之間是有距離的，不像中文每個漢字連在一起的。所以不管你敲了幾個回車，不管你敲了幾個空格。程序都認為只有一個詞間距的空格距離。我們把這種現象稱為空白折疊現象。下圖中的紅色箭頭就是我們敲了回車和敲了空格的效果。
2、文本和圖片的排列
因為圖文排版的原因，圖片的寬度是一個整體。不像文字可以中間分開，因此在圖文一起的時候我們會發現，圖片作為文檔流中的內容也是和一個文字元素一樣，緊挨前一個文字，后面的文字也緊跟著圖片。但是如果一行剩下的位置不夠圖片的寬度，就會自動換一行。
因為圖片和一個文字元素一樣，因此，圖片的高度大于文字的高度，就會把這一行撐高，圖片越高，行越高。在同一行的文字默認就會在圖片的下端。如果你希望文字相對在圖片的中間位置，那么就需要給圖片設置一個CSS樣式vertical-align: middle;注意一定是給圖片設置，不是給文字設置。
當然如果我們設置兩個張圖，注意觀察下面的兩張圖中間的縫隙，原因在于<img src=”img/1.jpg”>之間是換行的。根據上面文字的特征，這里必然也會產生一個空格
如何解決這個問題呢，起始有很多手段，最簡單的是把兩個標簽連接寫，不要換行
3、塊元素和行內元素
剛才我們所說的都是行內元素，也就是內容添加后會自動放在一行，如果頁面的剩余的寬度比要放入的元素小，那么就會自動換行。
除了文本和圖片還有一些其他的HTML標簽也是行內元素。例如:
行內元素
<span>...</span>行內元素
<a>...</a> 鏈接
<br> 換行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img src="img/1.jpg"> 圖片
<sup>...</sup> 上標
<sub>...</sub> 下標
<i>...</i> 斜體
<em>...</em> 斜體
<del>...</del> 刪除線
<u>...</u> 下劃線
<input type="text" title="文本"> 文本框
<textarea title="多行文本">...</textarea> 多行文本
<select title="下拉列表">...</select> 下拉列表
上面所有的行內元素，如果直接寫在代碼中都會存在同一行中。當然換行br會將后面的元素都放在另外一行了。
有時候我們希望一個內容可以自己獨立成行。這樣我們就有了塊元素。塊元素會獨立成行，與行內元素做明顯的區分。
例如：
<address></address>地址文字
<center>...</center> 居中
<h1>...</h1> 標題一級
<h2>...</h2> 標題二級
<h3>...</h3> 標題三級
<h4>...</h4> 標題四級
<h5>...</h5> 標題五級
<h6>...</h6> 標題六級
<hr> 水平分割線
<p>...</p> 段落
<pre>...</pre> 預格式化
<blockquote>...</blockquote> 段落縮進 前后5個字符
<ul>...</ul> 無序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定義列表
<table>...</table> 表格
<form>...</form> 表單
<div>...</div>塊容器
塊元素和行內元素具體有哪些區別呢。
行內元素
塊元素
同行
輸入行內元素，就會自動同行
輸入塊級元素，自動換行，并且獨立占有一行，其它行內元素不會和它同行的。
設置寬高
行內元素部分內容是不可以設置寬高的，例如span容器,a超鏈接標簽等等，當然有些還是可以通過CSS樣式更改寬高的，例如input，img,textarea等非文字的標簽
塊元素直接可以設置寬高，如果沒有設置就會根據該元素的父級容器的寬自動設置100%，高度是根據內容撐開的，如果沒有內容，塊元素默認高度是0，這點很重要。
4、行內元素和塊元素的互相轉換
行內元素和塊元素可以互相轉換的，例如：
(1) 行內元素轉換為塊元素
這是默認的行內元素
這是轉換后的。我們發現文字塊換行了，而且獨立占有一行，在這里我們設置display:block
(2) 塊元素轉換為行內元素
這是默認的div的塊元素樣式
設置為行內元素后。我們發現寬高失效了。一旦塊級元素設置為行內元素，原來設置的寬高就會失效
(3) 塊元素和行內元素轉換為行內塊元素
有時候我們想讓容器（不是textArea或者input）既有寬高又可以排列在同一行中，我們可以轉換為行內塊容器。尤其是我們希望將多個不同寬高的容器放在同一行中，并且可以通過margin調節他們的位置（注意：行內元素不能通過margin調節垂直位置，因為他們都是同一行的），這時候行內塊元素就非常有必要了。
塊元素變成行內塊元素
行內元素變行內塊元素
我們發現這兩個效果都是一樣的。
大家可能覺得這樣很棒了，我們可以利用圖文混合排列做成網頁了，但是注意我們轉換成了行內塊元素，他們就是在行內了，任何一個更改了marginTop都會撐開了行高。就會變成這樣：
到此為止我們就認識了標準的文檔流，如果想在這種標準文檔流中排版出復雜的圖文混排，那基本上很難。因此我們就要學習浮動。浮動就是讓容器脫離了這個標準文檔流，就像浮動在頁面上一樣。關于這個問題，我們在下一篇中詳細介紹。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
