css定位基础
-
盒模型
内容区宽度: width
内边距: padding
边框: border
外边距: margin
基本布局与定位
流
块元素从上往下流,各元素之间有一个换行
内联元素从左上到右下流
内联元素与块元素的外边距
浏览器并排放置两个内联元素时,会将它们的外边距叠加
浏览器上下防止两个块元素时,会将它们共同的外边距折叠
当元素互相嵌套时,只要两个垂直外边距碰到一起,它们就会折叠。例如如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,也就不会折叠。
float:浮动元素
- 浮动一个元素时,如果希望他在某个元素后面,就将要浮动的元素的HTML紧挨在那个元素的下面
- 块元素会忽略浮动元素;内联元素围绕浮动元素排列
- 块元素、内联元素都可以浮动
- 浮动元素的步骤
- 指定一个标识
- 指定一个宽度(width)
- 设置float属性
绝对定位
- 当指定一个元素绝对定位时,浏览器将它从流中完全删除
- 浏览器根据left、right、top、bottom属性定位该元素
- 块元素、内联元素都会忽略绝对定位的元素
- 块元素、内联元素都可以使用绝对定位
- 绝对定位的位置是相对于距离它最近的父元素指定的
- 相对于浮动定位,绝对定位可以保证内容的顺序
相对定位
- 相对定位与绝对定位很类似,但元素仍在页面流中
- 相对定位是相对其外围包含元素定位
固定定位
- 固定定位是相对于浏览器窗口边界 的,而不是页面边界。