zoukankan      html  css  js  c++  java
  • CSS3完善和模式

    CSS3改善了传统盒模型架构,增强盒子构成要素的功能,扩展了盒模型显示的方式,具体描述如下

    •   改善构造:除了传统的内容区域,边框区,补白区和边界区外,为盒子新增了轮廓区。

    •   增强功能:内容增强CSS自动添加内容功能,增强内容溢出、换行处理,匀速多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框,等功能;完善margin:auto;布局特性。

    •   扩展显示:完善传统的块显示特性,增强弹性,伸缩盒显示功能,丰富网页布局手段。

    定义显示方式

      为了兼顾IE的怪异模式,CSS3对盒模式进行了改善,定义了box-sizing属性,该属性能够事先定义盒模式尺寸解析方式。box-sizing属性的基本语法如下

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

        box-sizing属性初始值为content-box,适合所有能够定义宽高的元素,取值说明:

          content-box:该属性将维持css2.1盒模式的组成模式,既元素,width/height=border+padding+content。

          border-box:该属性值将重新定义css2.1盒模式组成模式,既元素,width/height=content;

    理解:

      如果这个CSS不写  默认就是content-box  

        content-box :border和padding不算入width中。比如:一个100px的宽度的div,如果他的padding值为20px,border为5px,那么他的实际宽度就为100 + 20*2 + 5*2 = 150px

        border-box :border和padding算入width中。比如:一个100px的宽度的div,如果他的padding值为20px,border为5px,那么他的内容宽度就为100 - 40*2 - 5*2 = 10px。

  • 相关阅读:
    bzoj 3992: [SDOI2015]序列统计【原根+生成函数+NTT+快速幂】
    bzoj 3771: Triple【生成函数+FFT+容斥原理】
    poj 2891 Strange Way to Express Integers【扩展中国剩余定理】
    hdu 1573 X问题【扩展中国剩余定理】
    bzoj 2023: [Usaco2005 Nov]Ant Counting 数蚂蚁【生成函数||dp】
    hdu 1521 排列组合【指数型生成函数】
    JavaScript数据类型的检测
    JavaScript数据类型
    原生JS模拟jQuery $
    String基础
  • 原文地址:https://www.cnblogs.com/xiaowie/p/10620017.html
Copyright © 2011-2022 走看看