目录
学习目标
- 能够准确阐述盒子模型的4个组成部分
- 能够利用边框复合写法给元素添加边框
- 能够计算盒子的实际大小
- 能够利用盒子模型布局模块案例
- 能够给盒子设置圆角边框
- 能够给盒子添加阴影
- 能够给文字添加阴影
学习内容
- 盒子模型
- PS 基本操作
- 综合案例
- 圆角边框
- 盒子阴影
- 文字阴影
盒子模型
页面布局三大核心:盒子模型、浮动、定位
学好盒子模型能够更好地帮助我们布局页面
网页布局的本质
- 先准备好相关的网页元素,网页元素基本都是盒子 Box
- 利用 CSS 设置好盒子样式,然后摆放到相应的位置
- 往盒子里装内容
网页布局的核心本质:利用 CSS 摆盒子
盒子模型(Box Model)的组成
盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距和实际内容
盒子的组成:
- border 边框
- content 内容
- padding 内边距(控制边框与内容的距离)
- margin 外边距(设置不同盒子之间的距离)
边框 border
border 设置元素的边框
边框由三部分组成:边框的宽度(粗细)、边框样式、边框颜色
border: border-width || border-style || border-color;
属性 | 作用 |
---|---|
border-width | 边框粗细,单位是 px |
border-style | 边框样式 |
border-color | 边框颜色 |
参数 | 含义 |
---|---|
none | 无边框,与任何指定的border-width值无关 |
hidden | 隐藏边框。IE不支持 |
dotted | 在MAC、Windows和UNIX平台上为点线,否则为实线 |
dashed | 在MAC、Windows和UNIX平台上为虚线,否则为实线 |
solid | 实线边框 |
double | 双线边框,两条单线与其间隔的和等于指定的border-width值 |
div {
width: 300px;
height: 300px;
border-width: 5px;
/* border-style 经常使用的取值有:实线solid 虚线dashed 点线dotted */
border-style: solid;
border-color: red; /*边框颜色默认为黑色*/
}
边框简写
div {
border: 5px solid red; /*没有固定顺序*/
}
边框分开写法
div {
/* 边框分开设定 */
border-top: 5px solid red;
border-bottom: 10px dotted orange;
border-left: 10px dashed purple;
border-right: 5px solid darkblue;
}
实例:设置一个上边框为红色,其他边框为蓝色的盒子
div {
width: 200px;
height: 200px;
border: 5px solid blue;
/* 利用CSS的层叠性,相同元素设置样式后来居上 */
/* 只层叠了上边框 */
border-top: 5px solid red;
}
注:合理利用层叠性,可以简化代码
表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式
控制相邻单元格的边框
div {
border-collapse: collapse;
}
- collapse 单词是合并的意思
- border-collapse: collapse; 表示相邻边框合并在一起
边框会影响盒子的实际大小
div {
width: 200px;
height: 200px;
background-color: black;
border: 10px solid red;
}
边框会额外增加盒子的实际大小。
因此我们有两种方案解决这个问题:
- 测量盒子大小的时候,不量边框
- 如果测量的时候包含了边框,则需要 width / height 减去边框宽度