html css零散知识总结
2016-07-26 17:55
573 查看
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. 有时定位时先绝对定位,但是不设置位置,用到时在设置,不然会起冲突
![](https://img-blog.csdn.net/20160726175256915?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
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标签,并且绝对定位,脱离文档流
![](https://img-blog.csdn.net/20160726175323035?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
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
![](https://img-blog.csdn.net/20160726175348681?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
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;}
![](https://img-blog.csdn.net/20160726175422209?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
#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;
#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;
相关文章推荐
- css重置
- 关于CSS书写的那些事
- 个人简介 - HTML/CSS简单页面实例
- css 常用样式
- django 关于 DEBUG = False 影响 admin样式
- css3制作正方体
- 更改浏览器滚动条样式(火狐改不了)
- CSS实现左侧固定宽度右侧自适应的固比布局
- CSS3模拟IOS滑动开关
- CSS3模拟IOS滑动开关
- CSS3之transition和animation动画
- display 用法
- CSS中margin和padding的区别
- css--table表格
- CSS3之变形transform
- Emmet:HTML/CSS代码快速编写神器
- js样式
- CSS盒子模型
- CSS定位
- CSS3自定义滚动条样式 -webkit-scrollbar