一、什么是文档流?
- 网页是一个多层结构,一层摞着一层
- 通过css可以设置每一层的样式
- 我们能够看到的是网页的最上一层
- 在这些层中最底下的一层称为文档流,文档流是网页的基础
- 元素默认是在文档流中进行排列的
- 简单地说文档流就是网页的一个位置,它位于网页的最底层
二、元素的主要状态
- 在文档流中
- 脱离文档流
三、元素在文档流中的特点
块元素在文档流中的特点
- 会在页面中独占一行,自上向下垂直排列
- 宽度默认是父元素的100%
- 高度默认是被内容撑开
行内元素在文档流中的特点
- 不会独占一行,在页面中自左向右水平排列(一行容纳不下时会自动换行)
- 宽度和高度默认是被内容撑开
盒子模型
css将页面中的所有元素都设置为一个矩形的盒子
将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
盒子的组成部分
-
内容区(content)
width: 100px; height: 100px; background-color: #f00; /*此时内容区大小为100px * 100px*/
-
边框(border)
border: 1px solid #ff0; /* border: 1px dotted #ff0; border: 1px dashed #ff0; */ /*可设置top、right、bottom、left四个方向的值*/
-
内边距(border)
padding: 1px; padding: 1%; /*可设置top、right、bottom、left四个方向的值 当设置为%比时参照于父元素的宽度*/
-
外边距(margin)
margin:10px; /* 可设置top、right、bottom、left四个方向的值 负值会向相反方向移动 不会影响盒子可见框的大小 会影响盒子的位置 设置left、top、会移动自身 设置right、bottom会移动其他元素 */
块元素的标准盒模型
box-sizing:content-box;
盒子的可见框大小:
由内容区、内边距、和边框共同决定
盒子的实际大小:
由内容区、内边距、边框、外边距共同决定
.div2{
box-sizing: content-box;
width: 100px;
height: 100px;
background-color: #f00;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
行内元素的标准盒模型
- 行内不支持设置宽度和高度
- 行内元素可以设置padding,会覆盖住下面的兄弟元素
- 可以设置border,会覆盖住下面的兄弟元素
- 可以设置margin,不会覆盖住下面的兄弟元素
边框盒模型
特点:
- padding、border、不会撑开盒子
- 盒子可见模型只由内容区决定,(把内边距、边框的计算方式放进内容区里了),会把盒子变小
盒子的可见框大小=盒子的实际大小
-
由内容区决定
.div1{ box-sizing: border-box; width: 100px; height: 100px; background-color: #bfa; padding: 10px; border: 1px solid #000; margin: 20px; }
垂直外边距重叠问题
-
兄弟元素
相邻的兄弟元素垂直外边距会取两者之间的较大者
如果使一正一负的值取两者的和
都是负值时取两者中绝对值较大的
.div1{ width: 400px; height: 400px; background-color: #f00; margin-bottom: 10px; } .div2{ width: 100px; height: 100px; background-color: #ff0; margin-top: 20px; /* 此时两者的外边距为20px */ }
-
父子元素
父子元素间的外边距,子元素会传递给父元素
会影响页面布局
.father{ width: 400px; height: 400px; background-color: #f00; } .son{ width: 100px; height: 100px; background-color: #ff0; margin-top: 100px; }
解决方式:
<style>
.father{
width: 400px;
height: 400px;
background-color: #f00;
}
.son{
width: 100px;
height: 100px;
background-color: #ff0;
margin-top: 100px;
}
.clearfix::after,
.clearfix::before{
/* //将他显示为一个表格,(表格有边框,可以将父子元素的外边距隔开),解决重叠问题 要给折叠的父元素/失去高度的元素设置 */
display: table;
content:"";
clear:"both";
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son "></div>
</div>
</body>