2019独角兽企业重金招聘Python工程师标准>>> 
HTML DIV+CSS小技巧
1.当父元素没有设定高度时,他的子元素全部浮动之时,父元素的高度不会自动增加.<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div class="clear"> </div>
</div> CSS:
#main{
background:black;
}
#left{
float:left;
background:green;
height:200px;
}
#right{
float:right;
background:blue;
height:300px;
}
.clear{
clear:both;
}解决这个问题有三种方法:
1) 额外标签法:增加一个额外标签
<div class="clear"> </div>
2) 父元素使用overflow的方法 overflow:hidden;
3) 利用伪对象after方法
定义一个类,使用伪对象after,控制浮动元素的影响.
网上最流行的清除浮动的代码:
.clear:after{
clear:both;
content:".";
display:block;
height:0;
overflow:hidden;
}<ul class="clear">
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">PRICE</a></li>
</ul>相对定位是更具其自身为基准点,进行定位---离开原来的位子,但是还占着原来的空间.
绝对定位是父级元素为基准点,进行定位---会脱离文档流.
绝对定位是相对于父级元素进行绝对定位的,如果父级元素不存在,则依据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>li a:after{content:" US";}
p:after{content:" China !";}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;}