HTML DIV+CSS小技巧

HTML DIV+CSS小技巧

1.当父元素没有设定高度时,他的子元素全部浮动之时,父元素的高度不会自动增加.

<div id="main">
	<div id="left">left</div>
	<div id="right">right</div>
	<div class="clear">&nbsp;</div>
</div>

CSS:

#main{
	background:black;
}
#left{
	float:left;
	background:green;
	height:200px;
}
#right{
	float:right;
	background:blue;
	height:300px;
}
.clear{
	clear:both;
}

如果没有设定,left right浮动之后,是看不见main的背景.
解决这个问题有三种方法:
1) 额外标签法:增加一个额外标签
<div class="clear">&nbsp;</div>

2) 父元素使用overflow的方法 overflow:hidden;

3) 利用伪对象after方法
定义一个类,使用伪对象after,控制浮动元素的影响.
网上最流行的清除浮动的代码:

.clear:after{
	clear:both;
	content:".";
	display:block;
	height:0;
	overflow:hidden;
}

意思:就是和第一种方法很相像,在父级元素后面加入一个元素,该元素清除浮动,该元素转化为块级元素,在隐藏,行高为0,内容为无. 这样去理解.

<ul class="clear">
	<li><a href="#">HOME</a></li>
	<li><a href="#">SERVICE</a></li>
	<li><a href="#">PRICE</a></li>
</ul>

2.div+css绝对定位,相对定位
相对定位是更具其自身为基准点,进行定位---离开原来的位子,但是还占着原来的空间.

绝对定位是父级元素为基准点,进行定位---会脱离文档流.
绝对定位是相对于父级元素进行绝对定位的,如果父级元素不存在,则依据body进行绝对定位.

当我们要使用绝对定位时:要满足2个条件:
①必须给父级元素加定位属性,一般建议用position:raletive;
②给子元素加绝对定位,position:absolute; 同时要加方向和属性.

3.after{content:"在此处你想要加入的内容XXXXXX";}的使用,相对before{content:"在此处你想要加入的内容XXXXXX";}一样的用法.

<ul class="clear">
	<li><a href="#">about</a></li>
	<li><a href="#">contact</a></li>
</ul>
<p>I Like</p>

在css中加入以下代码:

li a:after{content:" US";}
p:after{content:" China !";}

4.当对内联元素施加了浮动属性,那么此时它已经是块级元素了,可以对它进行高度和宽度的设置.
5.div+css制作三角形

<span class="arrow"></span>
.arrow{border-width:10px;border-style:solid;border-color:transparent transparent
transparent #000;width:0;height:0;float:right;cursor:pointer;}