一、CSS盒子模型
概念:
盒子模型四部分组成:内容、边框(border)、内边距(padding)、外边距(margin)
内容:盒子里面的文字和图片等元素组成内容
边框:指的是盒子的厚度
内边距:盒子内容与边框之间的距离
外边距:盒子与盒子之间的距离
1、边框 border
- 语法:
border : border-width ||border-style ||border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位px |
border-style | 边框的样式 |
border-color | 边框颜色 |
-
边框的样式
none:没有边框(默认)
solid:边框为单实线(最常用的)
dashed:边框为虚线
dotted:边框为点线 -
代码
<style >
div{
width: 300px;
height: 200px;
/*线的粗细*/
border-width: 10px;
/*border-style:solid实线;dashed 虚线 dotted 点线*/
border-style: solid;
border-color: black;
}
</style>
边框简写:border: 10px dotted yellow;
三个属性没有先后顺序。
- 边框的样式写法
上边框 | 下边框 | 左边框 | 右边框 |
---|---|---|---|
border-top-style 样式 | border-bottom-style 样式 | border-left-style 样式 | border-right-style 样式 |
border-top-width 宽度 | border-bottom-width 宽度 | border-left-width 宽度 | border-right-width 宽度 |
border-top-color 颜色 | border-bottom-color 颜色 | border-left-color 颜色 | border-right-color 颜色 |
(重点)border-top:样式 宽度 颜色 | border-bottom:样式 宽度 颜色 | border-left:样式 宽度 颜色 | border-right:样式 宽度 颜色 |
举例代码:
div{
width: 200px;
height: 100px;
/*先写大的,后些小的*/
border :none;
border-top:1px black solid;
border-left: 1px yellow solid;
border-right: 1px green solid;
border-bottom: 1px blue solid;
}
border-collapse:collapse;(合并的意思)表示相邻边框合并在一起
/*相邻边框合并在一起,让边框变细一点,实现 1 + 1 = 1 的效果*/
border-collapse: collapse;
2、内边距 padding
- 概念
内边距(padding):是指边框与内容之间的距离。 - 设置
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
当我们给盒子指定padding之后,发生了2件事情:
- 内容和边框有了距离,添加了内边距
- 对盒子的影响:盒子会变大了
/*内边距的距离:赋值顺序为 上右下左 顺时针*/
padding: 10px 20px 30px 5px;
padding赋值个数不同,表达的意思不同:
值的个数 | 表达意思 |
---|---|
1个值 | padding:上下左右 内边距 |
2个值 | padding:上下内边距 左右内边距 |
3个值 | padding:上内边距 左右内边距 下内边距 |
4个值 | padding:上 右 下 左 顺时针赋值 |
举例子:新浪官网的导航栏
<!DOCTYPE html>
<html>
<head>
<title>新浪网导航栏</title>
<style >
.nav
{
/*设置盒子的高度*/
height: 41px;
/*设置盒子的背景颜色*/
background-color: #FCFCFC;
/*设置上下边框的属性*/
border-top: #ff9900 3px solid;