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