CSS盒模型对比

thekingisalwaysluc 发布于2019-08-02 16:07 / 458人阅读

摘要：盒模型一般分为标准盒模型，盒模型一般大家都是使用需要注意的是设置了这样一条样式所以在使用过程中需要小心，不要冲突，导致怪异的情况出现而不知原因默认值标准盒模型顾名思义此时属性值是内容的宽度，而盒子的宽度是的宽度所以盒子大小会随

盒模型一般分为：w3c标准盒模型（content-box），IE盒模型（boder-box）

一般大家都是使用content-box,需要注意的是bootstrap设置了这样一条样式
*{ box-sizing: border-box; } 所以在使用过程中需要小心，不要冲突，导致怪异的情况出现而不知原因；

##box-sizing##

content-box 默认值（w3c标准盒模型）

顾名思义：此时 width属性值是内容的宽度，而盒子的宽度是content的宽度+padding + border,所以盒子大小会随着padding,border的大小改变而改变

.content-box {
  box-sizing: content-box;
  width: 100px;
  padding: 20px;
  border: 20px solid #ff0;
}

border-box （IE盒模型）此时width属性值是content+padding+border,

width的值就是盒子大小（不变），修改padding或border会向内塌缩

.border-box {
  box-sizing: border-box;
  width: 100px;
  padding: 20px;
  border: 20px solid #f0f;
}

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型盒遥控

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54697.html

标准盒模型、怪异盒模型对比与应用

摘要：百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度左右左右左右在怪异模式下，一个块的总宽度左右既已经包含了和值然后再介绍一下新属性那么，到底这两个公式里提到的总宽度是什么意思呢两种模式最终效果有什么差别呢话不多说，上代码先看标准百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下...

keithxiaoy 2019-08-29 12:59 评论0 收藏0
CSS盒模型对比

摘要：盒模型一般分为标准盒模型，盒模型一般大家都是使用需要注意的是设置了这样一条样式所以在使用过程中需要小心，不要冲突，导致怪异的情况出现而不知原因默认值标准盒模型顾名思义此时属性值是内容的宽度，而盒子的宽度是的宽度所以盒子大小会随盒模型一般分为：w3c标准盒模型（content-box），IE盒模型（boder-box）一般大家都是使用content-box,需要注意的是bootstra...

young.li 2019-08-30 15:54 评论0 收藏0
CSS 盒子模型及 float 和 position

摘要：内联元素设置无效。内联元素的和属性，水平方向有效，竖直方向不会产生边距效果。和都是通过改变文档流来实现定位。有三种定位机制文档流浮动和绝对定位。元素框正常生成，元素顺序显示，在一个文档流中，一个挨着一个，内容遵守正常从上到下的流。 CSS和模型 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括外边距（marign），边框（border），填充（padding），内容物（...

付永刚 2019-08-30 15:54 评论0 收藏0
CSS规范 > 8 盒模型 Box Model

摘要：当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。 2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 评论0 收藏0
【前端学习】-盒模型

摘要：前言前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文将从盒模型描述标准盒模型传统盒模型属性，常见问题。【前言】前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文会先简单描述一下盒模型，然后描述一些平常会遇到的注意点。本文将从1、盒模型描述；2、W3C标准盒模型/IE传统盒模型；3.box-sizing属性；4...

jonh_felix 2019-08-29 13:09 评论0 收藏0