【玩转CSS】盒子模型

时间：2023-10-13 05:37:01 aeb喷轨气温传感器

?? 信仰：当一个人走得很远的时候，他会忘记他为什么开始。我希望你不要忘记你的主动心态，不要随波逐流，继续前进
?? 欢迎关注点赞收藏留言
?? 本文由程序喵在路上原创，CSDN首发！
?? 系列专栏：HTML5 CSS3 移动端前端
?? 2022年7月15日
? 如果你得博主的文章还不错，希望朋友们三连支持。

阅读指南

? 学习目标

?? 盒子模型

1. 看透网页布局的本质

2. 盒子模型（Box Model）组成

3. 边框（border）

4. 表格的细线边框

5. 框架会影响盒子的实际尺寸

6. 内边距（padding）

案例：新浪导航--padding影响盒子的好处

修改小米侧栏案例

7. 外边距（margin）

8. 外边合并-嵌套块元素坍塌

9. 清除内外边距

?? PS 基本操作

?? 综合案例

1. 产品模块

2. 快报模块

?? 圆角边框

?? 盒子阴影

?? 文字阴影(理解)

? 学习目标

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

?? 盒子模型

学习三个核心：盒子模型、浮动和定位，学习盒子模型可以帮助我们布局页面

1. 看透网页布局的本质

网页布局流程：

首先准备相关的网页元素，网页元素基本上是盒子 Box
利用 CSS 设置盒子样式，然后放在相应的位置
把内容放进盒子里

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

2. 盒子模型（Box Model）组成

所谓的盒子模型： HTML 页面中的布局元素被视为一个矩形盒子，即一个装有内容的容器

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

3. 边框（border）

border 元素的边框可以设置，由三部分组成:边框宽度(厚度)、边框风格和边框颜色

语法：

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

属性	作用
border-width	定义框架的厚度，单位是 px
border-style	边框的样式
border-color	边框颜色

DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框title>
    <style> div { 
           width: 300px; height: 200px; border-width: 5px; /* 实线边框 */ /* border-style: solid; */ /* 虚线边框 */ /* border-style: dashed; */ /* 点线边框 */ border-style: dotted; border-color: red; } style>
head>

<body>
    <div>div>
body>

html>

边框简写：

border: 1px solid red;  /* 没有顺序之分 */

边框分开写法：

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

4. 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

语法：

border-collapse: collapse;

collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起

对前面小说排行榜案例进行该进

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜title>
    <style> table { 
           width: 500px; height: 251px; } th { 
           height: 35px; } table, td, th { 
           border: 1px solid rebeccapurple; 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>
        
        <tbody>
            <tr>
                <td>1td>
                <td>鬼吹灯td>
                <td>🟩td>
                <td>37435td>
                <td>1755523td>
                <td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search" target="_blank">贴吧a> <a href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftu1.whhost.net%2Fuploads%2F20190322%2F13%2F1553234347-WEUxvwmusH.jpg&refer=http%3A%2F%2Ftu1.whhost.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659423152&t=213ca1853aeb315070cda482b002ba76" target="_blank">图片a> <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin" target="_blank">百科a>td>
            tr>
            <tr>
                <td>2td>
                <td>盗墓笔记td>
                <td>🟩td>
                <td>86124td>
                <td>675432td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
            <tr>
                <td>3td>
                <td>西游记td>
                <td>🛑td>
                <td>39212td>
                <td>547654td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
            <tr>
                <td>4td>
                <td>东游记td>
                <td>🛑td>
                <td>27523td>
                <td>756845td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
            <tr>
                <td>5td>
                <td>甄嬛传td>
                <td>🟩td>
                <td>16321td>
                <td>785676td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
            <tr>
                <td>6td>
                <td>水浒传td>
                <td>🛑td>
                <td>57576td>
                <td>1231421td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
            <tr>
                <td>7td>
                <td>三国演义td>
                <td>🛑td>
                <td>22334td>
                <td>762586td>
                <td><a href="#">贴吧a> <a href="#">图片a> <a href="#">百科a>td>
            tr>
        tbody>
    table>
body>

html>

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

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

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

6. 内边距（padding）

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

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

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距title>
    <style> div { 
           width: 200px; height: 200px; background-color: skyblue; padding-left: 20px; padding-top: 20px; } style>
head>

<body>
    <div>
        content盒子内容
    div>
body>

html>

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

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

以上4种情况，我们实际开发都会遇到

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

内容和边框有了距离，添加了内边距
padding 影响了盒子实际大小

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

解决方案：

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

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之内边距title>
    <style> div { 
           width: 160px; height: 160px; background-color: skyblue; padding: 20px; } style>
head>

<body>
    <div>
        padding会影响盒子实际大小
    div>
body>

html>

案例：新浪导航–padding影响盒子好处

padding 内边距可以撑开盒子，我们可以做非常巧妙的运用

因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给 padding 最合适

案例相关取值：

上边框为 3 像素，颜色为 #ff8500
下边框为 1 像素，颜色为 #edeef0
盒子高度为 41 像素，背景颜色为 #fcfcfc
文字颜色为 #4c4c4c

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航title>
    <style> .nav { 
           height: 41px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; background-color: #fcfcfc; /* 文字居中 */ line-height: 41px; } .nav a { 
           /* a属于行内元素，此时必须要转换为行内块元素 */ display: inline-block; height: 41px; padding: 0 20px;  
            锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

【玩转CSS】盒子模型

阅读指南

相关文章