1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

解析CSS3中的Box-Sizing属性

作者:用户 来源:互联网 时间:2016-12-07 10:51:07

浏览器属性边框sizes属性宽度border并排

解析CSS3中的Box-Sizing属性 - 摘要: 本文讲的是解析CSS3中的Box-Sizing属性, 在重构移动端页面的时候,我们经常会遇到两个框架并排的情况,并且需要宽度自适应、等宽,有边框这样的情况,我平时的方法就是用定位来处理,然后用负值定位来解决,

在重构移动端页面的时候,我们经常会遇到两个框架并排的情况,并且需要宽度自适应、等宽,有边框这样的情况,我平时的方法就是用定位来处理,然后用负值定位来解决,但是后来发现可以用CSS3中的Box-Sizing属性来搞定。好吧,立马推荐出来给大伙。

语法:

box-sizing: content-boxborder-boxinherit;

定义:

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

也就是说以前我们如果用到了border和padding时,我们元素的width要相应的减掉,border和padding的宽度才能够保持宽度一致。但是用了box-sizing后,就可以不用减了。

代码如下:

  1. <!DOCTYPE html
  2. <html> 
  3. <head> 
  4. <style> 
  5. div.container { 
  6.     width:30em; 
  7.     border:1em solid; 
  8. div.box { 
  9.     box-sizing:border-box; 
  10.     -moz-box-sizing:border-box; /* Firefox */ 
  11.     -webkit-box-sizing:border-box; /* Safari */ 
  12.     width:50%; 
  13.     border:1em solid red; 
  14.     float:left; 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <div class="container"> 
  19.   <div class="box">这个 div 占据左半部分。</div> 
  20.   <div class="box">这个 div 占据右半部分。</div> 
  21. </div> 
  22. </body> 
  23. </html> 

这个只实用于移动端和PC的高富帅浏览器,PC端屌丝浏览器不支持,看情况使用吧!



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索浏览器 , 属性 , 边框 , sizes属性 , 宽度 , border 并排 css3 box sizing、box sizing属性、css box sizing属性、box sizing、css box sizing,以便于您获取更多的相关知识。

javascript-css属性中的px和em区别

...单位,能确保其在所有浏览器中兼容,不会出现因浏览器解析px不同而导致样式出现偏差。 解决方案七: 没啥区别吧,1em=16px,都是调整大小的 解决方案八: 只需要知道1em = 16px 即可。

css3中box-sizing属性用法详解

...的宽包含border和padding这两个属性,今天我们能够实现了,box-sizing这个属性能让我们心想事成,随心所欲!下面我和大家分享下box-sizing这个属性: 说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器...

无线端web开发学习总结

...准备工作:一、必需的reset样式库1、其中的重点是盒模型box-sizing:由原来pc端的content-box改为border-box。 *,*:before,*:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } 2、设定root元素的字体大小,便于子元素rem单...

布局:box-sizing ,clear float,flex

...类用处以后在总结example1 给父一级的添加 overflow:hidden; box-sizing re. 盒模型:border,padding,margin box-sizing: border-box, content-box content-box(默认): 元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上...

HTML5面试题目汇总(三)

...位置,absolute会覆盖文档流中的其他元素。 介绍一下box-sizing属性。     box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。 content-box:让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding +...

前三篇
后三篇