margin外边距，border边框，padding内边距 先看以下代码：和上一节不同，这里将css单独放在head中。浏览器会为不同的标签类型在css代码中选择合适的style。 <head><me
margin外边距，border边框，padding内边距
先看以下代码：和上一节不同，这里将css单独放在head中。浏览器会为不同的标签类型在css代码中选择合适的style。
<head> <meta charset="UTF-8"> <title></title> <style> body { background: green; } div { width: 300px; height: 300px; padding: 50px; border: 50px solid yellow; margin: 50px; background: blue; color: red } </style></head><body> <div> 内容区域 300像素x300像素<br> 内容区域 300像素x300像素<br> 内容区域 300像素x300像素<br> 内容区域 300像素x300像素<br> </div></body>如下图为运行效果，红色方框是由画图软件添加的，用于示意
- margin为外边距，显示父级元素（body）的背景色（绿色）
- boader为边框为黄色，可以定义单独的颜色和样式（solid, dashed, dotted）
- padding为内边距，为红色方框之外的蓝色区域，显示div自己的背景色（蓝色），
- 内容区域在红色方框以内，为300像素x300像素
margin的重叠
相邻的普通元素，上下边距，并非简单的相加。
而是取其中较大的边距值，这种现象叫做margin重叠
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #test1{ height: 100px; background: blue; margin-bottom: 50px; } #test2{ height: 100px; background: green; margin-top: 50px; }</style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body></html>代码生成图：
如何用border画三角形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title><style> div{ width: 0px; height: 0px; border-top: 200px solid pink; border-right: 200px solid yellow; border-bottom: 200px solid green; border-left: 200px solid blue; }</style> </head> <body> <div></div> </body></html>代码效果图：
