当前位置：首页 > news >正文

盒子模型导读

news 2025/9/13 16:13:41

目标

能够准确阐述盒子模型的4个组成部分

能够利用边框复合写法给元素添加边框

能够计算盒子的实际大小

能够利用盒子模型布局模块案例

能够给盒子设置圆角边框

能够给盒子添加阴影

能够给文字添加阴影

盒子模型

1.1看透网页布局的本质

网页布局过程：

1.先准备好相关的网页元素，网页元素基本都是盒子Box

2.利用CSS设置好盒子样式，然后摆放到相应位置

3.往盒子里面装内容

网页布局的核心本质，就是利用CSS摆盒子。

1.2盒子模型组成

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

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

1.3 边框（border）

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）边框样式边框颜色

语法：

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

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式 solide实线、dotted点线、dashed虚线线框
border-color	边框颜色

CSS 边框属性允许你指定一个元素边框的样式和颜色。

边框描写：

border:1px,solid red;没有顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* width: 300px;height: 200px;border-width: 5px;border-style: solid; *//* border-style: dotted;点线 *//* border-style: dashed;虚线边框 *//* border-color: pink; */width: 300px;height: 200px;;border: 1px,solid,pink;}</style>
</head>
<body><div></div>
</body>
</html>

border-top:1px solid red;/*只设定上边框，其余同理*/

请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色，提示：一定注意边框的层叠性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {/* width: 300px;height: 200px;border-width: 5px;border-style: solid; *//* border-style: dotted;点线 *//* border-style: dashed;虚线边框 *//* border-color: pink; *//* width: 300px;height: 200px;;border: 1px,solid,pink; */width: 200px;height: 200px;border: 1px solid blue;border-top:1px solid red;}</style>
</head>
<body><div></div>
</body>
</html>

1.4 表格的细线边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>今日小说排行榜</title><style>table {width: 500px;height: 249px;}table,td,th {border: 1px solid pink;border-collapse: collapse;font-size: 14px;text-align: center;}</style>
</head><body><table align="center" cellspacing="0"><thead>
<tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th>
</tr></thead><tr><td>1</td><td>鬼吹灯</td><td>上升</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>上升</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>上升</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>上升</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>上升</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>上升</td><td>456</td><td>123</td><td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百度</a></td></tr></table>
</body>
</html>

border-collapse：合并单元格

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

边框会额外增加盒子的实际大小，因此，我们7欧两种方案解决：

1.测量盒子大小的时候，不量边框

2.如果测量的时候包含了边框，则需要width/height减去边框宽度。

1.6 内边距

padding 属于用于设置内边距，即边框与内容之间的距离。

属性	作用
padding-left	左行内距
padding-right	右行内距
padding-top	上内边距
padding-bottom	下内边距

padding属性（简写属性）可以有一到四个值。

值的个数	表达意思
padding:5px;	1个值，代表上下左右都有5像素内边距
padding:5px 10px	2个值，代表上下内边距5px，左右内边距是10px
padding：5px 10px 20px	3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding:5px 10px 20px 30px	4个值，上5 右10 下20 左30 顺时针

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/* padding: 5px; *//* 内边距复合写法（简写） *//* padding: 5px 10px; *//* padding: 5px 10px 20px; */padding: 5px 10px 20px 30px;}</style>
</head>
<body><div>盒子内容是content盒子内容是content盒子内容是content盒子内容是content</div>
</body>
</html>

当我们给盒子指定padding值后，发生了2件事情：

1.内容和边框有了距离，添加了内边距。

2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。

综合案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新浪导航</title><style>.nav{border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;height: 41px;}.nav a{display: inline-block;line-height: 41px;padding: 0 20px;font-size: 12px;color: #4c4c4c;text-decoration: none;}a:hover {background-color: #eee;color: orange;}</style>
</head>
<body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body>
</html>

小米侧边栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav{width: 200px;height: 40px;font-size: 14px;}.nav a{display: block;background-color: #55585a;color: #fff;text-decoration: none;line-height: 40px;padding-left: 30px;}a:hover {background-color: #ff6700;}</style>
</head>
<body><div class="nav"><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a></div>
</body>
</html>

1.7 外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {background-color: pink;width: 200px;height: 200px;}.one {/* margin-bottom: 20px; */margin: 20px 30px 20px 50px;}</style>
</head>
<body><div class="one">1</div><div class="two">2</div>
</body>
</html>