块级元素和行内元素
標簽分為兩種等級：
1，行內元素。2，塊級元素。
行內元素和塊級元素的區別：
行內元素：
與其他行內元素并排
不能設置寬高，默認的寬度就是文字的寬度
塊級元素：
霸占一行，不能與其他任何元素并列。
能接受寬高，如果不設置寬度，那么寬度將默認變為父級的100%。
塊級元素和行內元素的分類：
在HTML的角度來講，標簽分為：
文本級標簽：p , span , a , b , i , u , em
容器級標簽：div , h系列 , li , dt ,dd
p：里面只能放文字和圖片和表單元素，p里面不能放h和ul，也不能放p。
從CSS的角度講，CSS的分類和上面的很像，就p不一樣：
行內元素：除了p之外，所有的文本級標簽，都是行內元素。p是個文本級標簽，但是是個塊級元素。
塊級元素：所有的容器級標簽，都是塊級元素，以及p標簽。
塊級元素和行內元素的相互轉換：
我們可以通過display屬性將塊級元素(比如div)和行內元素進行相互轉換。
display：inline;
那么這個標簽將變為行內元素，即：
1，此時這個div將不能設置寬度和高度了。
2，此時這個div可以和其他行內元素并排了。
同樣的到了我們也可以用display將行內元素(比如span)轉行成塊級元素。
display：block；
那么這個span標簽將變為塊級標簽，即：
1，此時這個span能夠設置寬度，高度。
2，此時這個span必須獨占一行，其他元素無法與之并排。
3，如果不設置寬度，將占滿父級。
標準流里面的限制非常多，導致很多頁面效果無法實現，如果我們現在就要并排，并且就要設置寬度，就hi有：脫離標準流。
CSS一共有三種手段，是一個元素脫離標準流文檔：
浮動
絕對定位
固定定位
浮動：
浮動是CSS里面布局最多的一個屬性。
float：表示浮動的意思。
屬性：
none：表示不浮動，默認。
left：表示左浮動。
rigth：表示右浮動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
/*margin: 0;*/
}
.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;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>路飛</span>
</body>
</html>
例子
我們會發現，三個元素并排顯示，.box1和span因為是左浮動，所有緊挨在一起，這種現象是貼邊現象。
.box2盒子因為是右浮動，所以緊靠著右邊。
浮動的四大特性：
1，浮動的的元素脫標，
2，浮動的元素互相貼靠。
3，浮動的元素由"子圍"效果。
4，收縮的效果。
浮動元素的脫標：
脫標：就是脫離了標準文檔流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: yellow;
}
span{
float: left;
width: 300px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">小紅</div>
<div class="box2">小黃</div>
<span>顧清秋</span>
<span>顧清秋</span>
</body>
</html>
例子
效果：紅色的盒子蓋住了黃色的盒子，一個行內的span標簽，竟然能夠設置寬高了。
原因1：小紅設置了浮動，而小黃并沒有設置浮動，小紅脫離了標準文檔流，其實就是他不在頁面中占據位置了，此時瀏覽器認為小黃是標準文檔流的第一個盒子，所以就渲染到了頁面中的第一個位置上，這種現象，也有一種叫法：浮動元素"飄起來了"。
原因2：所有的標簽一旦設置浮動，就能夠并排且不區分塊元素或行內元素，換言之，能夠設置寬高了。
浮動元素互相貼靠：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 300px;
height: 300px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">小紅</div>
<div class="box2">小黃</div>
<div class="box3">小綠</div>
</body>
</html>
例子
效果發現：如果父元素有足夠的空間，那么小綠就會緊靠小黃，小黃緊靠小紅，小紅靠著邊。
如果沒有足夠的空間，小綠那么就會靠著小紅，若沒有足夠的空間靠著小紅，就會自己靠邊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
border:1px solid black;
}
.box1{
width: 100px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 450px;
float: left;
background-color: yellow;
}
.box3{
width: 80px;
height: 300px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">小紅</div>
<div class="box2">小黃</div>
<div class="box3">小綠</div>
</div>
</body>
</html>
例子
浮動元素字圍效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin:0;
}
div{
float: left;
}
p{
background-color: # 666;
}
</style>
</head>
<body>
<div class="d1"><img src=" ../../images/1.jpg" alt="圖片"></div>
<p >顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</p>
</body>
</html>
例子
效果發現：所謂的字圍效果，當div浮動，p不浮動，div遮蓋了p,div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果。
浮動元素緊湊效果：
收縮：一個浮動元素，如果沒有設置width，那么就自動收縮為文字的寬度。（和行內元素很像）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>緊湊效果</title>
<style>
div{
float: left;
background-color: red;
}
</style>
</head>
<body>
<div>顧清秋</div>
</body>
</html>
例子
謹記：關于浮動，一定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一起浮動。另外，有浮動，一定要清楚浮動。
為什么要清楚浮動：
在頁面布局的時候，每個結構中的父元素的高度，我們一般不會設置。
大家想，如果我第一版的頁面的寫完了，感覺非常爽，突然隔了一個月，老板說頁面某一塊的區域，我要加點內容，或者我覺得圖片要縮小一下。這樣的需求在工作中非常常見的。真想打他啊。那么此時作為一個前端小白，肯定是去每個地方加內容，改圖片，然后修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是肯定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮動，父級一般不設置高度*/
}
.box1{
width: 200px;
height: 500px;
float: left;
background-color: red;
}
.box2{
width: 300px;
height: 200px;
float: left;
background-color: green;
}
.box3{
width: 400px;
height: 100px;
float: left;
background-color: blue;
}
.father{
width: 1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
例子
效果發現：如果不給.father一個高度，那么浮動子元素是不會填充父盒子的高度，那么.father2的盒子就會占據第一個位置，影響頁面布局。
那么我們知道，浮動元素確實能實現我們頁面元素并排的效果，這是它的好處，同時它還帶來了頁面布局極大的錯亂！！！所以我們要清除浮動！
清除浮動的方法：
1，給父盒子設置高度。
2，clear：both;
3，偽元素清除法
4，overflow：hidden；
給父盒子設置高度：
使用不靈活，會固定父盒子的高度。
clear：both；
clear：意思就是清楚的意思。
有三個值：
left：當前元素左邊不允許有浮動元素，
rigtht：當前元素右邊不允許有浮動元素。
both：當前元素的左右兩邊都不允許有浮動元素。
給浮動元素后面加一個空的div，并且該元素不浮動，然后設置clear：both。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color:red;
}
.clear{
width: 200px;
height: 200px;
background-color: yellow;
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="clear"></div>
</body>
</html>
例子
偽元素清除法(常用)：
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，然后設置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color:red;
}
.clear{
width: 200px;
height: 200px;
background-color: yellow;
/*clear:both;*/
}
.clearfix:after{
content: '.';
height: 0;
clear:both;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>python</li>
<li>web</li>
<li>linux</li>
</ul>
</div>
<div class="clear"></div>
</body>
</html>
例子
overflow:hidden(常用)：
overflow屬性規定當內容溢出元素框時，發生的事情。
屬性值：
visible：默認值，內容不會被修剪，會呈現在元素框之外。
hidden：內容會被修剪，并且其余內容是不可見的。
scroll：內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto：如果內容被修剪，則瀏覽器會顯示滾動條以便利查看其余內容。
inherit：規定應該從父元素繼承overflow屬性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
overflow: scroll;
}
div{
width: 100px;
height: 100px;
overflow: inherit;
}
</style>
</head>
<body>
<div>顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋顧清秋</div>
</body>
</html>
例子
總結
- 上一篇： git 清除所有历史记录
- 下一篇： python脚本编写（纯干货）