CSS DIV定位

*css中的属性,如果一个可视化标签有,那么其他的可视化标签100%有,只不过默认值可能不一样

定位[position] 默认值为static

static 默认值 不能动 画在画布之上(陆军)

* 人没死,身体占用了位置,奄奄一息,动弹不得

relative 相对的定位 意味着有两个css属性可以使用了 画在画布之上(陆军)

top left right和bottom(只要设置了position非static才可以使用)

相对于自身元素static的时候所在的位置去移动

* 人刚死了,尸体还在,灵魂出鞘

absolute 绝对的定位 漂浮在画布(canvas)之上 漂浮在画布之上(空军)

就没有了块级元素和行级的概念了

父容器作为参照点?前提条件是它的父容器position不是static或者父容器已经是html

* 人已经死了,尸体已经火化了,只有灵魂在飘(相对于 棺材)

fixed 固定的定位 漂浮在画布(canvas)之上 漂浮在画布之上(空军)

相对于浏览器四个点进行定位

* 已成神仙

*z-index用来设置同样是漂浮在画布之上的盒子的层级先后顺序  值越大 越在最上层

伪类

:hover 当鼠标悬停的时候,改变当前盒子的样式

浮动[float](一定要设置父容器的高度,漂浮的控件不会影响父容器的高度)

漂浮在画布之上(空军)

left往父容器的左边漂浮

right往父容器的右边漂浮

*left向左排列 right向右排列

*当父容器宽度不够的时候,排列会自动换行

*list-style:none 设置列表标签没有前面的样式

溢出[overflow]

visible 显示

hidden 不显示

scroll 不管你内容溢出否,都有滚动条 不推荐

auto 自动 如果内容没有移除则不显示滚动条 否则显示

案例

cursor:pointer;设置鼠标光标

text-indent:10px;设置文本的缩进


样式.parent:hover .son{

backgroung-color:#fff

//这样写的意思是 当鼠标悬停在父容器的时候,父容器下边的子控件有son样式的 执行背景颜色的变化backgroung-colo r

}

你可能感兴趣的:(CSS DIV定位)