文章目录
  1. 1. 标准和IE盒式模型
  2. 2. 盒式模型兼容性问题解决
  3. 3. CSS3弹性盒模型
    1. 3.1. 水平或者垂直布局
    2. 3.2. 反向分布
    3. 3.3. 具体分布
    4. 3.4. 盒子尺寸

如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),那么我们可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念,通过定义一系列与盒子相关的属性(内容、填充、边框、边界),可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。虽然CSS中没有盒子这个单独的属性对象,但它却是CSS中无处不在的一个重要组成部分。

盒子模型如下:

一些HTML元素如div、p等块元素,默认情况下就是一个盒子,有些内联元素如span、a等虽然默认不是盒子,但也可以通过CSS中的display属性将其声明成盒子,在HTML文档中,不是盒子的元素各自的宽度为其所呈现的信息内容宽度,它们彼此间互相紧靠从左到右依次排列,直到占满整个浏览器窗口后自动行。对于是盒子的元素,如果没有特殊设置,其默认总是占单独一行,宽度为浏览器窗口的宽度,在其前后的元素不管是不是盒子只能排列在它的上面或者下面,即上下累加着进行排列。每个盒子都可以看成是由从内到外的四个部分构成,即内容、填充、边框和边界,CSS为这四个部分规定了相关的属性,通过对这些属性的控制可以丰富盒子的实际表现效果。

标准和IE盒式模型

W3C标准盒式模型和传统IE盒式模型(IE6以下版本)主要区分在于内盒模型和外盒模型上,就是width的计算范围问题。

W3C标准盒式模型中:

width = contentwidth

传统IE盒式模型中:

width = content + padding + border;

用内外盒来说的话,W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度。

盒式模型兼容性问题解决

  1. <!–[if IE]>

    IE浏览器可以解析出<!–[if IE]><![endif]–>里面包含的代码。而其他浏览器则会将其当作注释。因此你可以在里面加上任何你只想让IE解析到的东西。

    <!--[if IE]> 
        <link href="ie_styles.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    

    然后,我们也可以定义对哪些版本的IE产生影响。

    比如:<!–[if lt IE 9]> 表示低于IE9的版本,lte则表示低于等于,gt表示高于,gte表示高于等于。

    此外,对于非IE浏览器,这可以使用

    <!--[if !IE]><!--> 
        <link href="notie_styles.css" rel="stylesheet" type="text/css" /> 
    <!--<![endif]-->
    

    请注意它与<!–[if IE]>写法的不同,在IE浏览器中,里面包含的内容则会被当作注释,而非IE浏览器,则是当作普通的代码解析。

  2. CSS漏洞

    <head> 
        <style> 
            .hack{ 
                color:#000000; /* FF,OP支持 */ 
                color:#0000FF\0; /* IE8支持*/ 
                *color:#FFFF00; /* IE7支持 */ 
                _color:#FF0000; /* IE6支持 */ 
            } 
            body:nth-of-type(1) .hack{ 
                color: #00FF00;/*Webkit */ 
            } 
        </style> 
    </head> 
    <body> 
        <p class="hack"> CSS Hack ! </p> 
    </body>
    

    上面这段代码,在不同浏览器中”CSS Hack”将会显示出不同的颜色出来。

    其中Firefox和Opera显示黑色(#000000),IE8显示蓝色(#0000FF),IE7显示黄色(#FFFF00),IE6显示红色(#FF0000),Chrome和Safari则显示绿色(#00FF00)。

    只要将color改为你需要控制的任何属性,就可以在任何主流浏览器实现对其属性的Hack~

    尤其需要注意的是,写的时候要严格按照其先后顺序。

  3. DOCTYPE声明

    在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

CSS3弹性盒模型

Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。

传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序,也可以反转之。要开启弹性盒模型,只需设置拥有子盒子的盒子的display的属性值为box(或inline-box)即可。

display:-webkit-box;
display:-moz-box;
display: box;

水平或者垂直布局

“box-orient”定义分布的坐标轴:vertical和horizional。这两个值定义盒子如何显示。

body{
    display: box;
    box-orient: horizontal;
}
组件水平排列 

反向分布

“box-direction”可以设置盒子出现的顺序。默认情况下,只需定义分布坐标轴——box随html流分布。如果为水平坐标轴,则从左到右分布;垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”,则反转盒子的排列顺序。

body {
    display: box;
    box-orient: vertical;
    box-direction: reverse;
} 

具体分布

属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义,盒模型将首先分布这些组,所有这些盒子将在每个组中。分布将从小到大排列。

body {
display: box;
box-orient: vertical;
box-direction : reverse;
}
#box1 {box-flex:1;box-ordinal-group: 2;}
#box2 {box-flex:2;box-ordinal-group: 2;}
#box3 {box-flex:2;box-ordinal-group: 1;} 

从上到下依次顺序是: 2 1 3;

盒子尺寸

默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。box-flex如何对父容器的宽度进行划分,三个子块分别设置了1、2、2,也就是把这个父容器分成5份。

如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。

文章目录
  1. 1. 标准和IE盒式模型
  2. 2. 盒式模型兼容性问题解决
  3. 3. CSS3弹性盒模型
    1. 3.1. 水平或者垂直布局
    2. 3.2. 反向分布
    3. 3.3. 具体分布
    4. 3.4. 盒子尺寸