[CSS]盒子模型
前言
- 系列文章目录：
- [目录]HTML CSS JS
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
- 老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git
- 视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程
- 视频对应资源
- 链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】
- 提取码：1234
- 【GitHub 仓库链接】
文章目录
- 前言
- 1. 盒子模型的组成
- 2. 边框(border)
- 2.1 边框的宽度
- 2.2 边框的颜色
- 2.3 边框的样式
- 2.4 边框的简写(复合写法)
- 2.5 边框不同边的设置
- 2.6 表格的边框设置
- 2.7 边框会影响盒子的实际大小
- 3. 内边距(padding)
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
- 利用 CSS 设置好盒子样式，然后摆放到相应位置。
- 往盒子里面装内容.
网页布局的核心本质： 就是利用 CSS 摆盒子。
1. 盒子模型的组成
盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容
2. 边框(border)
border可以设置元素的边框。
边框有三部分组成:边框宽度(粗细) 、边框样式、边框颜色
- 边框的宽度：border-width
- 边框的样式：border-style
- 边框的颜色：border-color
2.1 边框的宽度
<style>
div {
width: 200px;
height: 200px;
/* 盒子的边框的宽度为 5px */
border-width: 5px;
}
</style>
</head>
<body>
<div></div>
</body>
2.2 边框的颜色
<style>
div {
width: 200px;
height: 200px;
/* 盒子的边框的宽度为 5px */
border-width: 5px;
/* 边框的颜色为 red */
border-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
2.3 边框的样式
- border-style 取值：
- none： 无轮廓。
- hidden： 隐藏边框。IE7及以下尚不支持
- dotted： 点状轮廓。IE6下显示为dashed效果
- dashed： 虚线轮廓。
- solid： 实线轮廓
- double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
- groove： 3D凹槽轮廓。
- ridge： 3D凸槽轮廓。
- inset： 3D凹边轮廓。
- outset： 3D凸边轮廓。
注意：当 border-style 取值为 none 时，border-color 将被忽略，border-width 计算值为0，除非边框轮廓为图像，即border-image。
<style>
div {
width: 200px;
height: 200px;
/* 盒子的边框的宽度为 5px */
border-width: 15px;
/* 边框的颜色为 red */
border-color: red;
}
</style>
<style>
div {
width: 200px;
height: 200px;
/* 盒子的边框的宽度为 5px */
border-width: 15px;
/* 边框的颜色为 red */
border-color: red;
/* 边框的样式为实线 */
border-style: solid;
}
</style>
</head>
<body>
<div></div>
</body>
2.4 边框的简写(复合写法)
语法：
border: border-width border-style border-color
- 边框的三个属性没有固定的书写顺序。
<style>
div {
width: 200px;
height: 200px;
/* 盒子的边框的宽度为 5px */
/* border-width: 15px; */
/* 边框的颜色为 red */
/* border-color: red; */
/* 边框的样式为实线 */
/* border-style: solid; */
/* 边框的简写 */
border: 15px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
2.5 边框不同边的设置
边框对应的四个边：
- 上：border-top
- 下：border-bottom
- 左：border-left
- 右：border-right
<style>
div {
width: 200px;
height: 200px;
/* 分别设置边框的四个边 */
border-top: 15px solid red;
border-bottom: 15px dotted red;
border-left: 15px dashed red;
border-right: 15px double red;
}
</style>
</head>
<body>
<div></div>
</body>
2.6 表格的边框设置
<style>
/* 设置表格的大小 */
table {
height: 249px;
width: 500px;
}
/* 给表格的表头和表格的每个单元格设置边框 */
table
th, td {
border: 2px solid blue;
}
</style>
由于每个单元格都有自己的边框，所以两个单元格间的边框会比较粗，为两个单元格边框宽度的和
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse;
- collapse 单词是合并的意思，表示相邻边框合并在一起，即相邻边框的宽进行合并而不是相加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
<style>
/* 设置表格的大小 */
table {
height: 249px;
width: 500px;
}
/* 给表格的表头和表格的每个单元格设置边框 */
table
th, td {
border: 2px solid blue;
}
table {
/* 合并相邻的边框 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>
2.7 边框会影响盒子的实际大小
边框会额外增加盒子的实际大小。盒子的实际大小为盒子内容的大小加上边框的粗细。
有两种方案解决：
- 测量盒子大小的时候，不量边框。即单独测量内容区大小和边框的大小。
- 如果测量的时候包含了边框，则需要 width/height 减去边框宽度。