zoukankan      html  css  js  c++  java
  • 盒模型宽高定义boxsizing

    以前盒模型默认的宽高是指内容的宽高。css3后可以用box-sizing来指定宽高。

    box-sizing:content-box | border-box

    默认值:content-box

    content-box:
    padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding )
    此属性表现为标准模式下的盒模型。
    border-box:
    padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )
    此属性表现为怪异模式下的盒模型。

    示例:

    • content-box:

      .test1{ box-sizing:content-box; 200px; padding:10px; border:15px solid #eee; }

    • border-box:

      .test2{ box-sizing:border-box; 200px; padding:10px; border:15px solid #eee; }

  • 相关阅读:
    上架的问题
    moya rxswift的简单实用
    MySql的简单使用,所有的代码基于MAC
    H5测试区别与PC端测试关注点
    测试小结
    测试之找回密码
    转Web安全测试之XSS
    一个最简单的登录页面测试case
    web测试特别点
    关于web测试
  • 原文地址:https://www.cnblogs.com/snowinmay/p/2936267.html
Copyright © 2011-2022 走看看