首页 > 代码库 > 2014-7-21
2014-7-21
今天有一些DIV+CSS细节性的笔记：
一、vertical-align:设置行级元素的垂直定位。常用在图片与文字同在一行内的情况。需要注意，对于float定位的内容，该CSS设置无效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>垂直居中对齐测试</title> <style type="text/css"> body{ margin: 0; padding: 0; } .wrapper{ width: 960px; position: relative; margin: 10px auto; } .wrapper:after{ content: ""; clear: both; display: block; } .wrapper span,.wrapper a{ vertical-align: middle; margin: 0 5px; color: #aa3c00; font-weight: bold; } ..wrapper a{ display: inline-block; } .wrapper .fl_ele{ float: left; color: red; } .f18{ font-size: 18px; } .f28{ font-size: 28px; } .f22{ font-size: 22px; } </style></head><body> <div class="wrapper"> <span class="fl_ele f18">行级浮动元素</span> <span class="fl_ele f28">行级浮动元素</span> <span class="fl_ele f22">行级浮动元素</span> <span class="fl_ele f28">行级浮动元素</span> </div> <div class="wrapper"> <span class="f18">行级非浮动元素</span> <span class="f28">行级非浮动元素</span> <span class="f22">行级非浮动元素</span> <span class="f28">行级非浮动元素</span> </div> <div class="wrapper"> <a class="f18">inline-block非浮动元素</a> <a class="f28">inline-block非浮动元素</a> <a class="f22">inline-block非浮动元素</a> <a class="f28">inline-block非浮动元素</a> </div></body></html>
二、inline-block的兼容性问题：对于行级元素，inline-blcok的设置对所有浏览器兼容，对于块级元素，inline-block的设置对于IE6，IE7不兼容
三、双重使用decoration:none;模拟超链接鼠标移上没有下划线的样式。一般来说，一个网站的main.css文件夹中会定义a{text-decoration: none;}以及a:hover{text-decoration: underline;}的全局样式来设置超链接是否该有下划线的样式。而实际一个网站中的不同超链接样式需求不同，有些超链接样式需要鼠标移上去没有下划线。普遍做法是给特定的元素加上a:hover{text-decoration: none;}的样式。而a:hover这种写法是比较消耗内存的，为了达到更好的性能，可以直接用优先级更高的双重选择器选择目标元素，并给其再次添加a{text-decoration: none;}。这样通过两次给a标签设置a:hover{text-decoration:none;}来可达到鼠标移上没有下划线的效果。经测试，该效果兼容IE6+及其他普通浏览器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>模拟超链接鼠标移上没有下划线样式的测试</title> <style type="text/css"> .wrapper{ width: 960px; margin: 0 auto; } a{ text-decoration: none; } a:hover{ text-decoration: underline; } .wrapper a{ display: block; font-size: 16px; color: red; margin: 10px; } .wrapper .hover_none{ text-decoration: none; } .hover_yes{ text-decoration: none;} </style></head><body> <div class="wrapper"> <a href="#" class="hover_none">模拟hover样式</a> <a href="#" class="hover_yes">不能达到模拟hover样式的效果</a> </div></body></html>
四、关于一个老生常谈的问题：清除浮动。说两点：没有清除浮动带来的问题；清除浮动的几种方法以及最佳方法。
没有清除浮动会带来的问题：1、导致浮动元素的父容器背景不能显示;2、导致浮动元素的父容器边框不能被撑开;3、导致浮动元素的父容器margin,padding不能正常显示;4、扰乱布局。产生上述问题的具体原因，很简单，这里不详述，不知道的同学可以去看看浮动布局的原理。
清除浮动的几种方法：1、在浮动元素后面紧跟一个空标签，并设置空标签样式为clear:both;2、给父元素设置样式overflow:hidden;3、设置父元素的height属性为固定值;4、为父元素设置parent_selector:after{ display: block; content: ""; clear: both; }上述4种方法中，最佳方法是第四种，原因不解释，自己去思考。
五、在xhtml1.0中，<botton></botton>标签如果写成<button/>会被IE浏览器错误的解析，导致样式出错。
六、一个关于浮动自动换行的BUG。一个浮动元素和一个非浮动元素同时在一行中，当浮动元素在非浮动元素之后时，浮动元素会出现自动换行的现象。解决这个BUG的方法有两个：1、将所有元素都设置成浮动；2、将浮动元素放在非浮动元素之前。当然，最好使用第一种方式解决，毕竟第二种方式涉及到修改html结构，影响内容的加载顺序。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浮动元素自动换行的BUG测试</title> <style type="text/css"> div{ width: 960px; margin: 10px auto; color: red;} .wrapper1{ background: #aa3c00;} .wrapper2{ background: #0033FF;} .wrapper3{ background: #33befa;} .wrapper1:after,.wrapper2:after,.wrapper3:after{ display: block; content: ""; clear: both; } </style></head><body> <div class="wrapper1"> <p>我是排在浮动元素前面的非浮动元素哦</p> <p style="float: right; ">我是排在非浮动元素后面的浮动元素哦</p> </div> <div class="wrapper2"> <p style="float: right; ">我是排在非浮动元素前面的浮动元素哦</p> <p>我是排在浮动元素后面的非浮动元素哦</p> </div> <div class="wrapper3"> <p style="float: left; ">我是左浮动元素哦</p> <p style="float: right; ">我是右浮动元素哦</p> </div></body></html>
本人水平有限，如有错误的地方，烦请大家指出。大家共同讨论，共同进步，欢迎纠错。~~