你的位置:首页 > 软件开发 > 网页设计 > box

box

发布时间:2017-08-15 18:00:21
1、box-sizing属性功能官方说明文档为:http://www.w3school.com.cn/cssref/pr_box-sizing.aspbox-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。通俗来说就是:定义盒模型尺寸。box-sizing属性有一 ...

1、box-sizing属性功能

官方说明文档为:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

通俗来说就是:定义盒模型尺寸。

box-sizing属性有一下四种值:
box-sizing: content-box|border-box|inherit;

 

2、本文主要讲解:border-box值

盒模型的宽度元内边距(padding)和边框(border)。

示例代码:

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="UTF-8" />    <title>box-sizing 属性应用</title>    <style type="text/css">      *{        padding: 0;        margin: 0;        /*关键属性配置*/        box-sizing: border-box;      }      #test{        width: 200px;        height: 200px;        padding: 10px;        border: 2px solid green;      }    </style>  </head>  <body>    <div id="test">      box-sizing 属性应用    </div>  </body></html>

F12审查元素:

box

 

 

 box-sizing: border-box; 在移动端应用很多!

bootstrap框架中也应用,所有的元素的默认盒模型均为 box-sizing: border-box;:

box

3、兼容性

http://caniuse.com/#search=box-sizing

box

 

兼容IE8以上主流浏览器!

原标题:box

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录