css中_box的属性包括,css box-sizing 属性

box-sizing：content-box | border-box

适用于：所有接受和的元素

content-box：

padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box：

padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型

IE8 及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的 IOS 和 Android 浏览器也需要加上-webkit-。实际上，很多 reset.css 或者 normal.css 里都包含如下 CSS 语句，也是比较赞成的用法：_, _:before, \*:after {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

复制代码

举例

box-sizing 布局三栏目案例div{

height:700px;

float:left;

}

div.left{

width:25%;

background:red;

}

div.cent{

width:50%;

box-sizing:border-box;/_可以改变元素以使其宽度包含填充_/

/_ 现在整个元素,包括填充在内,占页面总宽度的 50%,所以元素的组合宽度为 100%,这全程它们很好地适应于它们的容器._/

background:yellow;

padding:0 20px;/_加了这个会使盒子内容溢出但是 box-sizing 很好的自适应了_/

}

div.right{

width:25%;

background:blue;

}

如果为 content-box 那么就会把 div right 挤下去复制代码

css中_box的属性包括,css box-sizing 属性相关推荐

面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
任何的html标记都拥有style属性,【判断题】在CSS中,任何的HTML标记都拥有style属性。...
[判断题]在CSS中,任何的HTML标记都拥有style属性. 更多相关问题明代以后,皇帝身边的内朝官的名称是(). 明代前期,官方比较推崇哪一画派?(). 明代家具的风格特点概括起来有( ). 明 ...
css中width是什么意思,css width是什么意思
width是宽度的意思,它是CSS中的一个用于设置元素宽度的属性. width属性设置元素的宽度. width属性定义元素内容区的宽度,在内容区外面可以增加内边距.边框和外边距:行内非替换元素会忽略这 ...
CSS中设置字体样式的5种常用属性—让字体设置再无难点
设置字体样式的5中常用属性如下 1:color 设置字体颜色,也可以设置其他颜色 2:font-size 设置字体大小 (1).设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的 ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS中expression怎么用？ CSS expression详解
什么是CSS expression? IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript脚本关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
css中背景颜色用哪个,CSS 背景颜色
颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...
css中indent是什么意思,css中text-indent用法及与padding的区别详解
语法: text-indent : length 参数: length : 百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值.请参阅长度单位说明: 检索或设置对象中的文本的缩进. 在被另一 ...

css中_box的属性包括,css box-sizing 属性

css中_box的属性包括,css box-sizing 属性相关推荐

最新文章

热门文章