【2】可视化格式模型、背景、链接、表格表单——《精通CSS‘》
三、可视化格式模型
3.1 盒模型
@元素背景覆盖内边距和内容区域。
@outline属性:与border不同,轮廓绘制在元素框之上,故不影响元素大小或定位。IE7-不支持。
3.1.1 IE 和 盒模型
@IE6在混杂模式中使用非标准盒模型:width = 内容区域+内边距+边框。【可将内外边距 添加到父或子元素上】
@CSS3的box-sizing属性克设置使用哪种盒模型。
3.1.2 外边距 叠加
@当垂直外边距相触时,之间的间隔会塌陷成其中外边距较大的那个值。【包括在另一个元素上面、包含另一个元素、自身】
3.2 定位 (可视化格式模型、定位模型)
3.2.1 可视化格式模型
@通过display属性改变生成的框的类型。
@CSS中的3种定位机制:普通流、浮动 和 绝对定位
@无法设置行内框的 宽高、垂直内边距+边框+外边距;设置行高可以增加行框的高度【由一行形成的的水平框,称为行框】。
@display:inline-block;使元素像行内元素那样排列,但框内容仍符合块级框的行为【IE8+和现代浏览器都支持】。
@匿名块框:当在块框前添加文本时,会将这些文本定义为块级元素,形成匿名块框。【可使用first-letter等伪元素设置其样式】
3.2.2 相对定位
@相对定位可视为普通文本流定位模型的一部分,相对于原位置定位,占据原空间。
3.2.3 绝对定位
@绝对定位脱离文档流,不占据空间。普通文本流中的元素无视绝对定位的元素。
@相对于最近的已定位的祖先元素定位,不存在则相对于初始包含快(通常为body)。
@z-index属性设置绝对定位元素的叠放次序。z-index值越高,框在栈中的位置就越高。
@相对定位的绝对定位Bug:
IE6/Win中,当想相对于一个(设置了相对定位的)祖先元素的右边或底部 绝对定位时,若该祖先元素没有设置尺寸,绝对定位实际是相对画布定位。
固定定位:
绝对定位的一种,固定元素的包含快是视口(viewport)。【IE6不支持,IE7部分支持】
3.2.4 浮动
@浮动模式的框可以左右移动,知道它的外边缘碰到包含框或另一个浮动框的边缘。【扩展可看《CSS浮动,你不知道的事》】
@行框:
浮动元素脱离文档流,但其后普通流中的框内容会受到浮动元素的影响,会移动留出空间,即浮动元素旁边的行框被缩减,围绕浮动元素。
@清理:
clear属性:能阻止行框围绕浮动框,它表示框的哪边比应该挨着浮动框。
在清理元素时,浏览器在元素顶上添加足够的外边距,是元素的顶边缘垂直下降到浮动框下面。
@使包含元素在视觉上包含 脱离文档流的浮动元素:(添加clear属性)
@利用overflow属性的副作用,解决无语义的空标签问题:
overflow属性会自动清理包含的任何浮动元素。缺点是可能会出现滚动条或截断内容。
@结合:after伪类和内容声明 清理浮动:【IE6-不支持,可迫使应用“布局”解决(haslayout)】
.clear:after {
content: ".";
height: 0;
visibility: hidden;
display: block;
clear: both;
}
四、背景图像
4.1 基础
@background属性:默认水平和垂直平铺
@设置图像位置:像素 和 百分比。
百分数定位不是相对于元素左上角,而是使用图像上的一个对应点。如,图像水平的50%的位置,对应元素水平50%的位置。
4.2 圆角 border-radius
边框角半径属性,能实现元素的圆角边框。【IE8及以下版本和Opera不支持】
4.3 投影 box-shadow
box-shadow有四个值:垂直和水平偏移、投影宽度(模糊程度) 和 颜色。
@兼容投影:
#oDiv {
background: #fff;
/*Internet Explorer 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";
/*低于Internet Explorer 版本8*/
*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);
/*标准浏览器*/
box-shadow:0px 0px 6px #CCC;
}
4.4 不透明度 opacity
.alert {
opacity: 0.8;
filter: alpha(opacity=80); /* For IE */
}
@缺点是,应用该样式的元素的内容页会继承它的不透明度。
@RGBa是能同时设置颜色和alpha透明度的机制:background-color: rgba(o,o,o,0.8);
五、链接
链接样式次序: a:link ,a:visited ,a:hover ,a:focus ,a:active
@锚元素可创建类似按钮的链接。
@CSS精灵:减少服务器请求。
六、应用列表、创建导航条
@在创建时,应不对列表项li应用样式,而是对锚链接a应用样式,由此提供更好的兼容性(如应用:hover伪类)。
@对锚设置块级display:block;可创建于按钮类似的单击区域。
6.1 创建图像映射
要点:IE不显示内容隐藏在屏幕之外的链接。解决办法是给链接设置有一个背景图像,可以是不存在的URL。
七、表单 表格
7.1表格
7.1.1 表格特有元素
①summary属性、caption元素
@summary属性:描述表示的内容。类似img元素的alt文本。
@caption元素:整个表格的标题。
②thead、tbody、tfoot
@用于将表格划分成几个逻辑部分。有利于对各区域分别设置样式。
@在一个表格中只能由一个thead或tfoot,并且使用的话至少要有一个tbody。
@通过scope属性,定义行标题和列标题。
行标题和列标题都应该使用th 而不是td;若某哦内容即使标题又是数据,应该用td。
<thead>
<tr>
<th scope="col">S</th>
<th scope="col">M</th>
<th scope="col">T</th>
<th scope="col">W</th>
<th scope="col">T</th>
<th scope="col">F</th>
<th scope="col">S</th>
</tr>
</thead>
③ col、colgroup
@利用tr元素可以对正行设置样式,而对整列设置样式则可以用col元素。通过colgroup元素的span属性能将多列设为一组。
<colgroup>
<col id="sun" />
<col id="mon" />
<col id="tue" />
<col id="wed" />
<col id="thur" />
<col id="fri" />
<col id="sat" />
</colgroup>
7.1.2 对表格应用样式
@控制单元格之间的距离:border-spacing。【cellspacing是IE6/7中设置单元格间距的唯一方法】
7.2 简单的表单布局
@给label元素设置光标样式,能表明与标签的交互:cursor:pointer;
@强调必填等信息时,应该使用em和strong元素
表单反馈:通常将一个em放在表单元素的后面,作为反馈信息。
由于许多屏幕阅读器会忽略表单元素之间的文本,故最好将反馈信息文本放在表单标签label中,再定位到相应的位置:
<label for="email">Email: <em class="feedback">格式有误,请重新输入!</em></label> <input name="email" id="email" type="text" />