css：盒子模型

基础知识

盒模型由四个部分组成：

外边距margin
边框border
内边距padding
内容content

标准盒模型大小 = border + padding + content
怪异盒模型大小 = content
转怪异盒模型：box-sizing:border-box;
转标准盒模型：box-sizing:content-box;

怪异盒模型也叫 IE 盒子模型

实例

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>Documenttitle>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            color: #f00;
            border: 5px solid #000;
            padding: 10px;
            margin-top: 20px;
        }
    style>
head>
<body>
    <div class="outer">
        hello
    div>
    
    <div style="width: 100px;height: 1px;background-color: #f00;margin-top: 10px;">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述
我们设置了宽高 100*100px，但是我们可以看到明显比红线的 100px 要长一些，因为现在的盒子是标准盒子模型，所以盒子的宽是：
100（content）+10（padding）+5（border）= 115px

小技巧

实际工作中，其实我觉得怪异盒子模型更加实用，比如设计稿给你一个宽度 100px，padding 10px 的一个设计。我可以直接去写css代码：

// 转换为怪异盒子模型
box-sizing:border-box;
width: 100px;
padding: 10px;
1
2
3
4

如果使用标准盒子，我就要去计算这个宽度设置为 80，而不是直接用设计稿给的 100，这样就非常的麻烦

width: 80px;
padding: 10px;
1
2

相关阅读:
【从零到一的Raspberry】数莓派踩坑实录(二) 内核编译配置和模块安装
基于词云图的短信热词数据可视化
Linux命令行从x度网盘下载数据
利用lvm扩大已有分区
VFP技巧
网络安全之防范钓鱼邮件
项目设计集合（人工智能方向）：助力新人快速实战掌握技能、自主完成项目设计升级，提升自身的硬实力（不仅限NLP、知识图谱、计算机视觉等领域）
爬虫项目（12）：正则、多线程抓取腾讯动漫，Flask展示数据
应用多元统计分析--多元数据的直观表示（R语言）
台式电脑怎么格式化重装系统

原文地址：https://blog.csdn.net/weixin_43972437/article/details/127754056