CSS 盒子模型-边框

目录

学习目标

学习内容

盒子模型

网页布局的本质

盒子模型（Box Model）的组成

边框 border

边框简写

边框分开写法

表格的细线边框

边框会影响盒子的实际大小

---

学习目标

1. 能够准确阐述盒子模型的4个组成部分
2. 能够利用边框复合写法给元素添加边框
3. 能够计算盒子的实际大小
4. 能够利用盒子模型布局模块案例
5. 能够给盒子设置圆角边框
6. 能够给盒子添加阴影
7. 能够给文字添加阴影

学习内容

• 盒子模型
• PS 基本操作
• 综合案例
• 圆角边框
• 盒子阴影
• 文字阴影

盒子模型

页面布局三大核心：盒子模型、浮动、定位

学好盒子模型能够更好地帮助我们布局页面

网页布局的本质

1. 先准备好相关的网页元素，网页元素基本都是盒子 Box
2. 利用 CSS 设置好盒子样式，然后摆放到相应的位置
3. 往盒子里装内容

网页布局的核心本质：利用 CSS 摆盒子

盒子模型（Box Model）的组成

盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距和实际内容

盒子的组成：

1. border 边框
2. content 内容
3. padding 内边距（控制边框与内容的距离）
4. margin 外边距（设置不同盒子之间的距离）

边框 border

border 设置元素的边框

边框由三部分组成：边框的宽度（粗细）、边框样式、边框颜色

border: border-width || border-style || border-color;

属性	作用
border-width	边框粗细，单位是 px
border-style	边框样式
border-color	边框颜色

border-style

参数	含义
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;
}

边框会额外增加盒子的实际大小。

因此我们有两种方案解决这个问题：

1. 测量盒子大小的时候，不量边框
2. 如果测量的时候包含了边框，则需要 width / height 减去边框宽度