CSS针对表格、列表等特定组件提供了相应的属性，通过表格相关属性可以控制表格的边框样式、表格标题所在位置、表格布局等；通过列表相关属性则可以控制列表样式，包括改变列表项的标记，甚至使用自定义图片作为列表项的标记。CSS3还提供了media query功能，通过media query可以针对不同的显示类型、不同参数细节的输出媒体使用不同的CSS布局，从而允许页面进行自适应调整。
1.表格相关属性
表格相关属性主要用于控制表格的外观，表格相关属性有如下几个。
1.1 使用border-collapse、border-spacing控制单元格边框
border-collapse可控制单元格的边框是分开的还是合在一起，如果设置单元格的边框分开显示，还可以通过border-spacing设置边框的间距。下面定义了3个表格，分别用于测试上面几个表格相关属性。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 表格相关属性 </title><style type="text/css">table {width: 400px;border: 1px solid black;}td {background-color:#ccc;border: 1px solid black;}</style></head><body><p>表格的单元格边框合并在一起，看起来分割线为单线<br>border-collapse:collapse;</p><table style="border-collapse:collapse;"><tr><td>java</td><td>android</td></tr><tr><td>html</td><td>css</td></tr></table><p>表格的单元格边框分开，看起来表格分割线为双线，并隐藏空格的边框线<br>border-collapse:seperate;empty-cells:hide;</p><table style="border-collapse:seperate;empty-cells:hide;"><tr><td>java</td><td>android</td></tr><tr><td>html</td><td></td></tr></table><p>表格的单元格边框分开，看起来表格分割线为双线，并设置两个单元格的间距<br>border-collapse:seperate;border-spacing:20px;</p><table style="border-collapse:seperate;border-spacing:20px"><tr><td>java</td><td>android</td></tr><tr><td>html</td><td>css</td></tr></table></body></html>
效果图：
1.2 使用caption-side控制表格标题的位置
caption-side属性可以控制表格标题出现的位置，属性值如下所示。
将上面代码的css改动一下即可。
caption{caption-side:bottom;}
1.3 使用table-layout控制表格布局
table-layout属性为表设置表格布局算法，属性值如下所示。
通过将表格的table-layout指定fixed可以控制表格的布局方式（固定的布局方式），表格的宽度会按如下方式计算得到。
如果通过<col>或<clogroup>元素设置了每列的宽度，则表格的宽度将等于所有列宽的总和。如果表格内第一行的单元格设置了宽度信息，则表格的宽度将等于第一行内所有单元格宽度的总和。直接平均分配每列的宽度，忽略单元格中内容的实际宽度。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 表格相关属性 </title><style type="text/css">table {table-layout: fixed;border-collapse:collapse;border: 1px solid black;}td {background-color:#ccc;border: 1px solid black;}</style></head><body><p>表格的宽度将由两个col元素计算出来</p><table><!-- 表格的宽度将由如下两个col元素计算出来 --><col style="width:240px"/><col style="width:80px"/><tr><td>java</td><td>android</td></tr><tr><td>html</td><td>css</td></tr></table><p>表格的宽度将由如下第一行的单元格的宽度计算出来</p><table><tr><!-- 表格的宽度将由如下第一行的单元格的宽度计算出来 --><td style="width:80px">java</td><td style="width:300px">android</td></tr><tr><td>java</td><td>android</td></tr></table><p>每列将会平均分配该表格的宽度</p><!-- 每列将会平均分配该表格的宽度 --><table style="width:300px"><tr><td>java</td><td>android</td></tr><tr><td>html</td><td>css</td></tr></table></body></html>
效果图：
2.列表相关属性
列表相关属性有如下几个。
list-style-type属性支持如下属性值。
decimal：阿拉伯数字。默认值。disc：实心圆。circle：空心圆。square：实心方块。lower-roman：小写罗马数字。upper-roman：大写罗马数字。lower-alpha：小写英文字母。upper-alpha：大写英文字母。none：不使用项目符号。cjk-ideographic：浅白的表意数字。georgian：传统的乔治数字。lower-greek：基本的希腊小写字母。hebrew：传统的希伯莱数字。hiragana：日文平假名字符。hiragana-iroha：日文平假名序号。katakana：日文片假名字符。katakana-iroha：日文片假名序号。lower-latin：小写拉丁字母。upper-latin：大写拉丁字母。
2.1 使用list-style属性控制列表项
需要指出的是，如果为每个元素同时指定了列表项标记图片（list-style-image）和列表项标记样式（list-style-type），此时list-style-image属性将会覆盖list-style-type属性。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 列表相关属性 </title><style type="text/css">li {background-color: #aaa;}</style></head><body><p>使用实心方块作为列表项标记<br>list-style-type:square;</p><ol style="list-style-type:square;"><li>java</li><li>android</li><li>html</li><li>css</li></ol><p>使用大写拉丁字母作为列表项标记<br>list-style-type:hebrew;</p><ul style="list-style-type:hebrew;"><li>java</li><li>android</li><li>html</li><li>css</li></ul><p>使用大写罗马字母作为列表项标记<br>list-style-type:upper-roman;</p><ol style="list-style-type:upper-roman;"><li>java</li><li>android</li><li>html</li><li>css</li></ol><p>使用表意数字作为列表项标记，并将列表标记放在列表元素内<br>list-style-type:cjk-ideographic;list-style-position:inside;</p><ol style="list-style-type:cjk-ideographic;list-style-position:inside;"><li>java</li><li>android</li><li>html</li><li>css</li></ol><p>使用图片作为列表项标记<br>list-style-image:url(fl.gif);</p><ul style="list-style-image:url(fl.gif);"><li>java</li><li>android</li><li>html</li><li>css</li></ul></body></html>
效果图：
2.2 使用list-style属性控制普通元素
实际上，除了直接使用<ul>、<ol>和<li>等元素来创建列表之外，使用display:list-item还可以把普通元素（例如<div>）显示为列表，此时同样可应用列表相关的CSS属性。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 列表相关属性 </title><style type="text/css">div>div{background-color: #aaa;display:list-item;list-style-image:url(fl.gif);list-style-position:inside;}</style></head><body><p>使用图片作为列表项标记</p><div><div>java</div><div>android</div><div>html</div><div>css</div></div></body></html>
上面代码将会把多个<div>元素变成列表组件，并指定使用自定义列表项标记，且将标记放在列表组件之内。
3.控制光标的属性
通过CSS的cursor属性可以改变光标在目标组件上的形状。该属性支持如下属性值。
下面代码示范了各种光标属性的功能。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 光标相关属性 </title><style type="text/css">div {display: inline-block;border: 1px solid black;width: 160px;height: 70px;}</style></head><body><div style="cursor:all-scroll;">十字箭头光标</div><div style="cursor:col-resize;">水平拖动线光标</div><div style="cursor:crosshair;">十字线光标</div><div style="cursor:move;">代表移动十字箭头光标</div><div style="cursor:help;">带问号的箭头光标</div><div style="cursor:no-drop;">禁止光标</div><div style="cursor:not-allowed">禁止光标</div><div style="cursor:pointer;">手型光标</div><div style="cursor:progress;">带进度环的箭头光标</div><div style="cursor:row-resize;">垂直拖动线光标</div><div style="cursor:text;">文本编辑光标</div><div style="cursor:vertical-text;">垂直文本编辑光标</div><div style="cursor:wait;">进度环光标</div><div style="cursor:n-resize;">可向上拖动的光标</div><div style="cursor:ne-resize;">上、右可拖动的光标</div><div style="cursor:se-resize;">下、右可拖动的光标</div></body></html>
在浏览器中浏览，并把鼠标移动到不同的<div>元素上，即可看到不同光标的效果。例如，把鼠标移动到带问号的箭头光标上，即下图所示效果。
4.media query功能
很多时候，前期使用HTML+CSS设计的样式非常精美，但可能由于用户设备、浏览器的原因，比如分辨率达不到要求、色深达不到要求，最后导致用户浏览页面时的显示效果非常丑陋。为了解决这个问题，CSS3强化了CSS 2.1的媒体类型支持，增加了media query功能，不仅可以对媒体类型进行匹配，也可以对媒体分辨率、色深等各种细节进行匹配，因此可以针对不同类型、不同参数细节的媒体设备提供精确控制。
4.1 media query语法
@media mediatype and|not|only (media feature) {CSS-Code;}//mediatype 媒体类型//media feature 媒体特性
媒体类型：
媒体特性：
4.2 针对浏览器宽度调整布局
下面开发一个网页，这个网页可以针对浏览器的宽度来调整布局，从而保证该页面向用户呈现较好的视觉效果。下面定义了一个3栏布局的页面，这个页面在宽度大于1000px的浏览器中显示时，3个栏目将会并排显示；在宽度小于480px的浏览器中显示时，3个栏目会垂直排列显示。因此，页面需要针对这几种浏览器宽度分别定义不同的CSS样式，代码如下。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 针对浏览器宽度响应布局 </title><style type="text/css">/* 设置默认的CSS样式 */#container{text-align: center;margin: auto;width: 750px;}#container>div {border: 1px solid #aaf;text-align: left;/* 设置HTML元素的大小包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 300px;height: 260px;float: left;}div#main {width: 450px;height: 260px;float: left;/* 让该元素的右边不能出现float元素，即让后面的元素换行 */clear: right;}div#right {width: 750px;float: left;}/* 设置当浏览器宽度大于1000px时的CSS样式 */@media screen and (min-width:1000px) {#container{text-align: center;margin: auto;width: 960px;}#container>div {border: 1px solid #aaf;/* 设置HTML元素的大小包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 240px;float: left;height: 260px;}div#main {width: 460px;float: left;height: 260px;/* 让左右两边都可以出现float元素 */clear: none;}div#right {width: 260px;float: left;height: 260px;}}/* 设置当浏览器宽度小于480px时的CSS样式 */@media screen and (max-width:480px) {#container{text-align: center;margin: auto;width: 450px;}#container>div {border: 1px solid #aaf;/* 设置HTML元素的大小包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 450px;float: left;height: 150px;}div#main {width: 450px;float: left;height: 260px;/* 让左右两边都不能出现float元素 */clear: both;}div#right {width: 450px;float: left;height: 170px;}}</style></head><body><div id="container"><div id="left"><h2>日期</h2><ul><li>2月1日</li><li>2月2日 开始</li><li>2月3日 结束</li></ul></div><div id="main"><h2>java语言</h2> 语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来，所以C程序设计人员能很容易的掌握java语言的语法。语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来<br/> 来说进行了简化和一定的提高，如：使用接口代替了复杂的多重继承以及取消了指针，还通过实现垃圾自动回收机制，大大简化了程序员的资源释放管理工作。</div><div id="right"><h2>公司动态</h2><ul><li>java</li><li>android</li><li>html</li><li>css</li></ul></div></div></body></html>
上面代码定义了两个media query表达式，其中@media screen and(min-width:1000px)指定浏览器宽度大于1000px时的CSS样式；@media screen and(max-width:480px)指定浏览器宽度小于480px时的CSS样式。在浏览器中访问，如果浏览器宽度大于1000px，将可以看到如下图所示的3栏并列的效果。
如果让浏览器宽度大于480px，但小于1000px，将可以看到如下图所示的效果。
如果让浏览器宽度小于480px，将可以看到如下图所示的效果。
通过CSS3提供的media query功能，我们可以针对不同类型、不同参数细节的媒体设备提供相应的CSS样式，从而可以保证该网页在不同的媒体设备上总可以显示良好的设计，不会乱套。
4.3 响应手机浏览器
如果使用手机浏览，会发现显示的却是大于480px小于1000px的页面效果，尽管各个手机的大小屏幕可能千差万别，但手机的浏览器宽度都设置成980px，这是为了兼容互联网绝大部分网页而采用的设计。我们可以通过name为viewport的<meta>来进行设置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
meta viewport 的6个属性：
上面首先设置width=device-width，将浏览器宽度设置为与设备宽度一致。接下来设置页面的缩放百分比为1.0，如果希望禁止用户缩放页面，还可以在content属性后添加user-scalable=no。下面代码示范了响应手机浏览器的功能，大家可以放在自己手机上试一试。
<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee()" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><title> 针对浏览器宽度响应布局 </title><style type="text/css">/* 设置默认的CSS样式 */#container{text-align: center;margin: auto;width: 750px;}#container>div {border: 1px solid #aaf;text-align: left;/* 设置HTML元素的width属性包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 300px;height: 260px;float: left;}div#main {width: 450px;height: 260px;float: left;/* 让该元素的右边不能出现float元素，即让后面的元素换行 */clear: right;}div#right {width: 750px;float: left;}/* 设置当浏览器宽度大于1000px时的CSS样式 */@media screen and (min-width:1000px) {#container{text-align: center;margin: auto;width: 960px;}#container>div {border: 1px solid #aaf;/* 设置HTML元素的大小包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 240px;float: left;height: 260px;}div#main {width: 460px;float: left;height: 260px;/* 让左右两边都可以出现float元素 */clear: none;}div#right {width: 260px;float: left;height: 260px;}}/* 设置当浏览器宽度小于480px时的CSS样式 */@media screen and (max-width:480px) {#container{text-align: center;margin: auto;width: 450px;}#container>div {border: 1px solid #aaf;/* 设置HTML元素的大小包括边框 */box-sizing: border-box;border-radius: 12px 12px 0px 0px;padding: 5px;}div#left {width: 450px;float: left;height: 150px;}div#main {width: 450px;float: left;height: 260px;/* 让左右两边都不能出现float元素 */clear: both;}div#right {width: 450px;float: left;height: 170px;}}</style></head><body><div id="container"><div id="left"><h2>日期</h2><ul><li>2月1日</li><li>2月2日 开始</li><li>2月3日 结束</li></ul></div><div id="main"><h2>java语言</h2> 语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来，所以C程序设计人员能很容易的掌握java语言的语法。语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来<br/> 来说进行了简化和一定的提高，如：使用接口代替了复杂的多重继承以及取消了指针，还通过实现垃圾自动回收机制，大大简化了程序员的资源释放管理工作。</div><div id="right"><h2>公司动态</h2><ul><li>java</li><li>android</li><li>html</li><li>css</li></ul></div></div><script type="text/javascript">// 查看浏览器内body宽度alert(screen.width);</script></body></html>
------------如果大家喜欢湮顾千古的博客，可以点击左上角的关注哦。
