盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • Content(内容) - 盒子的内容，显示文本和图像。 
      <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		#div1{width: 500px;height: 500px;background: lightblue;overflow: hidden;
			/*border-top-width: 5px;
			border-top-color: red;
			border-top-style: solid;*/
			border: 5px solid red;
			
			border-radius: 50%;
		}
		#div2{width: 100px;height: 100px;background: lightseagreen;margin-left: 50px;margin-top: 50px;
			/*margin: 50px 0 0 50px;*/
			/*上，右，下左*/			
			/*margin: 10px 20px 30px;*/
			上，左右，下
			/*margin: 10px 20px;*/
			/*上下，左右*/
			/*margin: 10px;*/
			/*四个方向*/
			margin: 50px auto 0;}
	</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
<span>dchsdfhs</span>
</body>
</html>

      　double双实线

      dotted点虚线
    • solid实线
dashed 线段虚线
border-top-left-radius: 500px;/*左上角变成弯曲的角，数字越大越圆*/
posted @ 2021-11-21 23:05  王湘婷  阅读(21)  评论(0)    收藏  举报