文章目录
1、文档流(normal flow)
- 网页是一个多层的结构,一层摞着一层,通过CSS可以为每一层来设计样式,作为用户只能看到最顶上的一层,而在这些层中,最底下的一层成为文档流,文档流是网页的基础,我们所创建的元素默认都是在文档流中进行排列的
- 对我们而言,元素主要有两个特点:在文档流中,不在文档流中(脱离文档流)。
- 元素在文档流中的特点:
- 块元素:
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容撑开(子元素)
- 行内元素:
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中自左向右水平排列,如果一行中不能容纳所有的行内元素时,元素会换到第二行自左向右排列
- 行内元素的默认宽度与高度都是被内容撑开
- 块元素:
2.盒子模型—介绍
- CSS将页面中的每个区域都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子之后,对页面的布局就变成了将不同的盒子摆放到不同的位置
- 每一个盒子都由以下几个部分组成:
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
内容区(content):
元素中所有的子元素和文本内容都在内容区中排列着,内容区的大小由width
和height
两个属性来设置
width
设置内容区的宽度height
设置内容区的高度
边框(border):
边框属于盒子边缘,边框里面属于盒子内部,出了边框就是盒子外部。边框的大小会影响到整个盒子的大小,要想设置边框,至少要设置三个样式:
- 边框的宽度:
border-width
- 边框的颜色:
border-color
- 边框的样式:
border-style
.box1{
/* 内容区 */
width: 200px;
height: 200px;
background-color: #bfa;
/* 边框 */
border-width: 10px;
border-color: chocolate;
border-style: solid;
}
3.盒子模型—边框
-
边框的宽度:
border-width
-
默认值:一般都是3个像素
-
border-width可以用来指定四个方向的边框的宽度:
值的个数 值的情况 四个值 上 右 下 左 三个值 上 左右 下 两个值 上下 左右 一个值 上下左右 -
除了border-width还有一组border-xxx-width:xxx,可以是top right bottom left,用来单独指定某一个边的宽度
-
-
边框的颜色:
border-color
- border-color用来指定边框的颜色,同样可以分别指定四个边的边框,规则和border-width一样
- border-color也可以省略不写,如果省略不写则自动使用color的颜色值
-
边框的样式:
border-style
- 默认值是none 表示没有边框
- solid 实线
- dotted 点状虚线
- dashed 虚线
- double 双线
-
border简写属性:通过该属性可以同时设置边框的所有相关样式,并没有顺序要求,除了border外还有四个border-xxx
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* 边框 */
border-color: chocolate;
border-style: solid;
}
.box2{
width: 200px;
height: 200px;
background-color:cyan;
/* 边框简写属性*/
border:double 10px chartreuse
}