基于CSS盒子模型及其CSS定位详解
CSS盒子模型
CSS盒子模型:
div标签:
块级标签: 主要用于网页布局用的,会将其中的子元素内容作为一个独立的整体存在
特点:
默认宽度是页面的宽度,但是可以设置
高度默认是没有的,但是可以设置,顶开
如果子元素设置了百分比的宽或者高,占据的是div的百分比,而不是页面的
盒子模型:
外边距:
margin
作用:
用于设置元素与元素之间的间隔
居中设置:
margin: 0px auto 上下间隔0px,左右水平居中
可以根据需求单独设置上下左右的外边距
边框:
border
作用:
用来设置边框的代销,线条种类,线条颜色
也可以单独设置上下左右
内边距:
padding
作用:
设置内容和边框的距离
注意:内边距不会改变内容区域的大小
也可以单独设置上下左右的内容边距
内容区域:
作用:
改变内容区域的大小
直接在img里面设置width或者height即可
<!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
盒子模型的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型的简单应用</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 来进行设置
注意:
其他元素的位置是不变的
绝对定位: absolute
作用:
可以使用元素参照界面或者相对父元素来进行移动
注意:
如果父元素成为参照元素,必须使用相对定位属性
默认情况下是以界面为基准进行移动的
固定定位:
fixed
作用:
将元素固定位页面上的固定位置,不会随着滚动条的移动而改变
以上定位都是使用top,left,right,bottom
z-index:此属性是用来显示元素的优先级别的
<!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;/*页面显示的优先级*/
}
#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
