疯狂H5笔记 - 盒模型与布局相关属性

1.布局相关属性：

float：控制目标HTML组件的浮动方向。有属性值：left/right
clear：设置目标HTML组件的左右是否允许出现浮动对象：有属性值：none/left/right/both
overflow：设置当目标组件内容溢出时的溢出内容显示方式。有属性值：visible/auto/hidden/scroll
overflow-x：设置内容溢出时水平方向溢出的内容显示方式，属性值同overflow的属性值
overflow-y：设置内容溢出时垂直方向溢出的内容显示方式，属性值同overflow的属性值
visibility：设置目标对象是否显示。有属性值：visible/hidden

2.难以理解的一个属性：clip：rect(A B C D)，用于对目标元素进行裁剪，裁剪出一个矩形，只有在该矩形范围内才可见。有关A/B/C/D四个值对应的方向请参考网上

3.盒模型两种：inline和block两种，可以通过display属性来转换不同的两个盒模型

4.display有一个none属性值，用于隐藏目标对象，和visibility：hidden的区别在于：前者隐藏目标对象后还会释放目标对象的空间，后者依然会保留目标对象的空间

5.inline-block盒模型：通过display属性指定该属性值来实现这种盒模型，它是inline和block两个盒模型的综合体：这种盒模型的元素既不会独占一行，也支持通过width、height来指定宽度和高度。可以同时增加啊vertical-align:top来让多个inline-block盒模型的组件在顶端对齐

div>div{
    display: inline-block;
    vertical-align: top;
    ...
}

6.使用box-shadow属性可以对盒子添加阴影。box-shadow属性是一个复合属性，它包含如下五个值：hOffset：控制阴影在水平方向的偏移；vOffset：控制阴影在垂直方向的偏移；blurLength：控制阴影的模糊程度；scaleLength：控制阴影的缩放程度；color：控制阴影的颜色

7.CSS3新增的分栏功能实现方式很简单，只需要增加column-count属性即可，不过该属性需要指定不同的引擎的浏览器：

<style>
    div #content{
        column-count: 2;
        -moz-column-count: 2;
        -o-column-count: 2;
        -mx-column-count: 2;
        -webkit-column-count: 2;
    }
</style>

CSS3还提供了大量的属性用于实现分栏效果：

columns：这是一个复合属性，可同时指定栏目宽度、分栏数目两个属性值
column-width：为一个长度值，指定每个栏目的宽度
column-count：指定一个整数值，指定栏目数

column-rule：这是一个复合属性，可同时指定分隔条的宽度、样式、颜色
column-rule-width：指定栏目之间的分隔条的宽度
column-rule-style：指定分隔条的线型，如solid等
column-rule-color：设置分隔条的颜色

column-gap：为一个长度值，用于指定各栏目之间的间距
column-fill：用于控制栏目的宽度，有两个属性值：
    auto：随着内容的多少自动变化
    balance：将会统一成内容最多的那一栏的高度

8.CSS3还提供了一个盒模型：多栏布局：display：box;目前浏览器不支持标准的box属性值，因此实际使用时需要添加不同的浏览器的前缀如moz等：

div{
    display: box;
    display: -moz-box;
    display: -o-box;
    display: -webkit-box;
    display: -ms-box;
}

多栏布局和之前的column-count实现的分栏布局不一样，分栏布局只是将一篇文章分成多个栏目显示，多兰布局可以自己控制

CSS3还为box盒模型提供了如下属性：

box-orient：设置box盒模型里子元素的排列方向。有如下两个属性值：
    horizontal：水平排列。如果没有指定高度，则默认等于父容器的高度
    vertical：垂直排列。如果没有指定宽度，则默认等于父容器的宽度
box-ordinal-group：设置box盒模型里子元素的显示顺序
box-flex：设置box盒模型里子元素自适应宽度的比例。

如下简单的例子：

<style>
    #div1{
        /*指定多兰布局的组件里的子元素显示的方向为垂直方向*/
        box-orient: vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -ms-box-orient: vertical;
        -webkit-box-orient: vertical;
    }
    #div2{
        /*指定多栏布局的组件里的子元素显示的方向为水平方向*/
        box-orient: horizontal;
        -moz-box-orient: horizontal;
        -webkit-box-orient: horizontal;
    }
</style>
<!--在div2元素内部使用box-ordinal-group来指定显示顺序-->
<div id="#div2">
    <div style="box-ordinal-group:2">栏目2</div>
    <div style="box-ordinal-group:1">栏目1</div>
    <div style="box-ordinal-group:3">栏目3</div>
</div>