box-sizing的属性值

box-sizing属性值及作用

content-box

这是box-sizing的默认属性值
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型

border-box

怪异盒模型，一般在IE浏览器中默认是怪异盒模型。

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值

inherit

规定元素是从父元素那里继承box-sizing的属性值

注意

box-sizing 属性是CSS3的新特性——IE 以及 Chrome 支持 box-sizing 属性；Firefox需要加上-moz前缀；Safari需要加上-webkit前缀。

box-sizing的属性值相关推荐

网页中的盒模型css属性,详解CSS中的Box Model盒属性的使用
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: ...
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 ...
html中设置data-*属性值并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
JavaScript学习（八）—属性节点和属性值的操作
JavaScript学习(八)-属性节点和属性值的操作方式一: 利用元素节点的attributes属性来获取该元素身上所有的属性格式1:元素节点.attributes 返回值:返回值为所有属性的节 ...
min-width、max-width属性中min-content、max-content的含义，css中minmax()用法、1fr单位的含义----使页面具有相应性的属性以及属性值
min-width.max-width属性中min-content.max-content的含义,css中minmax()用法.1fr单位的含义 min-width 表示容器的最小宽度 max-wid ...
CSS属性以及属性值（样式）
前面讲解了CSS的各种规定,具体能应用到哪些方面呢? (一)文字排版 1.字体我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设 ...
html中display属性是什么意思,HTML中display属性的属性值有哪些
HTML中display属性的属性值有哪些发布时间:2020-09-26 14:35:20 来源:亿速云阅读:102 作者:小新这篇文章主要介绍了HTML中display属性的属性值有哪些,具有 ...
js获取属性值,自定义属性，修改移除属性值
补充:由于不清楚一些属性是内置属性还是自定义属性所以h5规定自定义属性使用date-开头作为属性并赋值案例1: <body><div date-index="1&qu ...
react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...