box-sizing用在哪里和怎么用

很惭愧,才第一次看到 box-sizing 这个CSS属性,查找了 box-sizing 相关知识点,很多都是讲述 box-sizing 这个属性是什么意思,但是这个属性用在哪里?为什么要用这个属性?怎么用好这个属性?这样的资料找了半天才找到一篇,不过这一篇文章写得是非常不错,我这里给上链接:css3 box-sizing属性详解,这篇文章是转自W3CPLUS的,可是原始的文章现在居然是要付费才能看了,唉,文章确实不错,但是这个付费就不太好了。

所以在这里,我并不进一步讲 box-sizing 这个属性怎么回事,看上面的文章写得清清楚楚了,这篇文章只是对其中的一些做一些解释。

首先看一段示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-sizing</title>
</head>
<body>
<div style="margin: 0 auto;width: 700px;font-size: 30px;">在chrome浏览器下,出现了2种盒子模型</div>
<form>
1,<input style="width: 100px;">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
&lt;input style="width: 100px;"&gt;:W3C盒子模型
</pre>
<br><br>
2,<input style="width: 100px; border: 20px solid black;">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
&lt;input style="width: 100px; border: 20px solid black;"&gt;:W3C盒子模型
</pre>
<br><br>
3,<input style="width: 100px;" type="submit" value="aaa">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
&lt;input style="width: 100px;" type="submit" value="aaa"&gt;:IE盒子模型
</pre>
<br><br>
4,<input style="width: 100px; border: 10px solid black;" type="submit" value="aaa">
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
&lt;input style="width: 100px; border: 10px solid black;" type="submit" value="aaa"&gt;:IE盒子模型
</pre>
<br><br>
5,<select style="width: 100px; border: 10px solid black;">
    <option>aaa</option>
</select>
<pre style="display: inline-block;font-weight: bold;margin-left: 10px">
&lt;select style="width: 100px; border: 10px solid black;"&gt;
    &lt;option&gt;aaa&lt;/option&gt;
&lt;/select&gt;
:IE盒子模型
</pre>
</form>
</body>
</html>

上面代码块中的html拷贝后,需要将其中全角的&转为半角的&,下面是截图显示:

可以看到,在同一个浏览器下面居然同时出现了2种盒子模型,从上面的文章中可以看到,form表单中的有些元素比如

<submit>,<select>

默认还是IE盒子模型,所以第一个用法:在表单的某些元素中指定 box-sizing 是什么,明确指定,如此不会混淆。第二个用法:用在布局中,上文中的例子已经说得非常仔细易懂了,这里不再重复。

再接着上面那个例子,加入 bootstrap.css ,如:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">

截图显示如下:

因为bootstrap.css中包含如下定义:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

所以,bootstrap从一开始就约束 boxmodel 为IE的盒子模式,如此就统一了标准,非常棒。

另外,不用 box-sizing 也是可以的,就是在调整大小的时候,就是要麻烦一些,但是也能做到。

发表评论

邮箱地址不会被公开。 必填项已用*标注