盒模型
width
height
border
padding
margin
浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式
* {padding: 0; margin: 0}
注意 1 行内元素没有上下外边距 也没有上内边距
2 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌陷)
3 对于两个嵌套关系的块元素，假如父亲没有上内边距和边框，
则父亲的上外边距和儿子的上外边距发生合并
解决方案 1 给父亲加overflow:hidden 2 给父亲加上内边距或上边框
盒子尺寸
04盒子尺寸计算.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 100px; height: 100px; background-color: red; border: 4px solid #ccc; padding: 20px; margin: 40px; /* 空间尺寸 width+padding+border+margin 内含实际尺寸 width+border+padding */ } </style> </head> <body> <div></div> </body> </html>
05学会盒子尺寸计算.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 44px; height: 33px; line-height: 33px; border: 1px solid #ccc; margin: 200px; font-size: 16px; color: #666; border-radius: 5px 0 0 5px; padding-left: 15px; } </style> </head> <body> <div>新闻</div> </body> </html>