zoukankan      html  css  js  c++  java
  • 理解盒子模型

    一、组成

    一个盒子包括了content(实际内容)、border(边框)、padding(内边距)和margin(外边距)。

    二、两种盒子模型:

    IE盒模型:

        width=content+padding+border

        盒子实际大小:width

        盒子所占空间为 width+margin

    ie

    图一:IE盒模型

    标准盒模型:

        width=content

        盒子实际大小:width+padding+border

        盒子所占空间为 width+padding+border+margin

    为c

    图二:标准盒模型

    三、box-sizing:

    box-sizing有三个取值:

    1、content-box:使元素遵循标准 w3c 盒子模型(默认值)。

    2、border-box:使元素遵循ie 盒子模型。

    3、inherit: 规定应从父元素继承 box-sizing 属性的值。

    四、其它:

        遵循ie盒子模型时,不管如何设置padding和border(小于width/2),它只在盒子里面伸缩,不影响整体的宽高。

  • 相关阅读:
    RSA加密系统
    安装homebrew
    go helloworld
    下载文件checksum
    6月3日
    6月1日
    5月30日
    5月28日
    5月26日
    5月24日
  • 原文地址:https://www.cnblogs.com/superlizhao/p/7965940.html
Copyright © 2011-2022 走看看