精华内容
下载资源
问答
  • 本篇主要总结了CSS盒子模型中的标准盒模型和IE盒模型的区别和相同点,同时总结了 box-sizing属性。

    简介:

    CSS盒子模型又称为框模型,它里面包含了外边距margin,边框border,内边距padding,以及元素内容content。由内到外分别是从content,padding,border,以及margin。

    标准盒模型和IE盒模型

    标准盒模型的width为盒子中的content的宽度,通常设置背景时设置的是内容,内边距,边框。当边框为透明色时会显示background-color色彩。
    元素框的宽高分别与content,padding,border,margin有关。
    IE盒模型中的width为其中content,border,padding有关,元素框的宽高与width,margin有关。

    box-sizing属性

    css盒模型默认将对一个元素设置的width和height应用到这个元素的内容区,如果元素有边框和内边距值,绘制时就会加上。这样对响应式布局不友好,box-sizing属性可用来调整这些。
    使用方法:{box-sizing:border-box;}

    属性值 含义
    content-box 默认属性,若元素宽为50px,则内容区有50px的宽,并且边框和内边距额宽度也会被增加到最后绘制出来的元素宽度中
    border-box 告诉浏览器:设置的边框和内边距包含在width中,也就是说,内容区的实际宽度是width-border-padding

    注意:当编写共享组件库时,谨慎使用这个属性,因为如果使用者网站没设置这个值,那么就很难使用这个组件库。这个属性不是继承属性。

    展开全文
  • 盒模型有两种:IE盒子模型,W3C盒子模型 盒模型包含:内容(content) 填充(padding) 边界(margin) 边框(border) 在W3C标准中,一个元素的宽度和高度,是指元素内容(content)的宽度和高度,而在IE5.5及以下...
    • 盒模型有两种:IE盒子模型,W3C盒子模型
    • 盒模型包含:内容(content) 填充(padding) 边界(margin) 边框(border)
    • 在W3C标准中,一个元素的宽度和高度,是指元素内容(content)的宽度和高度,而在IE5.5及以下的浏览器,IE的宽度和高度还包含了padding和border。
      在这里插入图片描述
    展开全文
  • css盒模型(标准盒模型 怪异盒模型) CSS 盒子模型(Box Model) 每个HTML元素都可以看作是一个盒子,父元素和子元素的关系就行大盒子里放了个小盒子,兄弟元素就像在大盒子平放了两个小盒子。盒模型包括:外边距...

    css盒模型(标准盒模型 怪异盒模型)

    CSS 盒子模型(Box Model)
    每个HTML元素都可以看作是一个盒子,父元素和子元素的关系就行大盒子里放了个小盒子,兄弟元素就像在大盒子平放了两个小盒子。盒模型包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。

    由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准的盒模型(怪异盒子模型)

    用两个简单的例子分别介绍下这两个盒子模型:

    标准盒模型:
    在这里插入图片描述
    在这里插入图片描述
    这里外层盒子的width和height都是:10 + 150 + 10 = 170px。

    怪异盒模型:
    在这里插入图片描述
    在这里插入图片描述
    这里外层盒子的width和height都是:10 + 130+ 10 = 150px。

    这里得出一个结论:
    标准盒模型,一个块的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右)

    怪异盒模型,一个块的总宽度 = width(content + border + padding)+ margin(左右)

    据上面实验也看到了,如果不想因为改变padding的时候盒子的大小也会跟着变化的话就可以使用怪异盒模型,而如果想让盒子的大小被padding撑开的话就可以使用标准盒模型

    展开全文
  • 一、概念 CSS盒模型本质上是一个盒子,封装...CSS盒模型标准模型 + IE模型 1.1 W3C盒子模型(标准盒模型) 标准盒模型:box-sizing: content-box; ( 浏览器默认设置 ) 1.2 IE盒子模型(怪异盒模型) IE盒子模型:bo...

    一、概念

    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。
    CSS盒模型:标准模型 + IE模型

    1.1 W3C盒子模型(标准盒模型)

    标准盒模型:box-sizing: content-box; ( 浏览器默认设置 )
    在这里插入图片描述

    1.2 IE盒子模型(怪异盒模型)

    IE盒子模型:box-sizing: border-box;
    在这里插入图片描述

    二、知识点

    2.1 标准模型和IE模型的区别

    计算宽度和高度的不同。
    标准盒模型:盒子总宽度/高度 = width/height + padding + border + margin。( 即 width/height 只是内容高度,不包含 padding 和 border 值 )
    IE盒子模型:盒子总宽度/高度 = width/height + margin = (内容区宽度/高度 + padding + border) + margin。( 即 width/height 包含了 padding 和 border 值 )

    2.2 CSS如何设置这两种模型

    标准:box-sizing: content-box; ( 浏览器默认设置 )
    IE: box-sizing: border-box;

    2.3 JS如何获取盒模型对应的宽和高

    (1)dom.style.width/height 只能取到行内样式的宽和高,style 标签中和 link 外链的样式取不到。
    (2)dom.currentStyle.width/height (只有IE兼容)取到的是最终渲染后的宽和高
    (3)window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9 以上支持。
    (4)dom.getBoundingClientRect().width/height 也是得到渲染后的宽和高,大多浏览器支持。IE9 以上支持,除此外还可以取到相对于视窗的上下左右的距离。
    (6)dom.offsetWidth/offsetHeight 包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。

    2.4 实例题(根据盒模型解释边距重叠)

    例:父元素里面嵌套了一个子元素,已知子元素的高度是 100px,子元素与父元素的上边距是 10px,计算父元素的实际高度。
    在这里插入图片描述

    CSS:

    .parents {
    width: 100px;
    background: #FF9934;
    }
    .child {
    width: 100%;
    height: 100px;
    background: #336667;
    margin-top: 10px;
    }
    Html:

    它的父元素实际高度是 100px 或 110px 都可以。主要看怎么父元素的盒模型如何设置。如以上代码:父元素不加 overflow: hidden,则父元素的实际高度为 100px;如加上 overflow: hidden 父元素高度为 110px,给父元素创建了 BFC,块级格式化上下文。 完整案例: [https://jsbin.com/dubimoyahe/...](https://jsbin.com/dubimoyahe/1/edit?html,css,output)。

    2.5 BFC(边距重叠解决方案)

    2.5.1 BFC基本概念

    BFC: 块级格式化上下文
    BFC基本概念:BFC 是 CSS 布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素 。
    父子元素和兄弟元素边距重叠,重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

    2.5.2 BFC原理(渲染规则|布局规则):

    (1)内部的 Box 会在垂直方向,从顶部开始一个接着一个地放置;
    (2)Box 垂直方向的距离由 margin (外边距)决定,属于同一个 BFC 的两个相邻 Boxmargin 会发生重叠;
    (3)每个元素的 margin Box 的左边, 与包含块 border Box 的左边相接触,(对于从左到右的格式化,否则相反)。即使存在浮动也是如此;
    (4)BFC 在页面上是一个隔离的独立容器,外面的元素不会影响里面的元素,反之亦然。文字环绕效果,设置 float;
    (5)BFC 的区域不会与 float Box 重叠(清浮动);
    (6)计算 BFC 的高度时,浮动元素也参与计算。

    2.5.3 CSS在什么情况下会创建出BFC(即脱离文档流)

    0、根元素,即 HTML 元素(最大的一个 BFC
    1、浮动( float 的值不为 none
    2、绝对定位元素( position 的值为 absolutefixed
    3、行内块( displayinline-block
    4、表格单元( displaytable、table-cell、table-caption、inline-blockHTML 表格相关的属性 )
    5、弹性盒( displayflexinline-flex
    6、默认值。内容不会被修剪,会呈现在元素框之外(overflow 不为 visible

    2.5.4 BFC作用(使用场景)

    1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
    2、避免元素被浮动元素覆盖
    3、可以让父元素的高度包含子浮动元素,清除内部浮动(原理:触发父 divBFC 属性,使下面的子 div 都处在父 div的同一个 BFC 区域之内)
    4、去除边距重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠

    2.6 IFC

    2.6.1 IFC基本概念

    IFC: 行内格式化上下文
    IFC基本概念:
    在这里插入图片描述

    2.6.2 IFC原理(渲染规则|布局规则):

    (1)内部的 Box 会在水平方向,从含块的顶部开始一个接着一个地放置;
    (2)这些 Box 之间的水平方向的 margin,borderpadding 都有效;
    (3)Box 垂直对齐方式:以它们的底部、顶部对齐,或以它们里面的文本的基线(baseline)对齐(默认,文本与图片对其),例:line-heigthvertical-align

    展开全文
  • 元素的外边距(margin)、边框(border)、内边距(padding)、内容(content)就构成了CSS盒模型 盒模型分为:IE/怪异盒模型 和 W3C标准盒模型。 标准盒模型:width/height = content宽高,不包含border和padding; ...
  • 盒子模型css将html元素看作一个个盒子,来设计和布局。盒子有它们的属性,盒子之间也可嵌套 属性:margin、padding、...分类:标准模型、IE模型(替代盒子模型) 1.1块模型 独占一行 width、height有效,...
  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下图为盒子模型图: margin(外边距) - 清除边框外的区域...
  • CSS盒模型的概念与分类CSS盒模型...CSS盒模型分为标准模型和IE模型;标准模型和IE模型的区别标准模型:width = 内容content 的宽度;(默认)设置方式: box-sizing:content-box;IE模型:width = 内容content + 边框bo...
  • 由于目前大部分主流的浏览器支持的是W3C标准盒模型标准盒模型),也有保留对怪异盒子样式的解析,当然IE沿用的是自己标准盒模型(怪异盒子模型) 用两个简单的例子分别介绍下这两个盒子模型: 标准盒模型: <...
  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 ...
  • css盒模型

    2021-03-21 17:14:21
    盒模型概述普通盒模型(标准盒模型)内容content内...css盒模型:普通盒模型(标准盒模型)+IE盒模型(怪异盒模型) 普通盒模型(标准盒模型) 盒子实际的大小是content+padding+border+margin 内容content 它是由元
  • CSS盒模型

    2019-10-04 14:13:26
    CSS盒模型分为两类:标准盒模型和IE盒模型 盒模型的概念 标准盒模型 标准盒模型的width=content IE盒模型 IE盒模型的width = border + padding + content css设置这两种模型 盒模型 默认 box-sizing:content-box...
  • CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型CSS3中进一步扩展,提出了弹性盒模型的概念什么是盒模型,我们可以先直观的看一个东西打开Chrome浏览器,F12打开开发者工具我们能...
  • 标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中...CSS盒子模型分为:标准W3C盒子模型,IE盒子模型,注意在两种模型中宽(width)和高(height)包括属性的不同。 标准W3C盒子模型: W3C模型中:...
  • CSS盒子模型

    2021-05-17 11:04:48
    盒子模型分为:W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型) (1)W3C盒子模型(标准盒模型) 1.标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。 2.标准盒模型下的...
  • JS如何设置获取盒模型对应的宽和高?根据盒模型解释边距重叠。BFC边距重叠解决方案?IFC? 标准模型和IE模型的区别:高和宽的计算方式不同,标准模型宽不包含padding和border,IE模型的宽计算padding和border。 ...
  • 首先介绍Css盒模型也就是标准盒模型(BOX Model) 包含了内容(content)内边距(padding)边框(border)外边框(margin) 这是大家经常用到的,也是现在的标准,其实IE的盒子结构和标准基本一样,但是IE...
  • css盒子模型

    2018-10-08 17:36:11
    1. css盒子模型 ...W3C的标准盒模型标准的盒子模型): 在标准的盒子模型中,width指content部分的宽度 在标准的盒子模型中,height指content部分的高度 所以,元素框的总宽度 = 元素(content)...
  • css盒模型:本质上是一个盒子,用于封装周围的HTML元素,它包括:边距margin,边框border,填充padding,和实际内容content。 标准 W3C 盒子模型的范围:包括 margin、border、padding、content, width 部分只包含 ...
  • CSS盒模型 盒模型的组成 两种盒模型 总结 参考资料 一、CSS 盒模型 当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个...
  • ? 设置2个属性值时前者为上下padding的值后者为左右padding的值 ? 设置3个属性值时第1个为上padding的值第2个为左右padding的值第3个为下padding的值 ? 设置4个属性值时按照顺时针方向依次为上右下左padding的值 ...
  • 标准CSS盒子模型和低端IE CSS盒子模型不同:宽高不一样  标准css盒子模型宽高就是内容区宽高;  低端IE css盒子模型宽高 内边距﹢边界﹢内容区; 转载于:https://www.cnblogs.com/love-sea520/...

空空如也

空空如也

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

标准css盒模型