box-sizing的使用

ゞ浴缸里的玫瑰 2021-09-16 11:03 134阅读 0赞

# box-sizing #

人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 `box-sizing` 的CSS属性。当你设置一个元素为 `box-sizing: border-box;` 时，此元素的内边距和边框不再会增加它的宽度。这里有一个与前一页相同的例子，唯一的区别是两个元素都设置了 `box-sizing: border-box;` ：

.simple {
      width: 500px;
      margin: 20px auto;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    
    .fancy {
      width: 500px;
      margin: 20px auto;
      padding: 50px;
      border: solid blue 10px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

<div class="simple">

我们现在一样大小了！

</div>

<div class="fancy">

万岁！

</div>

![70][]

既然没有比这更好的方法，一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上：

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

这样可以确保所有的元素都会用这种更直观的方式排版。

不过 `box-sizing` 是个很新的属性，目前你还应该像我上面例子中那样使用 `-webkit-` 和 `-moz-` 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持[IE8+][IE8]的。

[70]: /images/20210813/0e3972ad76714639a833f9325c769c8a.png
[IE8]: http://caniuse.com/#search=box-sizing

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关前端ajax的使用以及接口的使用

https://www.cnblogs.com/suoning/p/5809106.html https://www.cnblogs.com/7z7chn/ https:/

ゞ浴缸里的玫瑰/ 2022年09月12日 11:54/ 0 赞/ 297 阅读

相关 1--springBoot的注解使用，aspectj注解的使用，配置类的使用

maven 的pom.xml文件： <dependencies></dependencies> 用来包含多个依赖 <dependency></dependency> 用来

素颜马尾好姑娘i/ 2022年06月06日 03:18/ 0 赞/ 353 阅读

相关 Interceptor的使用和使用场景

一、引言在上一篇文章中，介绍了 Interceptor 和 Filter 的区别和执行顺序。我们可以知道 Filter 依赖于 Servlet，它主要是针对 URL 地

今天药忘吃喽~/ 2022年05月23日 05:58/ 0 赞/ 342 阅读

相关 IDEA的使用：6.Module的使用

一.模块的概念(Module) 在 Eclipse 中我们有 Workspace（工作空间）和 Project（工程）的概念，在 IDEA 中只有 Project（

港控/mmm°/ 2022年05月11日 09:18/ 0 赞/ 241 阅读

相关 sonar的使用

1、在maven的settings.xml配置文件中，加入： <profile> <id>sonar</id> <activation

Bertha 。/ 2022年02月26日 02:35/ 0 赞/ 334 阅读

相关 vue的简单使用5-过滤器的使用

vue中过滤器可以格式化常见的文本，vue中的过滤器只能在插值表达式’\{ \{\}\}‘和v-bind中使用 Vue中的全局过滤器的使用定义一个Vue全局过滤

桃扇骨/ 2022年02月03日 22:57/ 0 赞/ 372 阅读

相关 git的使用

[https://www.cnblogs.com/sundaysme/p/10901249.html][https_www.cnblogs.com_sundaysme_p_10

超、凢脫俗/ 2021年11月04日 09:24/ 0 赞/ 403 阅读

相关【Git 使用】- Git 的基本使用

目录一、向本地仓库添加文件 1、创建本地仓库 2、添加文件二、修改文件内容并提交 1、修改文件内容 2、查看修改日志三、删除本地仓库文件 1、直接删除

我会带着你远行/ 2021年09月20日 21:50/ 0 赞/ 566 阅读

相关 Pipe类的使用、SelectorProvider类的使用

Pipe.SinkChannel和Pipe.SourceChannel类的使用 Pipe.SinkChannel类标识Pipe的可写入结尾的通道： ![在这里插入图片

川长思鸟来/ 2021年08月30日 17:42/ 0 赞/ 590 阅读

相关 VS 的使用使用行数

规范代码 1.代码整体右移将要右移的代码选中，按tab键 2.代码整体左移将要左移的代码选中，按shift+tab键显示行数 ![在这里插入图片

╰半夏微凉°/ 2021年08月29日 12:17/ 0 赞/ 744 阅读