- 文档流(normal flow)
-
网页是一个多层的结构,一层摞着一层
-
通过CSS可以分别为每一层来设置样式
-
作为用户来讲只能看到最顶上一层
-
这些层中,最底下的一层称为文档流,文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列 -
对于我们来元素主要有两个状态
在文档流中 不在文档流中(脱离文档流)
元素在文档流中有什么特点:
块元素
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中左向右水平排列,如果一行之中不能容纳下所有的行内元素, 则元素会换到第二行继续自左向右排列(书写习惯一致)
- 行内元素的默认宽度和高度都是被内容撑开
- 盒模型
盒模型、盒子模型、框模型(box model)
- CSS将页面中的所有元素都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
- 每一个盒子都由一下几个部分组成:
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
内容区(content)
- 元素中的所有的子元素和文本内容都在内容区中排列
- 内容区的大小由width 和 height两个属性来设置
width 设置内容区的宽度
height 设置内容区的高度
边框(border)
边框属于盒子边缘,边框里边属于盒子内部,出了边框都是盒子的外部
- 边框的大小会影响到整个盒子的大小
- 要设置边框,需要至少设置三个样式:
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
2.1盒模型-边框
边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
border-width: 10px;
-
默认值,一般都是 3个像素
-
border-width可以用来指定四个方向的边框的宽度 值的情况 四个值:上 右 下 左 三个值:上 左右 下 两个值:上下 左右 一个值:上下左右
-
除了border-width还有一组 border-xxx-width xxx可以是 top right bottom left 用来单独指定某一个边的宽度
border-width: 10px;
border-top-width: 10px;
border-left-width: 30px;
border-color用来指定边框的颜色,同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值
border-color: orange red yellow green;
border-color: orange;
-
border-style 指定边框的样式 solid 表示实线 dotted 点状虚线 dashed 虚线 double 双线 border-style的默认值是none 表示没有边框