https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！ 欢迎关注微信公众号：宝藏女孩的成长日记 如有转载，请注明出处（如不注明，盗者必究）
内容(content)、填充(padding通俗讲就是内边距)、边框(border)、边界(margin通俗讲就是外边距)。
用图片来演示一下 简单用画图工具演示一下就是
定义盒子的宽度和高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 100px; background-color: blue; } </style> </head> <body> <div id="box1"> Hello, I am box1 </div> </body> </html>运行结果 注意：只有块元素才可以设置宽度和高度，行内元素无法设置宽度和高度。
参数： none : 无边框 dotted : 点线边框 dashed : 虚线边框 solid : 实线边框 double : 双线边框
检索或设置对象的边框颜色。 语法：
border-color : color语法：
border : border-style||border-width|| border-color例如我要设置 p标签的边框为： 线型实线 ， 宽度20px ， 颜色为红色
p { border: solid 20px red; }检索或设置对象的上边框。这是一个复合属性。 语法：
border-top: border-style||border-width||border-color例如我要设置 p标签的上边框为： 线型实线 ，宽度20px ， 颜色为红色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 100px; border-top: solid 20px red; } </style> </head> <body> <div id="box1"> Hello, I am box1 </div> </body> </html>运行效果
检索或设置对象的下边框。这是一个复合属性。 语法：
border-bottom :border-style||border-width||border-color比如我要设置 p标签的下边框为： 宽度2px ， 线型实线 ， 颜色为红色 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 100px; border-bottom: 20px solid red; } </style> </head> <body> <div id="box1"> Hello, I am box1 </div> </body> </html>运行效果
左边框 border-left、右边框 border-right同上
检索或设置对象四边的内边距，换句话说，也就是边框与内容之间的距离。 语法：
padding :length例如我要边框与内容之间的距离为50px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 100px; border: 20px solid red; padding: 50px; } </style> </head> <body> <div id="box1"> Hello, I am box1 </div> </body> </html>运行效果
注意： 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
检索或设置对象的上边内边距。 语法：
padding-top :length <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 300px; border: solid 20px red; padding-top: 100px; } </style> </head> <body> <div id="box1"> Hello, my padding-top is 50px </div> </body> </html>运行结果
检索或设置对象的下边内边距。 语法：
padding-right:length <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; border: solid 20px red; padding-bottom: 100px; } </style> </head> <body> <div id="box1"> Hello, my padding-bottom is 100px Hello, my padding-bottom is 100px Hello, my padding-bottom is 100px Hello, my padding-bottom is 100px Hello, my padding-bottom is 100px Hello, my padding-bottom is 100px </div> </body> </html>运行结果
左边内边距padding-left、右边内边距padding-right同上
检索或设置对象四边的外边距。 语法：
margin:length <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 350px; height: 200px; border: solid 20px red; padding: 2px; margin: 50px; } </style> </head> <body> <div id="box1"> I didn't say anything. I just walked away. You're the light, you're the night You're the color of my blood You're the cure, you're the pain You're the only thing I wanna touch Never knew that it could mean so much, so much You're the fear, I don't care 'Cause I've never been so high Follow me to the dark Let me take you past our satellites </div> </body> </html>运行结果
注意： 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上－下，第二个用于左－右。 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
外边距在不同浏览器的效果会有很大不同，建议尽量少用。
检索或设置对象的上边外边距。 语法：
margin-top :length <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 350px; height: 200px; border: solid 20px red; padding: 2px; margin-top: 50px; } </style> </head> <body> <div id="box1"> I didn't say anything. I just walked away. You're the light, you're the night You're the color of my blood You're the cure, you're the pain You're the only thing I wanna touch Never knew that it could mean so much, so much You're the fear, I don't care 'Cause I've never been so high Follow me to the dark Let me take you past our satellites </div> </body> </html>运行结果
检索或设置对象的下边外边距。 语法：
margin-bottom :length <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 350px; height: 200px; border: solid 20px red; padding: 2px; margin-bottom: 50px; } #box2{ width: 350px; height: 200px; background-color: blue; } </style> </head> <body> <div id="box1"> I didn't say anything. I just walked away. You're the light, you're the night You're the color of my blood You're the cure, you're the pain You're the only thing I wanna touch Never knew that it could mean so much, so much You're the fear, I don't care 'Cause I've never been so high Follow me to the dark Let me take you past our satellites </div> <div id="box2"> </div> </body> </html>运行结果
左边外边距 margin-left、左边外边距 margin-left同上
要把页面布局好，需要注意：
页面由很多个盒子，从上往下堆积。外层的这些盒子是独立的。我们布局的时候，外层的盒子最好不要设置浮动，也不要设置为绝对定位。盒子一般不设置高度，它的高度一般由内容来撑高。每个外层的盒子需要设置宽度（这个宽度叫版心），并且要将这些盒子在水平方向居中。把每个模块外层的容器设置为相对定位。可以作为里面每个元素定位的参考。把外层容器设置为相对定位之后，它也不会脱离标准流，不会影响布局。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrapper{ background-color: green; width: 1200px; margin: 0 auto; margin-bottom: 4px; } #box1{ width: 200px; height: 300px; border:solid 20px red; padding-left: 100px; } #box2{ width:100px; height: 100px; background-color: seagreen; cursor: move; /* display: none; *//*元素隐藏后，不占位置*/ /*visibility: hidden;*/ /*这种隐藏也会占着位置*/ /*opacity: 0;*/ /*通过设置不透明度去隐藏一个元素，元素隐藏后，位置还占着*/ } #box3{ width:100px; height: 100px; background-color:darkgoldenrod; cursor: move; } </style> </head> <body> <div class="wrapper"> 1 </div> <div class="wrapper"> 2 </div> <div class="wrapper"> 3 </div> <div class="wrapper"> 4 </div> <div class="wrapper"> 5 </div> <div class="wrapper"> 6 </div> <div id="box1"> <div id="box2"></div> <div id="box3"></div> </div> </body> </html>附加：如何隐藏一个元素？
看上面的代码和注释就知道了！把注释去掉，拿去运行运行！希望可以帮到你哈哈哈
