浮动和定位

2017-10-14  本文已影响0人  梨啊梨

限制宽度和高度

min-width、min-height、max-width、max-height

可以为元素的内容区定义一个最大尺寸 最小尺寸


内容溢出和剪裁

如果一个元素的内容对于元素大小来说过大,就有可能溢出元素本身

溢出

一个元素固定为某个特定大小,但内容在元素中放不下,此时可以控制overflow属性控制这种情况

                   overflow

值:visible    hidden     scroll   auto   inherit

初始值:visible

应用于:块级元素和替换元素

无继承性

visible:元素的内容在元素框之外也可见

scroll:元素的内容会在元素框的边界处剪裁,他会提供滚动条

hidden元素的内容会在元素框的边界处剪裁,超出区域的内容不会显示

auto:用户代理来决定

内容剪裁

如果一个绝对定位元素的内容溢出其内容框,而且overflow设置为要求剪裁该内容,可以使用clip改变剪裁区域的形状

clip:rect(top,right,bottom,left)

应用于绝对定位元素,CSS2中可以用于块级元素和替换元素

rect(...)的值不是边偏移,而是距元素左上角的距离

只允许长度值和auto,不可以有百分数


元素可见性visibility

值:visible、hidden、collapse、inherit

应用于所有元素

visible:可见的

hidden:不可见,但是他会影响文档的布局,元素还在那里(留着他的空间),只不过你看不见他,与display:none有区别,display:none不仅不显示,而且会从文档中删除,对文档布局没有任何影响


z-index

利用z-index可以改变元素相互覆盖的顺序。

较高的z-index值会覆盖在低的上方

单位:所有整数,包括负数


绝对定位




相对定位



固定定位

pisition:fixed,也能让元素脱离标准文档流

应用场景:固定到浏览器窗口固定位置的元素,跟随导航、回到顶部

上一篇下一篇

猜你喜欢

热点阅读