一、CSS盒子模型（Box Model）
- 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子， 封装周围的HTML元素，它包括:边距(margin),边框(border) ，填充(padding) ,和实际内容(content) 。
- 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
二、组成部分
三、标准盒模型实际宽度
标准盒模型的实际宽度：
width+padding+border+margin
- 块级元素默认宽度为100%，行内元素默认宽度由内容撑开，高度默认都由内容撑开
- 块级元素可以设置高，行内元素设置高不生效
四、边框
五、内边距
六、外边距
七、解决margin-top问题
问题：第一个块级子元素设置margin-top时，父元素会跟着一直往下走
解决：
- 父元素加
overflow：hidden - 父元素或者子元素设置浮动
- 父元素加
border：1px solid transparent - 父元素加
padding-top:1px
<style> .box { width: 200px; height: 200px; background-color: red; /* 父元素加overflow */ overflow: hidden; } .box1 { width: 100px; height: 100px; background-color: pink; margin-top: 50px; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body>
