目录
文档流
在说盒子模型之前,先介绍一个文档流的概念:
文档流(normal flow)是一个多层结构,通过CSS可以分别为每一层来设置样式,作为用户只能看到最上边的一层,而最底下的一层就被称为文档流。
- 所有的元素有两个状态:
在文档流中
和不在文档流中
在文档流中的元素特点:
- 块元素:
-独占一行、自上而下垂直排列
-默认宽是父元素的全部(把父元素占满)
-高度被子元素撑开 - 行内元素:
-不会独占一行(自左而右水平排列,如果一行只能怪容纳不了所有,则会换行继续从左往右排列)
-默认宽度/高度都是被内容撑开
盒子模型
CSS将界面中所有的元素都设置为一个矩形的盒子,每个盒子由以下几部分组成:
- 内容区:元素的所有子元素+文本内容
-width/height
是用来设置内容区的大小的 - 内边距:内容区和边框的距离
- 边框:盒子的边缘,会影响盒子的大小
- 外边距:确定盒子的位置
一、边框(border)
简写语法一:border(border-width border-color border-style)
比如:border(10px orange solid)。每个属性之间用空格隔开,不分先后顺序。
简写语法二:border-xxx(border-width border-color border-style)
,其中xxx可以代表 top、right、bottom、left
这里共有三个属性,缺一不可。它们也可以分开来单独设置:
1
.border-width:指定四个方向边框的宽度
- 有默认值,为3px
- 可以对四个边设置不同参数值:
-border-width(上边框 右边框 下边框 左边框)
-border-width(上边框 左/右边框 下边框)
-border-width(上/下边框 左/右边框)
-border-width(上/下/左/右边框)
2
.border-color:指定边框的颜色
- 有默认值,默认使用color值
- 和border-width一样可以对四个边设置不同参数值
3
. border-style:指定边框的样式,默认值为none
- solid–实线、dotted–点状虚线、dashed–虚线、double–双线
- 和border-width一样可以对四个边设置不同参数值
4
. 其他
- 也可单独指定某一个边:
border-xxx-width/color/style
,其中xxx可以代表 top、right、bottom、left - 单独一个边不加边框:
border-right:none
二、内边框(padding)
简写语法一:padding(padding-top padding-right padding-bottom padding-left)
,按照上右下左这样顺时针的顺序设置四个方向的内边距
简写语法二:padding(padding-value)
,所有的内边框都为paddin-value
- 内边距的设置会影响内容区的大小
- 背景颜色会延伸到内边距
- 可见宽:指一个盒子得可见大小,是由
内容区+内边距+边框的
和来决定
三、外边距(margin)
简写语法一:margin(margin-top margin-right margin-bottom margin-left),按照上右下左这样顺时针的顺序设置四个方向的外边距 简写语法二:
margin(padding-value)`,所有的内边框都为paddin-value
- 不会影响盒子的可见大小,但会影响盒子的位置,元素在页面中自左向右排列。
- 对于top、right、bottom、left这三个值来说:
-如果为正值,设置左上的值,会移动元素本身;设置下右,会移动其他元素
-如果为负值,则规则一样,但该移动的元素会向相反的方向移动 - margin-right 的特殊性——特殊性主要体现在这篇博客介绍的水平布局情况中,一般自己设置它的数值,不会有任何效果
四、代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Surymy</title>
<style>
.box1{
/* 设置内容区样式 */
width:200px;
height:100px;
background-color:#bfa;
/* 设置边框样式 */
border:10px #abc solid;
padding:30px;
margin:20px;
}
</style>
</head>
<body>
<div class="box1">
<div>Hello!</div>
</div>
</body>
</html>