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