image.png
image.png
<html>
<head>
<title>css盒子模型</title>
<meta charset="UTF-8"/>
<!--
css的盒子模型学习：
div标签：
块级标签：主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点：
默认宽度是页面的,但是可以设置。
高度默认是没有的，但是可以设置。
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
盒子模型：
外边距：margin
作用：用来设置元素和元素之间的间隔
居中设置：margin:auto;上下间隔是0px，水平居中。
可以根据需求单独的设置上下左右的外边距
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小
设置宽和高即可改变内容区域的大小。
-->
<style type="text/css">
img{
width: 49.53%;
}
#showdiv{
border: solid 100px;
width: 40%;
height: 400px;
margin-bottom: 10px;
margin:100px auto;
padding: 10px;
}
#div01{
border:dashed 3px orange;
width: 40%;
height: 200px;
margin :auto;
}
</style>
</head>
<body>
<div id="showdiv">
<img src="img/a1.jpg"/>
<img src="img/a1.jpg"/>
</div>
<div id="div01">
</div>
</body>
</html>
