基于CSS盒子模型及其CSS定位詳解
CSS盒子模型
CSS盒子模型:
div標(biāo)簽:
塊級標(biāo)簽: 主要用于網(wǎng)頁布局用的,會將其中的子元素內(nèi)容作為一個(gè)獨(dú)立的整體存在
特點(diǎn):
默認(rèn)寬度是頁面的寬度,但是可以設(shè)置
高度默認(rèn)是沒有的,但是可以設(shè)置,頂開
如果子元素設(shè)置了百分比的寬或者高,占據(jù)的是div的百分比,而不是頁面的
盒子模型:
外邊距:
margin
作用:
用于設(shè)置元素與元素之間的間隔
居中設(shè)置:
margin: 0px auto 上下間隔0px,左右水平居中
可以根據(jù)需求單獨(dú)設(shè)置上下左右的外邊距
邊框:
border
作用:
用來設(shè)置邊框的代銷,線條種類,線條顏色
也可以單獨(dú)設(shè)置上下左右
內(nèi)邊距:
padding
作用:
設(shè)置內(nèi)容和邊框的距離
注意:內(nèi)邊距不會改變內(nèi)容區(qū)域的大小
也可以單獨(dú)設(shè)置上下左右的內(nèi)容邊距
內(nèi)容區(qū)域:
作用:
改變內(nèi)容區(qū)域的大小
直接在img里面設(shè)置width或者h(yuǎn)eight即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子模型</title>
<style>
img{
width: 49%;
height: 100px;
}
#showDiv{
border: solid 3px ;
width: 40%;
height: 200px;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 30px;
}
#div01{
border: dashed 3px orange;
width: 40%;
height: 200px;
margin-left: 30px;
}
</style>
</head>
<body>
<div id="showDiv">
<img src="../img/c8.jpg" alt="">
<img src="../img/c9.jpg" alt="">
</div>
<div id="div01">
</div>
</body>
</html>
效果顯示
圖片.png
盒子模型的簡單應(yīng)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型的簡單應(yīng)用</title>
<style>
div{
width: 300px;
height: 200px;
}
#header,#footer{
width: 650px;
margin-top:20px;
}
#div01{
border: solid 3px orange;
float: left;
margin-right:20px ;
}
#div02{
border: solid 3px salmon;
float: left;
}
#div03{
border: solid 3px red;
float: left;
margin-right:20px ;
}
#div04{
border: solid 3px blue;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div id="div01">
我是div01
</div>
<div id="div02">
我是div02
</div>
</div>
<div id="footer">
<div id="div03">
我是div03
</div>
<div id="div04">
我是div04
</div>
</div>
</body>
</html>
效果顯示:
圖片.png
CSS定位
CSS定位:
position:
相對定位:relative
作用:
相對元素原有位置的距離(相對的自己的原有位置)
可以使用top left,right,bottom 來進(jìn)行設(shè)置
注意:
其他元素的位置是不變的
絕對定位: absolute
作用:
可以使用元素參照界面或者相對父元素來進(jìn)行移動
注意:
如果父元素成為參照元素,必須使用相對定位屬性
默認(rèn)情況下是以界面為基準(zhǔn)進(jìn)行移動的
固定定位:
fixed
作用:
將元素固定位頁面上的固定位置,不會隨著滾動條的移動而改變
以上定位都是使用top,left,right,bottom
z-index:此屬性是用來顯示元素的優(yōu)先級別的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css定位</title>
<!--聲明css代碼域-->
<style>
#div01{
border: solid 2px orange;
height: 200px;
width: 600px;
margin-top: 20px;
margin-bottom: 10px;
position: relative;/*給div01添加相對定位成為其子元素絕對定位的參照元素*/
}
#showDiv01{
border: solid 3px ;
height: 50px;
width: 50px;
position: absolute;/*子元素相對父元素的絕對位置定位*/
top: 20px;
}
#div02{
border: dashed 2px red;
height: 200px;
width: 600px;
position: relative;
left: 50px;
top: 100px;
background-color: coral;
z-index: 3;/*頁面顯示的優(yōu)先級*/
}
#div03{
border: solid 2px blue;
height: 200px;
width: 600px;
position: relative;
z-index: 2;
background-color: gray;
}
#div04{
border: solid 2px olivedrab;
height: 93px;
width: 93px;
position: fixed;/*固定的滾動二維碼或者邊框*/
top: 500px;
left: 1000px;
}
</style>
</head>
<body>
<div id="div01">
<div id="showDiv01">
</div>
我是div01</div>
<div id="div02"> 我是div02</div>
<div id="div03"> 我是div03</div>
<div id="div04"><img src="../img/bbu.png" alt=""></div>
</body>
</html>
效果顯示
圖片.png
