零基础入门前端系列—盒子模型（十四）
Posted 王同学要努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了零基础入门前端系列—盒子模型（十四）相关的知识，希望对你有一定的参考价值。
【零基础入门前端系列】—盒子模型（十四）
一、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>
以上是关于零基础入门前端系列—盒子模型（十四）的主要内容，如果未能解决你的问题，请参考以下文章
CSS 零基础到实战（05）布局盒子模型弹性盒子前端就业课 第二阶段
CSS 零基础到实战（05）布局盒子模型弹性盒子前端就业课 第二阶段