精华内容
下载资源
问答
  • css盒子模型概念

    2020-08-24 18:44:04
    1.盒子模型概念 css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图: 图中最内部的框是元素的实际内容,也就是元素框,紧挨着...

    1.盒子模型概念
    css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:
    在这里插入图片描述
    图中最内部的框是元素的实际内容,也就是元素框,紧挨着元素框外部的是内边距padding,其次是边框(border),然后最外层是外边距(margin),整个构成了框模型。通常我们设置的背景显示区域,就是内容、内边距、边框这一块范围。而外边距margin是透明的,不会遮挡周边的其他元素。

    那么,元素框的总宽度 = 元素(element)的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度;

    元素框的总高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + border的上下宽度。
    二、css 外边距合并(叠加)
    在这里插入图片描述
    在这里插入图片描述
    比较容易理解,所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义,如下图:
    在这里插入图片描述
    需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

    css reset 中也会经常用到

    * {
      margin : 0;
      padding : 0;
    }
    
    展开全文
  • CSS基础:简述CSS模型

    万次阅读 多人点赞 2021-02-22 11:19:45
    问题:简述 CSS模型 一、块级盒子(Block box) 和 内联盒子(Inline box) 在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和...

    盒模型

    问题:简述 CSS 盒模型

    一、块级盒子(Block box) 和 内联盒子(Inline box)

    在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为,我们这里不细分析如果转换他们的行为,仅做了解。

    1.1 块级(block)盒子会表现出以下行为:

    • 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
    • 每个盒子都会换行
    • width 和 height 属性可以发挥作用
    • 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”

    常见的块级元素:

    div, h1~h6, p, form, ul, li, ol, dl, address, hr, menu, table, fieldset
    

    1.2 行级(inline)盒子会表现出以下行为:

    • 盒子不会产生换行。
    • width 和 height 属性将不起作用。
    • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
    • 水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。

    常见的行内元素有:

    a, span, label, strong, em, br, img, input, select, textarea, cite,
    

    一个简单的示例了解以下:

    在这里插入图片描述

    二、盒模型的组成

    完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分:

    • content:内容
    • padding:包围在内容区域外部的空白区域——内边距
    • border:边框盒包裹内容和内边距——边框
    • margin:这是最外面的区域,是盒子和其他元素之间的空白区域——外边距

    合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性,有一个标准的和替代(IE)的盒模型。

    在这里插入图片描述

    在chrome浏览器下可查看元素盒模型,如下图:

    这里写图片描述

    2.1 内边距(padding)

    我们把月饼和月饼盒的距离称为盒子模型的 内边距
    这里写图片描述

    内边距位于边框和内容区域之间。与外边距不同,您不能有负数量的内边距,所以值必须是0或正的值。

    我们可以使用padding简写属性控制元素所有边,或者每边单独使用等价的普通属性:

    padding-top
    padding-right
    padding-bottom
    padding-left
    

    您还可以更改类.container的内边距,这将在容器和方框之间留出空间。任何元素上的内边距都可以更改,并在其边界和元素内部的任何内容之间留出空间。

    在这里插入图片描述

    2.2 外边距(margin)

    月饼盒与另一个月饼盒之间的距离,我们管他叫外边距
    这里写图片描述

    外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型,外边距总是在计算可见部分后额外添加

    我们可以使用margin属性一次控制一个元素的所有边距,或者每边单独使用等价的普通属性控制:

    margin: 10px
    // 等于
    margin-top: 10px
    margin-right: 10px
    margin-bottom: 10px
    margin-left: 10px
    

    在下面的示例中,可以看一下测试元素在外边距设置为正时是如何推开周边元素,以及设置为负时,是如何收缩空间的。

    在这里插入图片描述

    外边距折叠(margin塌陷)

    理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素,这些外边距将合并为一个外边距,即最大的单个外边距的大小。

    在下面的例子中,我们有两个段落。顶部段落的页 margin-bottom为50px。第二段的margin-top 为30px。因为外边距折叠的概念,所以框之间的实际外边距是50px,而不是两个外边距的总和。

    在这里插入图片描述

    .one {
      margin-bottom: 50px;
    }
    
    .two {
      margin-top: 30px;
    }
        
    <div class="container">
      <p class="one">I am paragraph one.</p>
      <p class="two">I am paragraph two.</p>
    </div>
    

    如果你减少 .two 内的margin-top,实际上没有变化的。至于为什么以及如何解决它,我们在这不做讨论。

    2.3 边框(border)

    月饼盒的边,在样式表里被称为边框
    这里写图片描述

    它是在边距和填充框之间绘制的。

    • 如果您正在使用标准的盒模型,边框的大小将添加到框的宽度和高度。
    • 如果您使用的是替代盒模型,那么边框的大小会使内容框更小,因为它会占用一些可用的宽度和高度。

    为边框设置样式时,有大量的属性可以使用——有四个边框,每个边框都有样式、宽度和颜色,我们可能需要对它们进行操作。

    可以使用border属性一次设置所有四个边框的宽度、颜色和样式。

    分别设置每边的宽度、颜色和样式,可以使用:

    border-top
    border-right
    border-bottom
    border-left
    

    设置所有边的颜色、样式或宽度,请使用以下属性:

    border-width
    border-style
    border-color
    

    设置单边的颜色、样式或宽度,可以使用最细粒度的普通属性之一:

    border-top-width
    border-top-style
    border-top-color
    border-right-width
    border-right-style
    border-right-color
    border-bottom-width
    border-bottom-style
    border-bottom-color
    border-left-width
    border-left-style
    border-left-color
    

    三、标准盒模型

    在标准模型中,如果你给盒设置 widthheight,实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。 见下图:

    在这里插入图片描述

    如果使用标准模型,则宽度 = 410px (300 + 50 + 50 + 5 + 5),由margin之外的其他属性组成。

    注: margin 不计入实际大小 —— 当然,它会影响盒子在页面所占空间,但是影响的是盒子外部空间。
    
    盒子的范围到边框为止 —— 不会延伸到margin。
    

    四、替代模型(IE)

    你可能会认为盒子的大小还要加上边框和内边距,这样很麻烦,就比如在我们前端在开发页面时,经常只知道盒子的宽高,总不能我们还要备一个计算器,计算内外边距吧?

    因为这个原因,css还有一个替代盒模型。使用这个模型,所有宽度都是可见宽度,所以:

    内容宽度 = 该宽度 - border - padding。
    

    在这里插入图片描述

    大家可以看到child的宽度就为300 - 50 - 50 - 5 - 5 = 190px。

    默认浏览器会使用标准模型。如果需要使用替代模型,可以通过为其设置 box-sizing: border-box 来实现。

    .box {
      box-sizing: border-box;
    } 
    

    如果你希望所有元素都使用替代模式,而且确实很常用,设置 box-sizing 在 元素上,然后设置所有元素继承该属性,正如下面的例子。如果想要深入理解,请看 the CSS Tricks article on box-sizing。

    html {
      box-sizing: border-box;
    }
    *, *::before, *::after {
      box-sizing: inherit;
    }
    

    在这里插入图片描述
    最后你应该一眼就能看出来两个盒子之前的区别了吧?

    写在最后

    本文是《CSS基础系列》第二篇文章

    如果对你有所帮助不妨给本项目的github 点个 star,这是对我最大的鼓励

    关于我

    • 花名:余光
    • WX:j565017805
    • 沉迷 JS,水平有限,虚心学习中

    其他沉淀

    展开全文
  • CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)一个盒子的构成:盒子中的内容:content盒子的边框:border盒子边框与内容之间的距离:...

    CSS盒子模型:W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,边框,边界的存在)

    一个盒子的构成:

    盒子中的内容:content

    盒子的边框:border

    盒子边框与内容之间的距离:称为填充---padding内边距(内补丁)

    如果有多个盒子存在,盒子与盒子之间的距离:称为边界---margin,外边距(外补丁)

    整个盒子模型在网页中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界

    CSS盒子模型的属性:

    内容属性:宽=width 高=height

    内填充属性(内容与边框之间的距离):padding

    外边距属性:margin(使用该属性的时候注意浏览器的兼容性)

    内填充与边界的规则:

    如果有四个参数:表示上右下左,也可以单单指定某个方向

    如果只有一个参数:表示上右下左

    如果有两个参数: 第一个参数表示上下 第二个参数表示左右

    如果三个参数:表示上 左右 下

    边框属性:border

    复制代码代码如下:

    #bigBox{

    width:300px;

    height:300px;

    background:#F30;

    padding:20px 0px 0px 20px;

    margin:20px;

    }

    #smallBox{

    width:150px;

    height:150px;

    background:#6F9;

    padding-top:20px;

    }

    小盒子

    DIV+CSS两种盒子模型

    利用CSS来布局页面布局DIV有点逻辑性!

    重点理解盒子模型,标准流和非标准流的区别,还有定位原理!把这3个攻破了,就非常简单了!多实践多参考!

    最后就是兼容问题了,在实践中自然就有经验了!这些兼容技巧都是经验来的!

    盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同,

    先来看看我们熟悉的标准盒子模型:

    532afd515f263262a79fd00c9cb63acb.png

    从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。

    8ef436627a39ad11d1f6ee39a27e8c4b.png

    从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

    例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,如果用标准 W3C 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;如果用IE 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

    那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

    再用 jQuery 做的例子来证实一下。

    代码1:

    复制代码代码如下:

    你用的盒子模型是?

    var sBox = $.boxModel ? "标准W3C":"IE";

    document.write("您的页面目前支持:"+sBox+"盒子模型");

    上面的代码没有加上 DOCTYPE 声明,在 IE 浏览器中显示“IE盒子模型”,在 FF 浏览器中显示“标准 W3C 盒子模型”。

    代码2:

    复制代码代码如下:

    ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    你用的盒子模型是标准W3C盒子模型

    var sBox = $.boxModel ? "标准W3C":"IE";

    document.write("您的页面目前支持:"+sBox+"盒子模型");

    代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

    所以为了让网页能兼容各个浏览器,让我们用标准 W3C 盒子模型

    展开全文
  • CSS盒子模型

    2021-06-07 16:13:09
    CSS盒子模型 盒子模型定义 在css中,将html元素看做盒子,这个盒子具有内容(content)、内边距(padding)、边框(border)、外边距(margin)等属性,这些属性组成CSS盒子模型。 盒子模型的计算方式 盒子的宽度/...

    CSS盒子模型

    盒子模型定义

    在css中,将html元素看做盒子,这个盒子具有内容(content)、内边距(padding)、边框(border)、外边距(margin)等属性,这些属性组成CSS盒子模型。

    盒子模型的分类

    盒子模型分为标准盒子模型与IE盒子模型,这两个盒子模型的属性都是一样的,只是盒子内容宽高的计算方式不同

    1. 标准盒子模型
      标准盒子模型的宽度/高度仅仅是width/height
    2. IE盒子模型
      IE盒子模型的宽度/高度是width/height+padding+border

    盒子模型的计算方式

    盒子的总宽度/总高度=内容(width/height)+内边距(padding)+边框(border)+外边距(margin)

    问题:简述盒子模型,计算盒子模型的宽高度
    知识点:盒子模型及其运用

    展开全文
  • 简述css模型

    2020-10-14 22:21:11
    CSS中的盒子模型包括标准的W3C盒子模型和IE盒子模型(别称 怪异盒模型)。弹性盒模型是CSS3新增的属性,不要和这两个搞混了。 总体来说,盒模型如下如所示,别骂了别骂了,绘画能力有限: 这两种盒子模型最主要的...
  • 前端 CSS盒子模型详解

    2018-05-14 20:30:14
    CSS盒子模型 盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下:把元素叫做盒子,设置对应的样式分别为:盒子的...
  • css 盒子模型理解

    2018-02-26 10:18:50
    一、css盒子模型概念CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:图中最内部的框是元素的实际内...
  • css盒子模型

    2020-05-11 15:00:26
    简述盒子模型 W3C组织建议把所有网页上的对象都放在一个盒子(box)中,就是所说的盒子模型CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:实际内容(content)、填充(padding)、边框(border),边界...
  • 简述CSS盒子模型理解?

    万次阅读 2016-12-29 13:42:06
    CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: border:元素的边框(可能不可见),用于将框的边缘...
  • 简述CSS模型

    2019-08-31 14:25:02
    CSS有两种盒模型 分别是 content-box : 内容盒 - 内容就是盒子的边界 border-box :边框盒 - 边框才是盒子的边界 公式: content-box width = 内容宽度 border-box width = 内容宽度 + padding + border 看下图,...
  • CSS 盒子模型概述

    2016-07-21 12:06:00
    CSS 盒子模型(元素框)由元素内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。 盒子模型,最里面的部分是实际内容;直接包围内容的是内边距;内边距的外边缘是边框;边框之外...
  • CSS 盒子模型

    2016-10-21 12:19:11
    盒子模型的border属性设置 a{ width:250px; /*定义箱子体积的大小,占总页面多大空间*/ margin: 1px; /*箱子堆放的时候周围要留空间,这里定义的就是留的上下左右的流的空间的大小*/ border: 5px solid gray; ...
  • CSS盒子模型简介

    千次阅读 2018-04-15 15:27:07
    1.基本概念首先,什么是盒子模型呢?所有的html元素都可以看作是盒子,顾名思义,就像是对元素进行了一个包装,丰富了元素的内容,方便了设计与布局。盒子模型(Box Model)具体包括了外边距(Margin),边框...
  • 盒子模型 css将页面中的所有元素都设置为了一个矩形 将元素设置为矩形和盒子后,对页面的布局就变成了将不同的盒子拜访到不同的位置 每一个盒子都有以下几个部分组成: 内容区(content) 内边距(padding) 边框...
  • 下面我们来看看一些关于HTML中的CSS盒子模型边界(box-model)问题详解,希望下文可以给大家带来帮助HTML中的元素我们把他分为一个一个的盒子,盒子里面可以再放盒子,也可以放置文本,默认情况下,我们给盒子设置...
  • CSS3盒子模型

    2019-09-01 17:31:01
    一、CSS盒子模型简介 CSS中主要有以下盒模型:inline、inline-block、block、table、absolute 、float等。浏览器把每个元素看作一个盒子模型,每一个盒子模型是由以下属性组合所决定的:display、position、float、...
  • css盒子模型属性说明

    2019-09-06 21:37:59
    border margin padding 关于颜色: border是可以单独设置颜色的 padding颜色就是background-color margin没有背景颜色,是完全透明的。利用margin可以去控制元素的位置。虽然margin本身没有背景颜色,但是这并不意味...
  • CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)都有盒子...
  • CSS 盒子模型,绝对定位和相对定位

    千次阅读 2017-07-22 15:06:00
    一、盒子模型:  标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面;在混杂模式下,页面以一种比较宽松的向后兼容的... CSS盒子模型具有内容(content)、填充(padding)、边框(border)、边界(margin
  • chrome浏览器默认的盒子属性值。 content-box的width和height从content算起,不包含border和padding。 2.border-box IE浏览器默认的盒子属性值。 border-box的width和height从border算起,包含border和padding <!...
  • 盒子模型分为IE盒子和W3c盒子两种 W3C盒子(标准盒子模型)由margin,border,padding,content,设置的width height是针对content的 IE盒子(怪异盒子模型)由margin,border,padding,content构成,但是设置的...
  • CSS3盒子模型的理解

    2021-04-09 10:47:06
    CSS3盒子模型的理解 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,一个盒子是由 4 部分组成的:内容(content)、内边距...
  • CSS盒子模型-元素类型

    2011-04-02 12:34:00
    它们尽可能地宽,这就意味着除非用某种方法限制它们(通过其他块元素、CSS属性或HTML标记),否则它们会伸展到整个页面。二、内联元素内联元素没有开始行和结束行,它包含于文本流之内。内联标签的例子有 。内联元素在...
  • 一、css 标准盒子模型css盒子模型 又称为框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如下图:。图中的内层是content依次是padding border ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,227
精华内容 890
关键字:

简述css盒子模型的概念