如果一个元素的大小设置太小,以致不能包括其内容,我们就可能需要在该元素上使用overflow属性指定其内容不能填充时候如何处理
overflow的取值可以使visible | hidden | scroll | auto,其中visible是默认值。值visible表示不裁剪内容,也不添加滚动条,强制显示元素内容;hidden表示裁剪内容,而且不显示元素超出对象尺寸的内容;scroll表示裁剪内容,同时提供滚动条;auto表示只有在必要时才裁剪内容并添加滚动条。必须注意的是,如果我们要使用overflow属性时,那么该元素的position属性必须指定绝对定位(absolute)
指定裁剪区域
clip属性可以确定定位对象的裁剪区域,其取值为rect(top right bottom left)| auto,其中top right bottom left用于指定上、右、下、左四个方向的裁剪长度,取值 为长度值或auto。如果任意一边使用auto则相当于该边没有进行裁剪。
处理元素重叠
使用top和left属性可能会造成元素相互重叠在一起,此时可以使用z-index属性。z-index属性用来控制重叠的元素的现实顺序,值较高的元素将覆盖值较低的元素。如果使用-1,则表示元素将至于页面默认文本的后边,这对于设置背景图片是很有用的。如果把电脑屏幕看做x-y平面的话,那么z轴就是垂直于屏幕的。
必须注意的是:z-index属性在设置了position并取值为“absolute”或“relative”时有效。
visibility属性与display属性的不同之处在于:
当隐藏元素时,visibility属性定义的元素仍然为保留原有的显示空间。
元素定位类型分为
静态定位、相对定位、绝对定位、固定定位,分别用用position属性的取值static、relative、absolute、fixed指定。
设置元素的浮动
可以使用float属性,其取值分别为none、left、right
使用clear属性
可以清除上一个元素浮动,而元素本身是可以设置的,
div{background:green;background:yellow !important;background:red;}
因为!important的优先级更高,所以最终背景颜色为黄色
盒模型属性
包括border、margin、padding、width、height,这些属性可以使用快捷方式表示,顺序为上右下左,值之间用空格隔开
使用clip和overflow属性时
position属性必须指定为absolute(绝对位置)
使其容器如DIV的内容自动换行
word-break:break-all和word-wrap:break-word
它们的区别就在于:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行 末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为 conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分 了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。