盒模型
width
height
border
padding
margin
浏览器会给元素一个默认样式，一般我们会重置浏览器默认样式
* {padding: 0; margin: 0}
注意 1 行内元素没有上下外边距 也没有上内边距
2 外边距合并 垂直的块级盒子以最大的外边距为准(外边距塌陷)
3 对于两个嵌套关系的块元素，假如父亲没有上内边距和边框，
则父亲的上外边距和儿子的上外边距发生合并
解决方案 1 给父亲加overflow:hidden 2 给父亲加上内边距或上边框
盒子尺寸
01居中.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center; /*文字水平居中*/ margin: 10px auto; /* 盒子居中*/ } section { width: 400px; height: 400px; border: 1px solid red; } section img { width: 200px; height: 210px; margin-left: 100px; margin-top: 95px; } aside { width: 400px; height: 400px; border: 1px solid pink; background: #fff url(xd.jpg) no-repeat; background-size: 200px 210px; /* 背景图更改位置 用background-position*/ background-position: 100px 95px; } </style> </head> <body> <div>文字水平居中</div> <section> <!--插入图片水平居中 图片也是一个盒子 用margin或padding设置--> <img src="xd.jpg" alt=""> </section> <aside> </aside> </body> </html>
