zoukankan      html  css  js  c++  java
  • css3-box-sizing

    CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

    默认的css

          宽度是: width(宽) + padding(内边距) + border(边框) = 元素实际宽度

          高度是:height(高) + padding(内边距) + border(边框) = 元素实际高度

    这就意味着两个div元素相同的大小但由于设置了padding或border也会影响元素的大小比如:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>box-sizing</title>  
    <style type="text/css">
      *{
        margin: 0;
        padding: 0
      }
    
      .box1, .box2 {
          width: 100px;
          height: 100px;
      }
    
      .box1 {
          padding: 20px;
          border: 1px solid red;
      }
    
      .box2 {
          border: 1px solid blue;
      }
    </style>
    </head>
    <body>
      <div class="box1"></div>
      <div class="box2"></div>
    </body>
    </html>

    效果如下:

    相同的宽度和高度但由于box1增加了padding而宽度高度被撑大了:40(padding) + 100(宽度) + 2 (边框) = 142;

    CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

    如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

    从结果上看 box-sizing: border-box; 效果更好,也正是很多开发人员需要的效果。

  • 相关阅读:
    面试题--基础
    面试题---flask
    vue---07 支付和订单
    企业真题
    vue --06 购物车的实现
    Three.js 开发机房(四)
    Three.js 开发机房(三)
    Three.js 开发机房(二)
    Three.js 开发机房(一)
    Three.js 前言
  • 原文地址:https://www.cnblogs.com/qjuly/p/9093131.html
Copyright © 2011-2022 走看看