CSS定位与浮动总结
2013-06-14 08:42
204 查看
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;
相关文章推荐
- css定位浮动总结
- 清除浮动方式总结
- 总结清除浮动的7种方法
- css清除浮动float的三种方法总结。为什么清浮动?浮动会有那些影响?
- CSS定位(CSS定位概述、相对定位、绝对定位、浮动)
- 清除浮动的各种方法总结
- c#浮动文字框Tooltip控件的使用总结随笔
- Android项目技术总结:获取状态栏和标题栏并计算长宽来限制绘制浮动窗口活动范围
- 浮动总结学习
- 清除浮动的方法验证和总结
- 清除浮动几种方法个人总结
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- CSS总结(二)—— 浮动 与 清除浮动
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- CSS定位之——浮动
- 网上收集的网页清理浮动方法大全及经验总结
- css清除浮动float的三种方法总结
- 总结如何实现Android浮动层,主要是dialog的使用
- 什么时候需要清除浮动?清除浮动的方法总结
- Android项目技术总结:获取状态栏和标题栏并计算长宽来限制绘制浮动窗口活动范围