float: 浮动
.t1{ float: right/left; }
关于浮动的两个特点:
1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止.
2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样.
三种取值:
left: 向左浮动
right: 向右浮动
none:默认值,不浮动
clear属性
clear属性规定元素的那一侧不允许有其他浮动元素.(left,right,both(左右两侧均不允许浮动),none,inherit(从父元素中继承clear属性的值))
清除浮动:
浮动的副作用: 父标签塌陷的问题,所以要先清除浮动
主要有三种方式:
1.固定高度 在父标签中加入一个其他的标签
2.伪元素清楚法 css解决
3.overflow:hidden
伪元素清除法:
.t1:after{ content:' '; display:block; clear: both; }
overflow溢出属性
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow(水平和垂直均设置)
- overflow-x(设置水平方向,只出现x轴的滚动条)
- overflow-y(设置垂直方向,只出现y轴的滚动条)
Z-index属性
#i2 { z-index: 999; }
1, z-index值表示谁压着谁,数值大的压盖住数值小的.
2.只有定位了的元素,再能有z-index,也就是说.不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素float不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压着没有定位的元素.
4.从父现象: 父亲怂了,儿子再厉害也没用.
opacity
用来定义透明效果.取值范围是0-1,0是完全透明,1是完全不透明.
练习: 写一个小米商城页面