day044 cssy其他样式 js初识

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是完全不透明.

练习: 写一个小米商城页面