盒模型
盒子的组成：
margin 外边距 与其他盒子之间的距离
border 边框
padding 内边距 边框与内容之间的距离
content 内容（到页面的内容） 内容的宽度和高度
圆角边框 border-radius:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> #div1{ width: 500px;height: 500px;background: lightblue; /*border-top-width: 5px; border-top-color: red; border-top-style: solid;*/ border-top: 5px solid red ; /*solid 实线 double 双实线 dotted 点虚线 dashed 线段虚线*/ border-top-left-radius: 20px; border-bottom-right-radius:20px ; } #div2{ width: 100px; height: 100px;background: lightgreen; /*margin-left: 50px; ,margin-top: 50px;*/ margin: 50px 0 0 50px; /*上 右 下 左 */ margin: 10px 20px 20px; /*上 左右 下*/ margin: 10px 20px ; /*上下 左右*/ margin: 10px; /*四周*/ margin: 50px auto 0; } </style> <title> </title> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
