html css零散知识总结

1.      优先级问题

#hot-keyworda,span{

color:#999;

margin-right:6px;

 

}

#hot-keyword.hot-words{

color:#c00;

}

要想改变a链接中部分文字颜色，直接设置他的选择器.hot-words不行，

因为上面的ID选择器优先级比下面的class选择器高，需要#hot-keyword .hot-words

 

2.      设置位置时不起效果：有可能是标签之间起冲突了

3.      有时定位时先绝对定位，但是不设置位置，用到时在设置，不然会起冲突

  

4.      二级导航在IE6中的兼容

定位让它脱离文档流，手动设置边框

#shortcut.li-activate dd{

display:block;

background:#ffff;

position:absolute;

border:#ccc solid;

border-width:0px 1px 1px;

}

5.      Html中的一些注释会影响IE的执行，导致错误  改变下注释的位置会成功

6.      Logo部分如何有广告，可以通过绝对定位的方式把原来默认广告的部分遮盖住

7.      记得清除浮动否则有时IE6会不会显示

8.      Overflow：hidden   对于那些动态获取的数据存放，应该使用overflow把多余部分隐藏掉（要有高度才有效）

9.      一些图标一般用i标签，并且绝对定位，脱离文档流

10.  

11.  让上面的dt和下面的dd 绝对定位，下面dd向上移动一个像素，dt背景颜色设置为白色盖住，并且让dt的z-index 层级比dd的高

12.  在IE6下，有时定位后position:absolute;如果左右都有浮动的话，一般会受到影响，显示不出来，需要清除浮动

 

13.  在IE6下，当设置宽高为很小时，有可能出现宽高比自己设置的还要高，overflow：hidden解决

 

14.  多个dl dt dd中dt和dd设置float后并排在一行，给dl设置边框虚线时发现全在一起，overflow：hidden解决

 

15.  隐藏最上面的边框：可以先将每个dl margin-top:-1px;最外层的左边DIV overflow：hidden

 

16.  IE6下出现强制换行时：解决方式：white-space：nowrap

17.  外面的DIV无法撑开，一般由浮动引起，可以使用overflow：auto解决

18.  对于一些样式可以公用的部分，可以使用class设置统一样式，再设置一个id定义宽高

19.  对于ul li 设置边框隐藏，可以先让li先margin-left(隐藏左边框)或margin-right=-1px   再给ul设置overflow:hidden;

20.  Form包住table

 

 

 

 

 

 

 

设置margin.padding最好针对块级元素

1层级问题

2优先级问题

3嵌套之间元素不知道该怎么设置

为什么边框总是显示在最上层

两个同为absolute定位的元素怎么显示在最上层

 

最好不要直接使用标签作为选择器  有时后面有冲突

 

当外部DIV没有设置宽高时，而内部元素有浮动时，DIv是撑不开的，需要使用overflow:hidden 解决  a链接变成block 后padding起效

 

 

注意：最外层的DIV一定要包起来

 

 

A标签里嵌套img的问题

1、首先，<a>标签是inline的，框模型是：行内框。行内框没有包含图片的表现，<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样，就应该使用块级框：比如：

display:block;

/*或者*/

display:inline-block;

关于框模型！推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有！http://www.tedlife.com/kuang_mo_xing_zhong_lei_fan_wei_he_shu_xing_yi.html

2、<img>标签为什么会有底下的空白呢？这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧！http://www.zhihu.com/question/21558138 讲得很周到！

3、3、总结这个问题的几种解法：

[a]处理基线

a{display:block;}

img{vertical-align:bottom;}

 

[b]强行去掉<a>标签的行高

a{display:block;line-height:0px;}

 

[c]没有设置行高的时候可以去掉字体大小

a{display:block;font-size:0px;}

 

 

#F2 .shopcategory-content.shopcategory-content-right-man .shopcategory-content-right-man-top.category-ul li{

   width:183px;

}

后面设置的样式怎么也覆盖不了，即使优先级比前面的高或者相同也不行

即使两个标签写成完全相同的，按照后写后生效的原理也不行

 

#F2   .shopcategory-content-right-man-top.category-ul li{

    width:183px !important;

}

这样也不行

 

 

子级有float,最好给父级加上overflow:hidden;