zoukankan      html  css  js  c++  java
  • css盒子模型_css全局设置border-box

    box-sizing 属性 

    1.content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。 

    2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width,height内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

    全局设置border-box的好处

    全局设置 border-box 很好,更符合我们通常对一个「盒子」尺寸的认知。,其次它可以省去一次又一次的加加减减,它还有一个关键作用:让有边框的盒子正常使用百分比宽度。但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突,不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决。  

    字由https://www.wode007.com/sites/73248.html 中国字体设计网https://www.wode007.com/sites/73245.html

    全局设置border-box代码实现

    html {
      box-sizing: border-box;
    }
    *,*::before,*::after {
      box-sizing: inherit;
    }
    

      

    说明:

    选择器 * 无法覆盖到伪元素,所以需要给 :before 和 :after 分别设置。 
    box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。
    box-sizing: inherit 使元素尊重其父元素box-sizing 规则。
     
  • 相关阅读:
    未来的计划和考虑
    jquery 常用的方法
    对于页面动态加载的元素事件无效的解决方案
    Myeclipse8.5中svn插件安装方法总结
    JS读RSS
    JAVA的RSS处理
    环境:win7+ie8 IE8的F12不起作用,原因如下:
    关闭和释放JDBC
    关于Eclipse无法生成class文件的问题
    JavaScript跨域总结与解决办法
  • 原文地址:https://www.cnblogs.com/ypppt/p/13332232.html
Copyright © 2011-2022 走看看