zoukankan      html  css  js  c++  java
  • CSS中box-sizing属性的作用

    今天在项目中看到box-sizing这个属性,以前用过,但是不常用!注意,它是CSS3里的属性喔!

    W3C 盒子模型:标准盒模型,是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型,它也是标准 w3c 盒子模型。

    IE盒子模型:怪异盒模型,是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模型,但由于其自身的特殊性,手机页面中也有使用怪异盒模型。

    box-sizing:content-box | border-box

    默认值:content-box

    适用于:所有接受width和height的元素

    1、content-box:

    padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即width + border + padding,表现为标准模式下的盒模型。box-sizing默认值为content-box,可以不写。

    1 #square{
    2     width:300px;
    3     height:300px;
    4     background:red;
    5     padding:10px;
    6     border:10px solid transparent;
    7 }

    2、border-box:

    padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义border和padding也不会改变对象的实际宽度,表现为怪异模式下的盒模型。

    1 #square{
    2     width:300px;
    3     height:300px;
    4     background:red;
    5     padding:10px;
    6     border:10px solid transparent;
    7     box-sizing:border-box;
    8 }

    注意:box-sizing 属性是CSS3的新特性——IE、Opera 以及 Chrome 支持 box-sizing 属性;Firefox需要加上-moz前缀;Safari需要加上-webkit前缀。

    box-sizing: border-box的典型应用:

    创建一个width为100%,border为10px的div。

    问题:不设置box-sizing的情况下,div会溢出。

    解决方法:设置box-sizing: border-box。

    1 #square{
    2     width:100%;
    3     height:100px;
    4     border:10px solid grey;
    5     box-sizing:border-box;
    6     background:red;
    7 }
  • 相关阅读:
    POJ 3468 区间更新,区间求和(经典)
    HDU 1698 区间更新
    POJ 2828 单点更新(好题)
    HDU 2795 单点更新,区间优先查找(想法)
    HDU 1394 树状数组求逆序对
    HDU 1754 单点更新,求区间最大值
    Servlet 3.0 对异步处理的支持
    Servet3.0于Servlet2.5比较
    你的灯还亮着吗读书笔记3
    你的灯还亮着吗读书笔记2
  • 原文地址:https://www.cnblogs.com/xiaxue168/p/10697937.html
Copyright © 2011-2022 走看看