-
实际height 实际width查看全部
-
margin+padding查看全部
-
box model查看全部
-
浮动的定义查看全部
-
盒子高度和边框的计算查看全部
-
鼠标经过背景色不显示是因为li元素为内联元素，只需要给a标签添加一个：display:block;查看全部
-
clear查看全部
-
总结：常用的清除浮动的方法。 1、使用空标签清除浮动。我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。 对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的 是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合 适。 2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。 不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面； 3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。 此三种方法各有利弊，使用时应择优选择，个人习惯于第一种，比较稳定可靠。 参考链接：http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.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=gb2312" /> <title>无标题文档</title> <style type="text/css"> .clearfix:after { /**这个方法简单来说就是在需要清楚浮动的元素后面加一个伪类，这个伪类是个块级元素，并且有清楚浮动的属性，高度0是为了不影响页面**/ content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1;/*兼容ie6*/ } /*在此定义相应的类选择器，并根据要求设置相关CSS属性*/ .wrap{ width:960px;background-color:#CFF;margin:0 auto;/*overflow:hidden这个属性他会将父元素的大小扩展到需要的大小*/; } .left-box{ width:740px;background-color:#C9F;float:left;height:300px;float:left; } .right-box{ width:210px;background-color:#FCF;float:right;height:300px;float:right; } </style> </head> <body> <div class="wrap clearfix"> <div class="left-box"></div> <div class="right-box"></div> <!-- 破坏结构的方法 <div ></div> --> </div> </body> </html>查看全部
-
fcvcvcccccc查看全部
-
<style type="text/css"> li{width:50px; height:30px; float:left;line-height:30px;text-align:center; list-style-type:none;} a{text-decoration:none;} a:link, a:visited{color:black;} a:hover,a:active{background-color:#BE3948; color:white; display:block;} /*在此定义相关样式，控制列表的显示形式*/ </style> </head> <body> <h3>课程难度</h3> <ul> <li><a href="#">全部</a></li> <li><a href="#">初级</a></li> <li><a href="#">中级</a></li> <li><a href="#">高级</a></li> </ul><!--在此制作一个无序列表-->查看全部
-
<!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=gb2312" /> <title>3.1页面头部制作练习题</title> <style type="text/css"> /*在此定义相关样式，控制列表的显示形式*/ .qb{ width:300px; height:40px; } .qb li{ float:left; list-style-type:none; width:60px; text-align:center; line-height:40px; } .qb li a:link,.qb li a:visited{ text-decoration:none; color:#000000; font-size:16px; font-family:"宋体"; } .qb li a:hover{ background-color:#CC0000; color:white; display:block; } </style> </head> <body> <h3>课程难度</h3> <!--在此制作一个无序列表--> <div class="qb"> <ul> <li><a href="#">全部</a></li> <li><a href="#">初级</a></li> <li><a href="#">中级</a></li> <li><a href="#">高级</a></li> </ul> </div> </body> </html>查看全部
-
min_height:350px; 最小350px _height:350px; 兼容IE6 要同时使用 下面的盒子被上面的内容覆盖 是因为上面盒子的浮动是盒子脱离了标准文档流 需要清除浮动 clear：both . 新闻内容页，不设置固定的height值，因为内容大小不确定，所以设定min-height值（IE6不支持） 2. 仅仅设置min-height值，不能解决内容过大溢出容器、影响版权div的问题，所以要给版权div清除浮动，用clear: both; 3. IE6不支持min-height，解决办法：用css hack的写法，_height:350px，这种写法只有IE6识别 4. 新闻内容页（list-content）外还有容器list-main，不要忘记给它也设置min-height（而不是height）、_height 盒子会根据内容自适应增长的，在子div和父div中应该加上min-height：最小长度值，并且在这个盒子底部的div也应该加上clear：both；清楚左右浮动。避免上面的盒子覆盖住下方盒子的内容。查看全部
-
要想使得盒子中的文字在垂直方向上居中，设置：盒子的行高跟盒子的高度一致即可查看全部
-
新闻中心布局查看全部
举报
0/150
提交
取消