CSS盒模型

秒速五厘米 2021-11-27 00:28 472阅读 0赞

img1.gif

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度

转载于:https://www.cnblogs.com/myphh/archive/2012/06/17/2552368.html

发表评论

表情：
评论列表 （有 0 条评论，472人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS盒模型

    1 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

    我就是我我就是我/ 0 赞/ 382 阅读

    相关 CSS盒模型

        盒模型是CSS布局的最基本组成部分，它指定页面元素如何显示及在某种方式上如何交互，在页面上的每个元素都是以一个矩形的表现形式存在的，每个矩形是由元素的内容、内补丁（pa

    旧城等待，旧城等待，/ 0 赞/ 339 阅读

    相关 CSS盒模型

    盒模型 单地说每个html标签都是一个方块，然后这个方块又包着几个小方块。盒模型分为IE盒模型和W3C标准盒模型两种。 Margin(外边距) - 清除边框外的区

    r囧r小猫r囧r小猫/ 0 赞/ 404 阅读

    相关 css盒模型

    首先提个问题，在写HTML文件时第一行为什么要写<!DOCTYPE html>呢？ 什么是盒模型 盒模型分为标准盒模型和IE盒模型，下图是Google开发者工具的截图：

    傷城~傷城~/ 0 赞/ 351 阅读

    相关 CSS：盒模型

    [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 在CSS中有两种盒模型: (1)W3C标准盒模型：包括

    悠悠悠悠/ 0 赞/ 393 阅读

    相关 CSS盒模型

    ![img1.gif][] 我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内

    秒速五厘米秒速五厘米/ 0 赞/ 473 阅读