现在的位置: 首页 > 综合 > 正文

CSS定位与浮动总结

2013年08月19日 ⁄ 综合 ⁄ 共 855字 ⁄ 字号 评论关闭

CSS定位与浮动总结(必须理解记住)

CSS定位与浮动总结(主要是通过学习《写给大家看的CSS书》,这是本不可多得的书啊)

  • 盒模型结论1:特定尺寸的盒子(宽度已定)会随着内边距、边框、及外边距的添加扩展,进而占据更多的水平空间。事实上,通过width属性设置的是盒子内容的宽度,而不是盒子本身的宽度。

  • 盒模型结论2:无尺寸限制的元素(未设置宽度)会扩展到与它的包含元素同宽。因此,为无尺寸限制的元素添加水平外边距、边框和内边距,会导致元素内容的宽度变化。

  • 一个div未设定宽度,那么它的宽度将与窗口同宽。

  • div设定float属性后,如果未设定它的宽度,那么它的宽度将收缩到最小。

  • 子div设定float属性后,父div将感应不到子div的高度,此时如果想让父div高度随子div高度变化而变化可以在子div后添加这样一个空白div“<div style="clear:both;></div>”,或者将父div也设置float属性,但建议使用前者。

  • div设定float属性后,它将脱离常规文档流,紧临的div将会占用它的位置,视其不存在,此时它们在窗口的最左上方重合,但紧临div内部的元素(比如img、p等)此时居然会围绕该div。但如果将紧临的div也设置float属性,它们将并排排列。

  • div设定float属性后,它将脱离常规文档流,紧临其后的元素(除div)将会浮动到它的旁边。

  • 绝对定位元素默认的定位环境是body元素,当为其父元素设定"position:relative"时,该父元素将成为其定位环境,父元素设定为“position:absolute”时也可以,但一般不这么做。

  • div处于静态(默认)定位状态时,它的top和left属性的值将被忽略。

  • 在为行内元素应用内边距和边框时,它们不会像我们期望那样影响父元素。行内元素的垂直内边距不会像块级元素那样,沿着文档层次向上传递到父元素。因而父元素也不会调整自身大小来容纳被链接占用的更大区域。简单的补救办法是把行内元素转换为块级元素display:block;

抱歉!评论已关闭.