之前介绍过了定位的元素,以及通过偏移属性去实现这个定位,这篇文章主要介绍辅助定位实现的其他元素,包括宽度和高度、内容溢出或剪裁、以及元素的可见性
宽度和高度
当确定了元素定位到哪里之后,有时候需要声明高度和宽度。高度属性(height)和宽度属性(width)是非常常见的两个属性。当不确定宽度高度又不想超出时,此时可设置最小最大宽度(高度)解决,但需注意的是此时的属性不可为负
最小宽度(高度) min-width 、min-height
值:<length> | <percentage> | inherit
初始值:auto
应用于: 除了非替换行内元素和表元素以外的所有元素
继承性:无
百分数:相对于包含块的宽度
计算值:对于百分数,根据指定确定;对于长度值,则为绝对长度;否则,则为none
最大宽度(高度)类似;此做法的好处是可以相对安全的混合使用不同的单位
内容溢出和剪裁
如果一个元素的内容相对于元素大小来说过大就有可能溢出元素本身
溢出(overflow)
值:visible | hidden | scroll | auto | inherit
初始值:visible
应用于:块级元素和替换元素
继承性:无
计算值:根据指定确定
如果值为scroll,元素的内容就会根据元素框的边界处裁剪,但是会提供滚动条,可供滑动
如果值为hidden,元素的内容会在元素框的边界处裁剪,超出裁剪框的内容则不可见。
内容裁剪(clip)
值: rect(top,right,bottom,left) | auto | inherit
初始值:auto
应用于:绝对定位元素(css2中,也应用于块级元素和替换元素)
继承性:无
计算值:对于矩形,4个计算长度表示裁剪矩形区域的4个边;否则,根据指定确定
rect(...)的值不是边偏移,而是距元素左上角的距离;只允许长度值和auto
元素可见性
除了控制元素的溢出和裁剪,还可以控制元素的可见性(visibility)
值:visible | hidden | collapse | inherit
初始值:visible
应用于:所有元素
继承性:有
计算值:根据指定确定
不管可见或是不可见,元素都会影响文档的布局。这里的作用仅仅只是使元素不可见,但不删除其元素框;其次,元素是具有继承性的,所以在后代元素中,若出现不一致,必须声明可见性