CSS浮动与定位
一、浮动
1.什么是浮动:
float属性创建浮动框,浮动元素依然按照其在普通流的位置上出现,然后根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘接触包框或者另外一个浮动元素为止。
2.属性值:
属性值 | 描述 |
none | 元素不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
注释
左浮动与右浮动:
3.浮动的特性:
(1)脱离标准流的控制(浮)移动到指定位置(动),俗称脱标
(2)浮动的盒子不保留原先的位置。
(3)具有行内块元素特性,不用再将行内元素转化为块元素
(4)浮动的盒子会压住标准流的盒子,但不会压住标准流盒子里的文字,文字会围绕在浮动盒子周 围。
注释(1)(脱标)
标准流样式
浮动后样式
注释(2)
不保留原位置 (其他未浮动元素占用浮动元素之前位置)
浮动前
浮动后(只设置第一个小盒子浮动,第二个小盒子不浮动)
注释(3)具有块元素性质,可以设置宽高
不设置float属性:
设置float属性后
4.浮动元素的影响:
如果父元素不给高度,子元素浮动后由于不占位置,父元素的高度会变为零,会影响下面标准流的布局。
浮动前:
浮动后:
5.清除浮动影响:
(1)清除浮动本质
清除浮动本质是清除浮动元素脱离标准流造成的影响
(2)清除浮动策略
闭合浮动,只让浮动在父盒子内部影响不影响父盒子外边的元素
(3)清除浮动的方法
清除浮动的方式 | 优点 | 缺点 |
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义标签 |
父级 overflow:hidden | 书写简单 | 溢出隐藏 |
父级 :after伪元素 | 结构语义化正确 | IE6 7,兼容性问题 |
父级双伪元素 | 结构语义化正确 | IE6 7,兼容性问题 |
注释一:
额外标签法:
设置前:
设置后:
注释二:
给父元素设置overflow:
设置前:
设置后:
注释三:
父级:after伪元素:
(需要清除浮动时,父级元素直接调用就可以了)
设置前:
设置后:
注释四:
父级双伪元素:
(需要清除浮动时,父级元素直接调用就可以了)
设置前:
设置后:
二、定位
1.定义:
将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移决定了该元素的最终位置。
2.定位模式:
定位模式决定元素的定位方式,它通过CSS的position属性来设置
属性值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
sticky | 粘性定位 |
边偏移是定位的盒子最终移动到最终位置,有top left right bottom 四个属性
3.静态定位 static
语法 选择器 {position:static}
静态定位是元素的默认定位方式,无定位的意思
静态定位按照标准流特性摆放位置,它没有边偏移
静态定位在布局时很少用到
4.相对定位 relative
语法 选择器 {position:relative}
相对定位 是元素在移动位置的时候,是相对于它(自己)原来的位置来说的。(以自我为中心参考点)
特点:
1.相对于自己原来位置。
2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它。(不脱标,继续保留原来位置)
5.绝对定位 absolute
语法 选择器{position:absolute}
绝对定位 是元素在移动位置的时候,是相对于它祖先元素来说的
特点:
(1)如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
(2)如果父元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置
(3)绝对定位不再占有原来的位置(脱标)
示例:
父级无定位
父级设置定位后:
6.子绝父相由来(子级是绝对定位的话,父级要用相对的定位)
1子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。
2父盒子需要加定位限制子盒子在父盒子内显示。
3父盒子布局时,需要占有位置,因此父亲只能是相对定位。
总结∶因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。
7.固定定位 fixed
语法 选择器 {position:fixed}
固定定位 是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
特点∶
1.以浏览器的可视窗口为参照点移动元素
2.跟父元素没有任何关系
3.不随滚动条滚动
4.固定定位不再占有原先的位置
固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。
示例:
8.粘性定位 sticky
语法 选择器 {position:sticky; top:10px}
粘性定位可以被认为是相对定位和固定定位的混合。
特点∶
1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加top. left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差,IE不支持。
示例:
9.定位的叠放顺序
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序
语法 选择器 {z-index:1}
属性值为数字,不带单位,默认为auto,可以为正负整数,盒子排列顺序按数字大小排序,数值越大盒子越位于上层。如果属性值相同,盒子顺序按书写顺序排序。
注:只有定位的盒子才有 z-index属性
示例:
10.绝对定位的盒子居中
加了绝对定位的盒子不能通过margin水平垂直居中,但是可以通过以下计算方法实现水平和垂直居中。
11.定位的拓展
1.定位特殊特性
绝对定位和固定定位也与浮动类似。
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。
示例:
(按理说:span是行内元素不能直接设置宽高;div是盒子,会占用一行的位置,但是设置定位属性后,如图:)
12.脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)的元素都不会触发外边距合并的问题。
13.绝对定位(固定定位)会完全压住盒子
浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),适合用来做文字环绕效果。
但是绝对定位(固定定位)会压住下面标准流所有的内容。