赵工的个人空间

CSS3新增的部分属性（续）

5.灵活的盒布局：

盒布局是CSS3发展的新型布局方式，为了解决传统布局中的不足，实现排列方向、排列顺序、空间分配和对齐方式等，更加灵活而简单。

1）开启盒布局的方法：

把display属性设为box或inline-box就开启盒布局。目前没有浏览器支持box属性，可分别使用-webkit-box和-moz-box属性。开启盒布局之后，文档就会按照盒布局默认的方式来布局子元素。示例：
<div class="container">
  <div class="left-aside">
<h2>菜单</h2>
<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>活动沙龙</li>
  <li>研发小组</li>
</ul>
  </div>
  <div class="center-content">
<h2>内容</h2>
<p>盒布局</p>
  </div>
  <div class="right-aside">
<h2>工具</h2>
<ul>
  <li>天气预报</li>
  <li>货币汇率</li>
</ul>
  </div>
</div>
上述HTML代码构建了一个简单网页，要用盒布局从左至右排列这三个栏，构成菜单、内容和工具栏。CSS3代码为：
.container {
   display:-webkit-box;
   display:-moz-box;
   display:box;
}
CSS中设置了container类的属性display:box，被赋予container类的元素的内部元素将改变原有的文档流动方式，使用盒布局默认的文档流动方式。

2)box-orient属性：

box-orient属性用于定义盒元素的内部布局方向。语法：
box-orient:horizontal|vertical|inline-axis|block-axis|inherit
其中，horizontal表示盒元素在一条水平线上从左到右排列其子元素；vertical表示盒元素在一条垂直线上从上到下排列其子元素；inline-axis是默认值，表示盒元素沿着内联轴排列其子元素，横向排列；block-axis表示元素沿块轴排列其子元素，为纵排；inherit表示继承父元素中box-orient属性的值。

3)box-direction属性：

盒布局下，可以设置盒元素内部的顺序为正向或者反向，使用box-direction属性。语法：
box-direction:normal|reverse|inherit;
其中，normal是默认值，正常顺序，内部元素从左到右或从上到下排列显示；reverse表示反向，内部子元素排列显示顺序与normal相反；inherit表示继承父元素中的box-direction属性的值。

4)box-ordinal-group属性：

用于定义盒元素内部子元素的显示位置。语法：
box-ordinal-group:<integer>;
其中，<integer>是从1开始的整数，表示子元素的显示位置，子元素将根据这个值重新排序。值相等时取决于源代码的顺序。默认值为1，按照源代码的位置排序。示例：
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
box-ordinal-group:2;

5)box-flex属性：

用于定义盒元素内部子元素是否具体空间弹性。当盒元素的尺寸缩小或扩大时，定义为空间弹性的子元素的尺寸也会缩小或扩大。当盒元素有额外的空间时，有空间弹性的子元素会扩大自身大小来填补这一空间。语法：
box-flex:<value>;
其中，<value>是一个整数或小数，不能为负值，默认为0.0。使用空间弹性属性设置，使得盒元素的内部元素的总宽度和总高度，始终等于盒元素的宽度和高度，不过，只有当盒元素具有确定的宽度或高度时，才能表现出子元素的空间弹性。
当盒元素内部的多个子元素都定义了box-flex属性时，子元素的空间弹性是相对的。浏览器会将各个子元素的box-flex属性值相加得到一个总数，然后根据各自的值占总值的比例来分配盒元素的剩余空间。

6)box-pack和box-align属性：

分别用于定义盒元素内部水平对齐方式和垂直对齐方式。这种对齐方式，对盒元素内部的文字、图像及子元素都有效。语法：
box-pack:start|end|center|justify;
其中，start是默认值，表示所有子元素都显示在盒元素的左侧，额外空间显示在右侧；end表示所有子元素都显示在盒元素的右侧，额外空间显示在左侧；center表示所有子元素居中显示，额外空间平均分配在两侧；justify表示所有子元素散开排列，额外的空间在子元素之间平均分配，子第一个子元素之前和最后一个子元素之后不分配空间。
box-align:start|end|center|baseline|stretch;
其中，start表示所有子元素都显示在盒元素的顶部，额外空间显示在底部；end表示所有子元素都显示在盒元素的底部，额外空间显示在顶部；center表示所有子元素垂直居中显示，额外空间平均分配在上下两侧；baseline表示所有子元素沿着基线显示；stretch为默认值，表示每个子元素的高度被拉伸到适合的盒元素高度。

6.增强的盒模型：

盒模型是网页设计中最基本、最重要的模型，CSS3新增了相关的属性。

1)box-shadow属性：

