子元素浮动父容器高度不能自适应的CSS解决方法

网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要有以下4种:

1. 额外标签法

这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动

1
(clear)

以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。

虽然许多人不喜欢这种方法,但是它却是W3C推荐的方法。

1
<div style="clear:both;"></div>

或者使用

1
<br style="clear:both;" />

2. 使用after伪类

这种方法就是对父容器使用

1
after

伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。

这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html比较干净,所以用得还是比较多的。

以下为一个采用伪类的CSS示范写法:

1
2
3
4
5
6
7
#box:after{  
     content:".";  
     height:0;  
     visibility:hidden;  
     display:block;  
     clear:both;  
}

3. 设置overflow为hidden或者auto

这种做法就是将父容器的

1
overflow

设为

1
hidden

或auot 阅读剩余部分 –

你站在桥上看风景,看风景的人在楼上看你

断章

你站在桥上看风景,
看风景的人在楼上看你。
明月装饰了你的窗子,
你装饰了别人的梦。

When you watch the scenery from the bridge,
The sightseer watches you from the balcony.
The bright moon adorns your window,
While you adorn another’s dream.

IE6下CSS样式失效时如何进行调试

按CSS HACK规则来写一个专门针对IE6下的此样式。

A)对于#开头的样式或直接在下面复制一个当前的同名样式,并在前面加上IE6的特殊标志*html.
如:

1
2
3
#footer{width:200px;color:#ff0000;} /* for FF, IE8 */
*html #footer{width:200px;color:#ff9900;} /* for IE6 */
*+html #footer{width:200px;color:#ff9900;} /* for IE7 */

/*请注意上面的书写顺序,FF->IE6->IE7,若ie7下样式正常可不用写最后一行*/
B)对于. 开头的样式可直接在样式的{}内重写样式。
如:.

1
2
3
4
5
6
7
8
footer{width:200px;color:#ff0000;}
.footer{width:200px; /* for FF, IE8*/
*width:250px; /* IE7支持 */
_width:320px; /* IE6支持 */
color:#ff0000; /* for FF,IE8 */
*color:purple; /* IE7支持 */
_color:brown; /* IE6支持 */
}

3)再次调试,多数情况下样式已经正常了。不过,有时上面会有一些样式的影响力渗透到当前的样式上,直接把当前的样式给覆盖掉。这样就要加上一句

1
clear:both;

4)可能是因为margin 或padding等不兼容造成的,出现此情况尝试在html的头部添加如下内容。

1
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;

注意:此段代码只针对ie浏览器有效!

5)浮动ie产生的双倍距离

1
2
3
4
5
6
7
8
9
10
11
#box{

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下ie会产生200px的距离

display:inline; //使浮动忽略

}

这里细说一下block,inline两个元素,block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

1
2
3
4
5
6
7
8
9
#box{

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table;//将对象作为块元素级的表格显示

}

笑忘书

FullSizeRender
没 没有蜡烛 就不用勉强庆祝
没 没想到答案 就不要寻找题目
没 没有退路 问我也不要思路
没 没人去仰慕 那我就继续忙碌
来来 思前想后 差一点忘记了怎么投诉
来来 从此以后 不要犯同一个错误
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书 给自己祝福
可以不在乎 才能对别人在乎
有一点帮助 就可以对谁倾诉
有一个人保护 就不用自我保护
有一点满足 就准备如何结束
有一点点领悟 就可以往后回顾
来来 思前想后 差一点忘记了怎么投诉
来来 从此以后 不要犯同一个错误
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书 给自己祝福
可以不在乎 才能对别人在乎
从开始哭着忌妒 变成了笑着羡慕
时间是怎么样爬过了我皮肤 只有我自己最清楚
将这样的感触 写一封情书 送给我自己
感动得要哭 很久没哭 不失为天大的幸福
将这一份礼物 这一封情书给自己祝福
可以不在乎 才能对别人在乎
让我亲手将这样的感触 写一封情书送给我自己
感动得要哭 很久没哭 不失为天大的幸福
就好好将这一份礼物 这一封情书给自己祝福
可以不在乎 才能对别人在乎

CSS3 :nth-child() 选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{ margin: 0; padding: 0; list-style: none;}
ul{
width: 600px;
height: 600px;
margin:0 auto;
}
ul li{ width:300px;
height: 300px;
float: left;
background-color: red;
}
li:first-child{background-color: blue;}
li:first-child:hover{background-color: pink;}
li:nth-child(2){ background-color: yellow;}
li:nth-child(2):hover{ background-color: red;}
li:nth-child(3){ background-color: red;}
li:nth-child(3):hover{ background-color: yellow;}
li:last-child{ background-color: pink;}
li:last-child:hover{ background-color: blue;}

 

JQ实现选项卡效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){
window.onload = function()
{
var $li = $('.titright span');//选项
var $ul = $('.jn');//内容
$li.mouseover(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass('current');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});

JQ实现鼠标放上显示离开隐藏

很简单的一段实现鼠标放上显示离开隐藏的小效果,代码虽简单 用途多多哦~~~

1
2
3
$(".box1").hide();//使鼠标放上显示的内容隐藏
$(".box").mouseover(function(){$(.box1).show();});//鼠标放上显示
$(".box").mouseout(function(){$(".box1").hide();});//鼠标离开隐藏

网站灰色调 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

1
2
3
4
5
6
7
8
9
body{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}

用CSS画三角形

作为一个不太会写CSS的

1
伪前端

来说,用纯CSS画各种形状是一件很牛X的事情,今天就先画一个三角形吧。

最终效果图:

css:

div{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.6) rgba(0,0,0,0.6) transparent;
}

说明

html部分很简单,就一个div;
css部分定义宽度和高度都为0,border宽度是30px并且border-style是实心的div,
其中最重要的是最后一句,也是最关键的一句,

1
border-color

属性的四个参数分别定义了边框的

1
上-右-下-左

(顺时针)的样式,
上、左是透明的,下、右使用rgba定义了黑色且透明度为0.6的颜色。

同理, 可以修改

1
border-clor

属性画出各种形状:

transparent

Position定位

position定位

position共有三种形式的定位:绝对定位、相对定位和静态定位。

position属性值:

static: 静态定位(default)
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

注意:absolute和fixed都是绝对定位形式。
绝对定位:完全脱离标准流,兄弟元素不再受其影响。

absolute和fixed的相同点

  1. 完全脱离标准流
  2. 未设置偏移量时,都定位在父元素的左上角(第四象限)
  3. 与父包含块设置
    1
    postition:relative

    与否没有关系,初始位置总是在父元素的左上角。

偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)

absolute和fixed的不同点

一、当设置偏移量时,偏移参照基准

absolute

  1. 无已定位的祖先元素,以为基准偏移
  2. 有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

fixed

  1. 无论有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移。

二、表现形式(产生滚动条时)

absolute

  1. 位置会随滚动条变化

fixed

  1. 位置固定,不会随滚动条变换
  2. 被它遮盖的元素,可以从其下方穿过

偏移量的设置

在对元素设置固定定位(

1
fixed

)时,如果希望本元素包含在其父包含块中,则不需要对齐设置偏移量。

fixed定位

定位形式——绝对定位
特点:位置固定不变,兄弟元素会从其下方穿过

未设置偏移量:
有已定位的祖先元素时,以祖先元素为基准
无已定位的祖先元素时,以浏览器窗口为基准

设置偏移量时:
无论有无以定位的祖先元素,都已浏览器窗口为基准偏移。