初识2-盒模型
摘要:边框border,外边距margin,内边距padding,他们的属性赋值顺序,上右下左
提示:运行在浏览器后,按F12检查网页源码,点击elements,出现图形化界面,更好地理解
注意:行元素,块元素的高宽,margin,padding容易给初学者带来误解,建议先用块元素div,来体会盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒模型</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
/* 设置边框的宽度,样式,颜色 */
/* border: 1px solid black; */
border-width: 1px;
border-style: solid;
background-color: red;
/* 设置外边距:上10px,右20px,下30px,左40px */
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
/* 设置外边距,顺序:上右下左 */
/* margin: 10px 20px 30px 40px; */
/* 设置外边距,上右下左都是10px */
margin: 10px;
/* 设置外边距,上下是20px,左右是40px */
/* margin: 20px 40px; */
/* 设置内边距,上10px,右20px,下30px,左40px */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>