CSS box-sizing属性

时间:2023-02-25 11:01:28

全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

专门抄一遍是因为,我想当然的以为标准盒子模型设置的宽高是包括padding的,但是实践中好像并不是这样的。

box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

/* 关键字 值 */
box-sizing: content-box;
box-sizing: border-box; /* 全局 值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

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 + 内容的 width,height = border + padding + 内容的 height。

CSS box-sizing属性

一些专家甚至建议所有的Web开发者们将所有的元素的box-sizing都设为border-box

*, *:before, *:after {
/* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
-webkit-box-sizing: border-box; /* Firefox (desktop or Android) 28- */
-moz-box-sizing: border-box; /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
box-sizing: border-box;
}

CSS box-sizing属性的更多相关文章

  1. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  2. css 背景(background)属性、背景图定位

    background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  3. CSS Box Model(盒子模型)

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  4. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  5. CSS 盒子模型属性

    盒子模型(Flexible Box) 属性 属性 说明 CSS box-align 指定如何对齐一个框的子元素 3 box-direction 指定在哪个方向,显示一个框的子元素 3 box-flex ...

  6. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  7. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  8. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  9. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  10. 利用CSS的&commat;font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

随机推荐

  1. HTTP协议的报文结构

    HTTP 有两类报文: (1) 请求报文----从客户向服务器发送请求报文,见图6-12(a). (2) 响应报文----从服务器到客户的回答,见图6-12(b). 由于 HTTP是面向文本的(tex ...

  2. --查询nvarchar&lpar;max&rpar;的表和字段

    --查询nvarchar(max)的表和字段 select 'insert into #tempTabelInfo select '''+d.name+''', '''+a.name+''', max ...

  3. NYOJ题目101两点距离

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsEAAAIBCAIAAAAnO/WXAAAgAElEQVR4nO3dq3IbSeM34L0Jc/O9BW

  4. ListView中itemz中控件的点击事件和条目点击事件冲突

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  5. erlang 线上分析工具集锦

    1.Recon-Erlang线上系统诊断工具(引自): Erlang系统素以稳定可靠闻名,但是它也是c实现的,也是要管理比如内存,锁等等复杂的事情,也会出现Crash,而且crash的时候大部分原因是 ...

  6. 在HTML下,如何为多个选择框提取数据并序列化

    如果同时存在选择框及下拉框,如果用JQUERY获取相关数据呢? <form id="deploy-form"> <checkbox>多选框 <sele ...

  7. &lbrack;转&rsqb; 用GDB调试程序(五)

    转:http://blog.csdn.net/haoel/article/details/2883 查看运行时数据———————        在你调试程序时,当程序被停住时,你可以使用print命令 ...

  8. kmp代码实现

    /* kmp彻底理解 next 数组 :用来指导S[i]串 T[j]串 对应字符失配 指导 i 不回溯,即j应该走多少个位置 next[j]:j位置前一个元素 需要 计算某个字符对应的next值,就是 ...

  9. 剑指offer-面试题18&period;树的子结构

    题目:输入两棵二叉树A和B,判断B是不是A的子结构. 二叉树节点定义如下: struct BinaryTreeNode { int m_nValue; BinaryTreeNode* m_pLeft; ...

  10. java5 - 数组与排序算法

    数组是什么? 一.一维数组 1 声明与定义的区别 一般的情况下我们常常这样叙述, 把建立空间的声明称之为"定义", 而把不需要建立存储空间称之为"声明". 很明 ...