box-shadow属性用于定义元素的阴影效果。语法：
box-shadow:none|[inset]? [<length>]{2,4} [<color>]?;
其中，none为默认值，表示没有阴影；inset表示设置阴影为内阴影，默认为外阴影；4个<length>值设置阴影的水平偏移、垂直偏移、模糊距离和阴影大小，前两个是必需的；<color>表示阴影的颜色。
完整的阴影属性包含6个参数：阴影类型、水平偏移、垂直偏移、模糊半径、阴影大小、阴影颜色，其中水平偏移和垂直偏移是必需的。示例：
-webkit-box-shadow:5px 5px 5px #333;
-moz-box-shadow:5px 5px 5px #333;
box-shadow:5px 5px 5px #333;
box-shadow属性还可以同时使用两种以上的阴影：
-webkit-box-shadow:5px 5px 5px 0 #333,-5px -5px 5px 0 #00f;
-moz-box-shadow:5px 5px 5px 0 #333,-5px -5px 5px 0 #00f;
box-shadow:5px 5px 5px 0 #333,-5px -5px 5px 0 #00f;
可以用box-shadow属性给盒子设置描边效果，把水平和垂直偏移值设为0，仅设模糊半径、阴影大小和阴影颜色。示例：
-webkit-box-shadow:0 0 5px 5px #333;
-moz-box-shadow:0 0 5px 5px #333;
box-shadow:0 0 5px 5px #333;
如果不设模糊半径，只设阴影大小和阴影颜色，就等同于边框效果了。示例：
-webkit-box-shadow:0 0 0 5px #333;
-moz-box-shadow:0 0 0 5px #333;
box-shadow:0 0 0 5px #333;

2)box-sizing属性：

CSS3对盒模型进行了改善，新增box-sizing属性，用于定义width和height的计算方法。
box-sizing:content-box|padding-box|border-box|inherit
其中，content-box为默认值，指定的宽度和高度仅限内容区域；padding-box表示宽度和高度包含内边距和内容区域；border-box表示宽度和高度包含边框、内边距和内容区域；inherit表示继承父元素中box-sizing属性的值。
这个属性是为了浏览器的兼容性问题，特别是处理IE浏览器与其他浏览器计算方法不同造成的问题。

3)overflow-x和overflow-y属性：

CSS3新增的属性，是对overflow属性的补充，分别表示水平方向和垂直方向上的溢出处理。
overflow-x:visible|auto|hidden|scroll|no-display|no-content;
overflow-y:visible|auto|hidden|scroll|no-display|no-content;
其中，visible为默认值，表示溢出时不裁剪溢出的内容，超出盒元素边界的部分显示在外面；auto表示溢出时显示滚动条；hidden表示溢出的内容将被裁剪，不提供滚动条；scroll表示始终显示滚动条；no-display表示溢出时不显示该元素；no-content表示溢出时不显示内容。

7.增强的用户界面设计：

CSS3允许改变元素尺寸、定义外轮廓线、改变焦点导航顺序等。

1)resize属性：

resize属性定义一个元素是否允许用户调整大小。语法：
resize:none|both|horizontal|vertical|inherit;
其中，none为默认值，表示用户不能调整元素大小；both表示用户可以调整元素的宽度和高度；horizontal表示用户可以调整元素的宽度；vertical表示用户可以调整元素的高度；inherit表示继承父元素的属性。
Resize属性需要与overflow或overflow-x或overflow-y属性一起使用，才能把元素定义为可以调整大小的，且溢出属性不能为visible。

2)outline属性：

可以定义一个元素轮廓线，以突出显示该元素。轮廓线很像元素边框，但不占用元素的尺寸。
outline:[outline-width]||[outline-style]||[outline-color]|inherit;
其中，outline-width定义轮廓线的宽度；outline-style定义轮廓线的样式；outline-color定义轮廓线的颜色；inherit表示继承父元素的轮廓样式。Outline定义的轮廓线总是完全闭合的，外轮廓线也可能不是矩形，如果元素的display属性为inline，外轮廓线可能变得不规则。
示例：
outline:4px solid #fc6;
Outline是一个复合属性，包含4个子属性：outline-width、outline-style、outline-color、outline -offset。
outline-width属性：用于定义元素轮廓的宽度。语法：
outline-width:thin|medium|thick|<length>|inherit;
其中，thin定义较细的轮廓宽度；medium为默认值，定义中等的轮廓宽度；thick定义较粗的轮廓宽度；<length>定义轮廓的宽度值，包括单位，不能为负值；inherit表示继承父元素。
outline-style属性：用于定义元素轮廓的风格样式。语法：
outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|inherit;
其中，none表示没有轮廓；dotted表示轮廓为点状；dashed表示轮廓为虚线；solid表示轮廓为实线；double表示轮廓为双线，宽度等于outline-width；groove表示轮廓为3D凹槽；ridge表示轮廓为3D凸槽；inset表示轮廓为3D凹边；outset表示轮廓为3D凸边；inherit表示继承父元素。
outline-color属性：用于定义元素轮廓的颜色。语法：
outline-color:<color>|invert|inherit;
其中，<color>表示颜色值，为CSS可使用的任何颜色，可以用透明度；invert为默认值，执行颜色翻转，以保证轮廓在任何背景下可见；inherit表示继承父元素。
outline -offset属性：用于定义外轮廓与元素边界的距离。语法：
outline -offset:<length>|inherit;
其中，<length>表示偏离距离的值，包括单位，可以为负值；inherit表示继承父元素。
轮廓线常见加入:hover、:focus等伪类中。示例：
#login input:focus {
   outline:4px solid #fc6;
   outline-offset:5px;
}
#login div button:hover {
   outline:2px solid #fc6;
}

