CSS样式设置与框模型

通过任意属性的引用

p[name^="my"]{font-size:20px}//应用到所用name属性值以“my”开头的<p>元素上

p[name$="my"]{font-size:20px}//应用到所用name属性值以“my”结尾的<p>元素上

p[name*="my"]{font-size:20px}//应用到所用name属性值包含“my”的<p>元素上

伪类：nth-child()-查找到树结构中的指定元素。

伪类：first-child()-引用第一个子元素。

伪类：last-child()-引用最后一个子元素。

伪类：only-child()-引用属于其父级元素唯一子元素的元素。

伪类：not()-引用除圆括号中指定元素之外的其他元素。

选择器>-这个选择器选择第一个元素的下级元素。

选择器+-这个选择器引用同级元素。

选择器~-这个选择器引用同级元素，但第二个元素不必紧跟第一个元素。

实际显示宽度的计算公式：size+margin+padding+borders

clear属性：使文档还原常规流。这个属性会直接清空元素所占用的区域，使之不会显示在浮动框旁边。

框尺寸

    box-sizing:border-box;

    它的默认值是content-box，这意味着浏览器会将padding和border加到width所指定的值中。 如果使用border-box，那么效果就会发生变化，内边距和边框会计算在元素总尺寸内。

弹性框模型

在这个模型中，每一个包含结构元素的元素都必须声明为父级框。

大多数主流浏览器的前缀：

-moz-:firefox

-webkit-:safari和chrome

-o-:Opera

-khtml-:Konqueror

-ms-:Internet Explorer

-chrome-:Chrome

将一列设置为固定列宽是常用的方法。通常，设计者会在这一列显示菜单、广告或其他必须保持原始尺寸的重要信息。

display

    上级框由属性display定义，值box表示显示为块级元素，值inline-box表示内联元素。

box-orient

    默认情况下。父级框规定子元素按水平方向排列。属性box-orient可用于声明具体的方向，

horizontal、veritcal、inline-axis和block-axis。

box-direction

    可以反转文档的常规流。normal、reverse和inherit。

box-ordinal-group

    可用于定义各个框的具体位置。

box-pack

    box-pack属性可以指定如何分配父级框的子框及额外空间。这个属性可以设置4个值：start、end、center和justify。

box-flex

    box-flex属性可以将一个框声明为弹性或非弹性。

    每一个框的尺寸的计算方式是：把父级框的尺寸值与其box-flex属性值相乘，然后除以所有子框的box-flex值之和。

box-align

    这个属性决定在与框垂直的轴上其他空间的分配方式。值有stretch、start、end、center、baseline。