概述

那么 css 属性中width = ？呢
在标准的w3c的规定中 width 的真实值等于 content 区域的值，不加上 padding 与 border 的值
这虽然与我们常规的理解是有所偏差，因为现实角度理解一个盒子宽度应该是 = 内边距 + 边框 + 内容空间宽度，但是标准就是标准你必须遵守；
而标准有时候也是有问题的，在IE5/6中 width的值 = content的width + padding的width + border的width，所以开发的时候要注意；

术语:

padding : 内边距；
margin ：外边距；
border ：边框；

box-sizing

这是一个css3中新增的一个属性，可以用来控制，width的值是否包括边框和内边距，它有两个值：

content-box ：代表 width属性和 height属性的值是不包括内边距和边框值的，它是默认属性；
border-box ：代表 width属性和 height属性的值是包括内边距和边框值的；

width : auto 和 width : 100% 的区别

在box-sizing 为 content-box 的时候：
1. width : auto 时，width = 父级的 width - 自己的 padding - 自己的 border；
2. width ：100% 时，width = 父级的 width；
在box-sizing 为 border-box 时：两个并无区别

ps：这上面所指父级元素的 box-sizing 均为 content-box 的条件下

转载于:https://www.cnblogs.com/iron-whale/p/5944682.html

padding/border与width的关系相关推荐

CSS3 放飞自我1——margin,padding,border到底有啥关系？
在开始严肃地讨论技术之前,我想先说几句题外话.从今天开始呢,我将陆续更新一些有关于CSS3的一些我觉得很有必要了解的知识,也包括一些干货.这些东西不一定是难点,也不一定都是CSS3新出的,却是我觉得重 ...
【CSS】padding,border,margin与width宽度的关系
padding,border,margin这三样东西不算难,算是在CSS中老生常谈的东西,但是要注意其对width的影响, 直接上一段极其简单的代码: <!DOCTYPE html> &l ...
android:layout_height、android:layout_width、android:height、android:width的关系与区别
一直一来对android:layout_height.android:layout_width.android:height.android:width这几个属性的关系有些不理解,既然有了androi ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
css中width、height、margin、padding默认值总结
默认值 left top right bottom width height: 默认值为 auto margin padding: 默认值为 0 百分比参照于谁 width ...
css属性width默认值width: auto与width: 100%区别
width: auto 子元素(包括content+padding+border+margin)撑满整个父元素的content区域. 子元素有margin.border.padding时,会减去子元素 ...
html offsetwidth 字符串宽度,scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
【转】CSS3 Box-sizing
box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么C ...
CSS超全笔记（适合新手入门）
CSS CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等 ...

padding/border与width的关系

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

概述

术语:

box-sizing

width : auto 和 width : 100% 的区别

padding/border与width的关系相关推荐

最新文章

热门文章

padding/border与width的关系

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

概述

术语:

box-sizing

width : auto 和 width : 100% 的区别

padding/border与width的关系相关推荐

最新文章

热门文章

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。