3)appearance属性：

可以把元素伪装成其他类型的元素，为界面设计带来灵活性。语法：
appearance:normal|icon|window|button|menu|field;
其中，normal表示正常；icon表示修饰得像图标；window表示修饰得像视窗；button表示修饰得像按钮；menu表示修饰得像菜单；field表示修饰得像一个输入框。
Appearance属性定义的元素，仅在外观上做了改变，仍然保留原来的功能。示例：
-webkit-appearance:button;
-moz-appearance:button;
appearance:button;

4)Content属性：

可以使用content属性为元素添加内容。语法：
content:none|normal|<string>|counter(<counter>)|attr(<attribute>)|url(<url>)|inherit;
其中，none如果有指定的添加内容则设置为空；normal为默认值，不做任何指定或改动；<string>指定添加的文本内容；counter(<counter>)指定一个计数器作为添加内容；attr (<attribute>)把选择元素的属性值作为添加内容；url(<url>)指定一个外部资源作为添加内容，如图像、音频、视频等；inherit表示继承父元素。示例：
a[href$=html]:before {content:”网页：”;}
a[href$=jpg]:before {content:”图片：”;}
a[href$=doc]:before {content:”Word文档：”;}
a[href$=pdf]:before {content:”PDF文档：”;}
A:after{content:attr(href);}
使用计数器时要配合counter-increment属性：
#nav a{counter-increment:mycounter;}
a:before{content:counter(mycounter)”.”;}
上面CSS代码，将为id为nav的元素中的所有链接生成一个项目顺序号，并加在前面。

8.多列布局：

CSS3提供了新的多列布局，可以直接定义列数、列宽等，也可以定义列与列之间的间距、间隔线等，还可以定义栏跨列和栏高度等。

1)columns属性：

用于快速定义多列的列数目和每列宽度。语法：
columns:<column-width>||<column-count>;
其中，<column-width>定义每列的宽度；<column-count>定义多列的列数。实际布局时，定义的多列列数是最大列数。当外围宽度不足时，多列的列数会适当减少，而每列的宽度会自适应宽度，填满整个范围区域。示例：
-webkit-columns:200px 3;
columns:200px 3;

2)column-width属性：

用于定义多列布局中每列的宽度。语法：
column-width:auto|<length>;
其中，auto表示列的宽度由浏览器决定；<length>直接指定列的宽度，不能为负值。示例：
-webkit-column-width:200px;
-moz-column-width:200px;
column-width:200px;

3)column-count属性：

用于定义多列布局中的列数目。语法：
column-count:auto|<number>;
其中，auto表示列的数目由其他属性决定，如column-width；<number>直接指定列的数目，取值为大于0的整数。

4)column-gap属性：

用于定义多列布局中列与列之间的距离。语法：
column-gap:normal|<length>;
其中，normal是默认值，由浏览器决定，一般为1em；<length>指定列与列之间的距离，带单位，不能为负值。

5)column-rule属性：

在多列布局中，用于定义列与列之间的分隔线。语法：
column-rule:[column-rule-wigth]||[column-rule-style]||[column-rule-color];
其中，column-rule-wigth定义分隔线的宽度；column-rule-style定义分隔线的样式；column-rule -color定义分隔线的颜色。
column-rule是一个复合属性，包含3个属性：column-rule-width、column-rule-style、column-rule -color。
column-rule-width子属性：定义分隔线宽度，为包含单位的长度值，不能为负值。
column-rule-style子属性：定义分隔线的样式，取值与border-style相同，包括none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit。
column-rule-color子属性：定义分隔线的颜色，为CSS的颜色值，包括透明度。
示例：
-webkit-column-rule:1px solid #666;
-moz-column-rule:1px solid #666;
column-rule:1px solid #666;

6)column-span属性：

