【CSS Cookbook】笔记摘要（二）

 页面元素

 

　　使用text-align性质可以居中显示块级元素中的文字。把margin-left和margin-right设为auto时，该元素则会相对于父元素居中显示。但是现在流行的一些较低版本的浏览器无法正确地渲染这种外观，如IE5和Netscape Navigator。如果使用了HTML表格中的th元素，单元中的内容是默认居中显示。在水平居中的基础上，可以垂直居中，需要使用到position属性。即

 

position:abasolute;
top:50%;
left:50%;
margin-top:xx;
margin-right:xx;
height:xx;
width:xx;

局对定位可以使元素脱离文档局流的限制，显示在任何预期的位置。 

　　如果在Safari浏览器上要使水平线居中显示，应将margin-left和margin-right设置为auto，但对于Mozilla、Firefox、Navigator和IE浏览器，margin值的设置可有可无。改变hr元素的颜色时，考虑到网页在跨浏览器上的健壮性，应同时设置color和background-color属性，因为IE/Win只能识别hr元素的color属性，而Safari、Mozilla、Firefox和Netscape Navigator 6+则支持background-color属性。

 

列表

　　不同浏览器会用不同的手段缩进列表。Mozilla和Netscape 6+浏览器用padding值实现缩排，而IE和Opera则使用margin实现。为了获得跨浏览器效果，需要同时设置列表的margin-left和padding-left值，并利用其中一个属性设定缩进值。如果把缩进值分成两部分，分别在margin和padding 2个属性中声明，将导致列表外观在不同浏览器上的不一致。但列表是body的直接子元素时，如果把margin和padding设为0，列表项标记将超出浏览器的视窗范围。为了使列表项标记停留在视窗可见范围内，至少要将ul的margin-left或padding-left设为1em。

 

链接和导航

　超链接伪类在层叠的优先级方面是相等的，因此为了避免冲突应按照以下顺序应用这些魏磊：link、visited、hover，最后是active。这个顺序的速记规则是“LoVe/HAte”(规则中的大写字母取自4个伪类的首字符)。无论是已访问的链接还是未访问的链接，都可以同时激活hover和active状态。由于超链接魏磊在叠层显示方面的等级相同，因此最后声明的伪类样式才是用户看到的样式，这就是为什么有时:hover失效的原因。根据叠层规则，如果:hover出现在:active或:visited之前时，hover状态将被因此。

 表单

　　1.问题:如何体系用户表单的哪些部分是必需的。

　　回答：首先，在要求填写的域的表单标签旁放置警示图标和文字。随后，为成功提交表单所必须填写的域及域对应的标签添加class属性，并将属性值设定为required。接着应用CSS规则改变表单的文字及边框颜色。

 

 表格

　　HTML表格有两种边框模式（model）：collapse和separate。collapse模式下表格单元共享边界；separate模式下表格单元有各自的独立边界线。目前除了Firefox使用separate作为默认边框模式，其余浏览器均使用collapse模式。由于CSS标准没有指定这个特性，为了应对新生代浏览器默认模式不一致的情况，应该在CSS规则中莫雀设置collapse模式。用border-collapse属性把边框模式改为collapse的代码如下;

table{
  border-collapse:collapse;  
}

　　表格标题用于描述表格中的内容，一般应该放在表格元素后，thead或tr表格元素之前。标题元素的渲染可能会因浏览器而异。但是caption元素生成的标题在任何浏览器中都可以显示，可以通过CSS样式画，并且利用caption显示表格标题是最具可访问性的方式。

 　　1.问题：消除只包含一副图片的单元格内的空白。

　　回答：把img元素的display属性改为block，作为块级元素显示。

td img{
  display:block;  
}

由于图片是inline元素，所以浏览器会将图片元素显示在文本内容的基线上方。将图片改成块级元素，会强迫浏览器用不同方式渲染图片。此外，不使用单元格的底边作为问不了内容的显示基线。因为一些字符（如g、p、q和y）是下行字符，这些字符的“底部”会悬挂在基线之下。由于基线实际上是整个文字尺寸的一个比例，所有无法简单地删除基线和下行空间。指示浏览器用其他方式渲染图片文件，能避免浏览器自动生成下行空白区。有时将图片的display属性设为block不一定是删除单元中图片周围的空白区域的最好办法。如果遇到这种情况，可以使用另一种方法删除空白：只要图片高度大于行高，那么将图片的vertical-align属性设为bottom即可。

　　2.如何删除单元格之间的空白。

　　回答;把表格设置成collapse边框模式，即border-collapse:collapse。

 

页面布局

 　　一旦图片的align属性设定为right或者left，图片周围的内容就会流动到图片align属性所取值的反侧。如果图片是右对齐，图片周围的内容就会被强制流动到左侧。

　　把position属性设为absolute，可以让元素完全脱离文档布局流的控制。当一个元素被设为浮动时，页面上其他元素会流动在这个“被浮动”元素的周围。但元素被设为绝对定位时，这个元素的处理方式会与常规情况完全不一致。默认情况下浏览器渲染一个绝对定位的元素，会将该元素放在距它最近的绝对定位的诛仙元素或初始包含块的左上角。换句话说，要将父元素中的某个子元素设为绝对定位，首先应将position属性设为absolute或relative（非static）。如果页面上还有其他元素，这个绝对定位的元素会覆盖页面上的其他内容。为了避免这种情况的发生，可以应用一些传统的CSS属性：top、left、bottom及right，这些属性能将元素移动到页面上的任何位置。

　　实现“任意顺序列”的方法是通过灵活地使用margin属性来完成的;正的margin值用于预留空间，而负的margin值用于改变各列的原始位置。

　　页面布局算法（是一种计算列的附属歪边咀值的简单算法，用于计算如何重新排布列）：

　　1.对于要将外边距赋负值的列，首先计算出源代码中该列之前所有列的极右点（最右边的那一点）。

　　2.然后找到该列的极左点。

　　3.最后，用极左点的值减去极右点的值得到元素的左外边距值。

转载于:https://www.cnblogs.com/FireTheFire-Fly/p/6832533.html