css4(不写3怕误会,浮动好难啊~~~)

浮动:元素加了浮动,会脱离文档流(是文档中可显示对象在排列时所占用的位置),按照指定的一个方向移动直到碰到父级的边界或者另一个浮动元素停止

1使块元素在一行显示

2使内嵌支持宽高

3不设置宽高的时候自动撑开

4脱离文档流

5提升层级半层(一个div是浮动的,另一个是不浮动的,另一个div里面的内容会被挤下来)


clear:left right both none元素的某个方向不能有浮动

上方有一个标签假设是左浮动的,当前这个标签若是不浮动就会被压在下面,若是左浮动就会贴着前一个标签,若是clear:left就会在上一个标签的下面。


清除浮动的方法

1给浮动元素父级也加浮动,方法不好

2给浮动元素父级加inline-block,还得给父级元素的父级加上text-align:center。。。(如果要显示在页面正中间)

3在浮动元素下加

.clear{height:0px;font-size:0;clear:both;}

4在浮动元素下加
(不符合w3c标准,w3c希望3者分离)

5父级添加clear类,css为.clear:after{content:"";display:block;clear:both;}。ie67不行。给浮动元素的父级加clear:{zoom:1;}和.clear:after{content:"";display:block;clear:both;}就行,但是火狐不支持。极其推荐!!!

6给浮动元素父级加overflow:auto,一定配合zoom:1(我的谷歌又不行了%>_<%)或者overflow:hidden;?

7css4(不写3怕误会,浮动好难啊~~~)_第1张图片

8css4(不写3怕误会,浮动好难啊~~~)_第2张图片

IE67下浮动元素父级有宽度就不用清浮动,IE67下不支持after伪类


在IE6下高度小于19px的元素,高度会被当做19px来处理

解决办法:font-size:0

对于0,1,2px,解决办法:overflow:hidden


p:after{content:""}在p段落后面加东西


overflow溢出

auto显示滚动条 scroll没有溢出也显示滚动条 hidden超出之后的文字就不显示了


本章附练习如下:

1

css4(不写3怕误会,浮动好难啊~~~)_第3张图片





无标题文档




2

css4(不写3怕误会,浮动好难啊~~~)_第4张图片





无标题文档




3.list .div2是什么意思?

.list div{height:100px;background:#000; color:#fff;}
.list .div2{height:50px;}/*list类下的div遵守上条规则,但又是div2的类,所以遵循此条?*/




你可能感兴趣的:(css)