在多列布局中，用于定义元素跨列显示。语法：
column-span:1|all;
其中，1为默认值，表示元素在一列显示；all表示横跨所有列显示。示例：
-webkit-column-span:all;
column-span:all;
设置了column-span属性为all的标记，跨所有列显示其中的内容。

9.支持多种设备的媒体查询：

越来越多的人开始使用手机等手持终端设备上网，终端屏幕尺寸多样。CSS3迎合这种趋势，提出媒体查询概念，使得设计的样式表在多种终端设备下都能很好地呈现网页。
CSS2.1中，可以通过Media Type来区别终端设备，以指定不同的样式表，但没有得到多少设备支持。CSS3新增Media Queries模块，允许添加媒体查询表达式，以指定媒体类型及设备特性，从而精确地为不同的设备应用不同的样式。

1)@media规则：

Media Queries模块中的媒体查询使用@media规则来区别媒体设备，并实现样式表定义。Media Queries模块获得了Firefox、Safari、Chrome和Opera等浏览器的支持。
@media规则是包含有查询表达式的媒体样式规则。语法：
@media <media_query> {<css_styles>}
<media_query>: [only|not]:<media_type>[and <expression>]*
<expression>:(<media_feature>[:<value>]?)
<media_type>:all|aural|braille|handheld|print|projection|screen|tty|tv|embossed
<media_feature>:width|min-width|max-width|height|min-height|max-height|
device-width|min-device-width|max-device-width|
device-height|min-device-height|max-device-height|
device-aspect-ratio|min-device-aspect-ratio|max-device-aspect-ratio|
color|min-color|max-color|color-index|min-color-index|max-color_index|
monochrome|min-monochrome|max-monochrome|
resolution|min-resolution|max-resolution|scan|grid
其中，<css_styles>定义样式表；<media_query>设置媒体查询关键字，如and、not、only；<media_type>设置设备类型，提供19种媒体类型；<media_feature>定义媒体特性，放在括号中，有13种。
Media Queries模块的媒体类型见下表：

类型	说明
all	所有设备
screen	电脑显示器
print	用于打印机或打印预览视图
handheld	便携或手持设备
tv	电视机类型的设备
speech	语音和音频合成器
braille	用于盲人触觉反馈设备
embossed	盲文打印/印刷设备
projection	各种投影设备
tty	用于使用固定间距字符格的设备，如电传打字机和终端

Media Queries模块的媒体特性见下表：

媒体特性	值	可用媒体类型	接受min/max
width	length	visual、tactile	yes
height	length	visual、tactile	yes
device-width	length	visual、tactile	yes
device-width	length	visual、tactile	yes
orientation	portrait|landscape	bitmap	yes
aspect-ratio	ratio	bitmap	yes
device-aspect-ratio	ratio	bitmap	yes
color	integer	visual	yes
color-index	integer	visual	yes
monochrome	integer	visual	yes
resolution	resolution	bitmap	yes
scan	progressive|interlace	tv	no
grid	integer	visual、tactile	no

媒体特性共有13种，形式上与CSS属性类似，大部分设备的指定值接受min/max前缀，用来表示大于等于或小于等于的逻辑。
示例：
@media screen and (min-width:900px) {
  nav {float:left;width:25%}
  section {float:left;width:50%}
  aside {float:left;width:25%}
}
@media screen and (min-width:600px) and (max-width:900px) {
  nav {float:left;width:40%;height:200px;}
  section {float:left;width:60%;height:200px;}
  aside {clear:both;float:none;height:100px;}
}
@media screen and (max-width:600px) {
  nav {height:150px;}
  section {height:150px;}
  aside {height:150px;}
}
上述样式，使用媒体查询方法，针对不同的窗口大小，定义了不同的样式表。

2)链接外部样式表：

网页设计中，通常是直接链接外部样式表文件的，这时也可以增加Media Queries媒体查询。
<link rel="stylesheet" type="text/css" media="<media_query>" href="xxx.css" />
其中，<media_query>为媒体查询，遵循@media规则中的媒体查询方式。示例：
<link rel="stylesheet" type="text/css" media="(min-width:200px)" href="xxx.css" />
<link rel="stylesheet" type="text/css" href="xxx.css" media="screen and (min-width:200px) and (max-width:400px)" />
<link rel="stylesheet" type="text/css" href="xxx.css" media="handheld and (max-width:200px) , screen and (max-width:300px)" />
<link rel="stylesheet" type="text/css" href="xxx.css" media="not screen and (color)" />
使用only关键字，支持Media Queries的设备会正确地显示样式；不支持Media Queries，但能正确读取Media Type的设备，由于先读到only而不是screen等，将会忽略后面的样式。对于不支持Media Queries的IE来说，无论是否有only，都会忽略样式。