box-sizing 总结
box-sizing
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。
box-sizing 属性有两个,分别是:content-box 和 border-box
属性一:content-box
这就是什么也不管的情况,默认值,标准盒子模型。width 与 height 只包括内容的宽和高,不包括边框(border),内边距(padding),外边距(margin)。注意:内边距、边框和外边距都在这个盒子的外部。比如说,.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式:
- width = 内容的宽度
- height = 内容的高度
宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。
属性二:border-box
width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks 模式 时 Internet Explorer 使用的盒模型。注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为 350px 的盒子。内容框不能为负,并且被分配到 0,使得不可能使用 border-box 使元素消失。
尺寸计算公式:
- width = border + padding + 内容的宽度
- height = border + padding + 内容的高度
可见,内容区的实际宽度是 width 减去 (border + padding) 的值。
使用规范
性质 | 描述 |
---|---|
初始值 | content-box |
适用元素 | all elements that accept width or height |
是否是继承属性 | 否 |
计算值 | as specified |
Animation type | discrete |
其他
对于新的 web 站点,你可能希望首先将 box-sizing 设置为 border-box,如下所示:
* { box-sizing: border-box; }
这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。
box-sizing 总结相关推荐
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- html5 box sizing,CSS 盒模型与box-sizing
一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯 拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- 【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩 ...
- 24个为Web开发人员准备的CSS3实用教程
本文搜集了一些关于CSS3的最新教程.你可以根据这些教程或技术来实现网页设计,包括:文字阴影.圆角框.盒模型尺寸计算(box sizing).透明效果处理.多重背景.边框图像等.以下这些都是非常实用的 ...
- Bootstrap3.x - 源代码分析
参照http://v3.bootcss.com/css/ 文档与源代码 colors 比较全面定义总结有意义的颜色.所有uI要用的颜色,都先从已定义的读,这样保证样式的同一性,而且方便以后开发主题库. ...
- antd select 下拉菜单的 style 属性_如何优雅地彻底解决 antd 全局样式问题
背景 由于某些原因,我们团队负责在 GitLab 上做二次开发,简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件,组件库选择了 antd,尴尬的是引入之后发现,GitLa ...
- css grid 自动高度_2020年你不应该错过的CSS新特性(二)
茫茫人海中与你相遇 相信未来的你不会很差 作者:阿里巴巴淘系技术 来源:https://juejin.im/post/6886258269137043464 Web排版 先看布局上将会有的一些新特性: ...
最新文章
- 2021年大数据Flink(八):Flink入门案例
- Thinking in java中关于Exception的一道面试题.
- Linux如何实现镜像端口
- 控制信号(单脉冲信号)的跨时钟域传输问题
- BPEL 语言介绍和应用
- 安卓canvas设置HTML,安卓开发中view和canvas的理解
- AUTOSAR从入门到精通100讲(三十五)-Lin通信协议栈分析三部曲LinTrcv配置及代码分析
- 信数金服:决策模型的迭代
- Oracle数据字典全解 (1)
- Android实现XML解析技术 (转载http://www.cnblogs.com/hanyonglu/archive/2012/02/28/2370675.html)...
- Oracle Goldengate在HP平台裸设备文件系统OGG-01028处理
- taobao淘宝 开源的项目tair 简介
- 初级算法——删除排序数组中的重复项
- 本机tomcat的server.xml被还原的问题及解决办法
- linux caffe ssd 编译,Ubuntu 16.04 编译 Caffe SSD
- 静态资源文件自动压缩并替换成压缩版本(大型网站优化技术)
- 如何使用STM32 HAL库驱动TFT-LCD实现手画板功能
- day16-正则表达式
- 性能测试中设计性能场景
- 216.组合总和III 17.电话号码的字母组合
热门文章
- 消息推送服务器推pc,PC浏览器消息实时推送的解决方案 ——EPush推送平台
- dubbo @service注解 过时
- openFOAM学习笔记(三)—— char和string相关的类
- 机器学习——时间序列分析
- android智能识别技术,一种基于Android的智能心音听诊与识别系统
- 一种不太聪明的电话语音识别方案
- 减轻产品风险的测试设计技术
- 河南大学计算机系导师张重生,AI驱动的甲骨缀合 ——附新缀十则 [张重生]
- 耳机主动降噪测试(ANC)-耳机被动降噪测试(PNC),蓝牙耳机测试-
- Solaris10中级读书笔记之二:管理本地磁盘设备