zoukankan      html  css  js  c++  java
  • box-sizing重置盒子模型计算规则

    目标大纲

    一.语法声明

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

    二.属性值说明

    content-box 在宽度和高度之外绘制元素的内边距和边框
    border-box  为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
    inherit   继承 父元素 box-sizing属性的值

    三.浏览器的兼容性

     

    说明IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-

    推荐写法 
       *, *:before, *:after {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
      }

    测试代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>box-sizing</title>
     6         <style>
     7              * {
     8                  margin: 0;
     9                  padding: 0;
    10              }
    11             .box {
    12                 background-color: #fff;
    13                 font-size: 12px;
    14                 width: 200px;
    15                 height: 200px;
    16                 border-width: 10px;
    17                 border-color: #34538b;
    18                 border-style: solid;
    19                 padding: 20px;
    20                 box-sizing: border-box;
    21                 -moz-box-sizing: border-box;
    22                 -webkit-box-sizing: border-box;
    23             }
    24         </style>
    25     </head>
    26     <body>
    27         <div class="box">
    28             该盒子边框是10px像素,内边距是20px像素,是算在盒子的宽高内的
    29             即:<span style="color: red;">box-sizing:border-box</span><span style="color: red;">内边距和边框</span>都将<span style="color: red;">在已设定的宽度和高度内进行绘制</span>
    30         </div>
    31     </body>
    32 </html>
    View Code

    参考资料

    Css3 使用参考指南

    学会使用box-sizing布局

  • 相关阅读:
    自动化测试如何解决验证码的问题
    python读取xml文件
    python实现简单爬虫功能
    python使用mysql数据库
    Prometheus 到底 NB 在哪里?- 每天5分钟玩转 Docker 容器技术(84)
    Prometheus 架构
    数据收集利器 cAdvisor
    Weave Scope 多主机监控
    Weave Scope 容器地图
    监控利器 sysdig
  • 原文地址:https://www.cnblogs.com/zjf-1992/p/6025747.html
Copyright © 2011-2022 走看看