• 【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型


    前言

    大家好,我是HoMeTown,CSS是作为前端必有技术栈之一,但是有很多同学其实对CSS的盒模型都不是很了解,今天想聊一下Css盒子模型

    盒模型是什么

    首先当一个Document对进行布局(layout)的时候,浏览器的UGI渲染引擎会根据基础框盒模型,把所有的元素拟态成一个个盒子,这个盒子有4个部分组成

    • content 即实际的内容,包括文本&图像
    • padding 即内边距,清楚内容周围的区域,内边距是透明的,并且不能为负
    • border 即边框,指的是围绕元素内容的内边距的n条线,由widthcolorstyle3部分组成
    • margin 即外边距,在元素外创建额外的空白距离区域,该区域通常不能放置其他的元素

    二维视图

    在这里插入图片描述

    三维视图
    在这里插入图片描述

    举个🌰

    <style>
    .box__wrap {
        width: 200px;
        height: 100px;
        padding: 20px;
    }
    style>
    <div class="box__wrap">盒模型div>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    当我们在浏览器里打开时,却发现元素的大小变成了240px,而不是200px
    在这里插入图片描述

    Css中,盒子模型可以分成:

    • W3C标准盒模型
    • IE盒模型

    默认情况下,盒子模型为W3C标准盒模型

    W3C标准盒模型

    标准盒模型是浏览器默认的盒子模型:

    在这里插入图片描述

    在标准盒模型下:

    • 盒子总宽度 = 宽度 + 内边距 + 边框 + 外边距
    • 盒子总高度 = 高度 + 内边距 + 边框 + 外边距

    width&height仅仅只包含内容高度,不包含外边距边框,所以👆🏻的🌰中的width240px

    IE盒模型

    在这里插入图片描述

    从图中可以得到,IE盒模型中:

    • 盒子总宽度 = 宽度 + 外边距
    • 盒子总高度 = 高度 + 外边距

    width&height包含内边距&边框,所以如果在IE盒模型下,👆🏻的🌰中的width200px

    box-sizing

    CSS中为我们提供了box-sizing属性,该属性决定了引擎渲染时,按哪种模式渲染盒子,它的值如下:

    • content-box 默认值,与标准盒模型一致
    • border-box 与IE盒模型一致
    • inherit 从父元素继承

    还是用上面的🌰,修改如下:

    在这里插入图片描述

    .box__wrap 的宽度变成了200px

  • 相关阅读:
    Qt使用qtwebapp编写http服务的步骤
    绿盟应急响应团队
    基于springboot的“老年智慧云”老年人在线学习平台毕业设计源码262221
    论文阅读_基于深度学习的异常检测综述
    通过JS脚本检查浏览器对视频编码的支持情况
    Acid-PEG-aldehyde,COOH-PEG-CHO,羧基PEG醛基
    干货|app自动化测试之模拟器控制
    获取 Windows 系统托盘图标信息的最新方案(一)
    操作系统——死锁
    基于docker部署实现接口自动化持续集成
  • 原文地址:https://blog.csdn.net/isHoMeTown/article/details/126021449