CSS小tip整理

最新推荐文章于 2021-06-04 12:16:32 发布

weixin_30333885

最新推荐文章于 2021-06-04 12:16:32 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/foolgry/p/5887718.html

本文介绍了一些实用的CSS技巧，如使用伪元素添加箭头、解决浮动元素的常见问题等。同时探讨了固定宽度、流式及弹性布局的特点，并提供了解决IE浏览器下布局问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS小tip整理

1.利用css在列表靠头和末尾添加箭头：

/* 左箭头*/
ol a[rel="prev"]:before {
    content: "\00AB";
    padding-left: 0.5em;
}


/* 右箭头*/
ol a[rel="next"]:after {
    content: "00BB";
    padding-right: 0.5em;
}

2.让父元素包含浮动的子元素：

添加一个进行清理的元素
让父元素浮动，并使用某个元素进行清理
overflow：hidden

3.固定宽度，流式和弹式布局

固定宽度：简便，常用，不能充分利用可用空间，不灵活
流式布局：尺寸用百分数设置。能够相对于浏览器窗口进行伸缩。但是在窗口宽度较小的时候，行变得非常窄，有必要添加以像素或em为单位min-width，防止布局变得过窄
弹性布局：以em为单位设置元素的宽度。
流式和弹性图像：弹性布局使遇到图像元素，可将图像用作背景，然后容器设置100%并且将overflow设置为hidden

4.常见bug

双边距浮动bug
IE 6和更低版本，使任何浮动元素的外边距加倍
解决方案：设置display：inline可修复bug
3像素文本偏移bug
IE 5和IE 6中，当一个文本与一个浮动元素相邻时，这个bug就会表现出来：

例如：

.myFloat {
    float: left;
    width: 200px;
}
p {
    margin-left: 200px;
}

/*
    修复：
 */

p {
    /*
     * IE 6中，为容器设置一个小的高度，IE 6
     * 和更低版本元素会不正确的扩展他们的高度，
     * 设置小的高度不会影响实际高度。 
     */
    height: 1%; 
    margin-left: 0;
}
.myFloat {
    margin-right: -3px;
}

如果浮动元素是图片的话，这样还不够；
图片解决方案：

p {
    height: 1%;
    margin-left: 0;
}
img .myFloat {
    margin: 0;
}

IE6的重复字符bug
当一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。
前俩个注释没有影响，但后续每个注释会导致俩个自读重复出现。
解决：删掉注释
相对容器中的绝对定位
IE 5,6的定位不够准确，需要迫使相对定位的容器拥有布局
可以用条件注释为容器设置一个小的高度，IE 6和更低版本元素会不正确的扩展他们的高度，设置小的高度
不会影响实际高度。

转载于:https://www.cnblogs.com/foolgry/p/5887718.html