您的位置：首页 > Web前端 > CSS

Css3属性box-sizing

2017-06-09 13:47 519 查看

今天和大家分享一个Css3的属性：box-sizing属性。

语法：

box-sizing: content-box | border-box | inherit ;

值：

1. content-box 我的理解是，设置的宽度不包含内边距，边框，外边距。

2. border-box 我的理解是，设置的宽度包含内边距，边框，外边距。

3. inherit 这个单词的意思是，从父元素继承。

虽然我从来不不主动去设置这个属性，因为设置之后相当于怪异模式解析。我还是习惯普通盒子模型来查看。说白了还是个人习惯问题，移动端还是比较推荐使用这个属性的。

如果上面我的解释不清楚的话那就看看下面这两个图片：

如果还不明白，下面是代码，你自己打开看看吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Css3box-sizing属性练习</title>
<style>
#div1 {box-sizing:border-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;}
#div2 {box-sizing:content-box; height:200px; width:200px; background:red; margin:10px; border:1px solid #000; padding:20px;}
</style>
</head>
<body>
<div id="div1">border-box</div>
<div id="div2">content-box</div>
</body>
</html>

如果还没懂，请看下面这张图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3属性

相关文章推荐

新的分享

章节导航