##浮动与定位
浮动
浮动可以理解成向网页的元素发布一个排列命令,它常用的值是left/right/none这三种,当为left的时候,元素从左向右排成一行,当为right时,元素从右向左排成一行
当一个元素或多个元素浮动以后,这个时候,一定要注意以下几点:
- 当浮动了元素总的宽度大于外层的宽度的时候,这个时候,它一排放不下,会折反到下面来
- 浮动以后的元素会脱离当前的文档流(也就是我们所指漂浮在网页上面),浮动以后的元素它外层的元素高度就无法撑开了
- 一个元素使用了浮动以后它的宽度默认就为0,但是同样可以使用width与height去设置
清除浮动的方式
当元素浮动以后,会对后面的布局有很大的影响,这个时候,我们会清除之前的浮动
所谓的清除浮动其实就是把之前漂浮起来的元素重新下去
-
使用
clear:left/right/both
我们可以通过使用clear的属性方式来设置元素的清除浮动。如果在布局的时候,发现前面的元素浮动以后,我们可以在后面的元素上面加上clear属性来清除浮动
如果之前是
float:left
那么我们就使用clear:left
,如果是float:right
那么就使用clear:right
,如果不知道,可以直接 写clear:both
-
根据浮动的本质现象是元素脱离文档流照成外边的元素高度为0,这个时候,我们只要重新设置外边的元素高度就可以了。但是我们又不能直接去设置外边元素的高度(因为有时候我们根本就不知道设置为多少),这个时候,我们需要使用一个css hack来解决这个问题
overflow:hidden
-
写一个特定的样式来清除浮动(首选)
因为我们都知道浮动起来的元素它需要通过
clear:both
来进行清除,这个时候,我们可以单独的写一个CSS样式用来清除我们的浮动.clearfix::after{ content: ''; display: block; clear: both; }
代码生成效果如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdGGnzrm-1587354662389)(assets/1531290260104.png)]
以下我们如果再需清除涉浮动,只需要在外边的元素上面添加一个
.clearfix
的样式就可以了
###定位
如果一个元素要使用定位,那么它必须使用position这个属性,这个属性他的属性值有四个,常用的有如下三个
相对定位relative
- 元素相对于原来的位置在进行位置偏移
- 元素移动以后,依然还占用之前的位置
- 经过相对定位的元素,它相对于屏幕会向上提高一个等级
- 相对定位没有脱离文档流
- 相对定位的块级元素可以使用
margin:auto
居中(它没有脱离文档流)
.div1{
position:relative;
top:-20px
}
**说明:**元素向上偏移20个像素,并且保留之前的位置
绝对定位absolute
- 绝对定位默认是以浏览器在进行定位,例如
left:20px
指的就是距离浏览器左边20px - 当一个元素进行绝对定位以后,如果它的外层元素里面的任何一层有相对定位,这个时候,他就会以这一层的元素为标准开始定位(子绝父相)
- 绝对定位不占用原来的位置
- 绝对定位会脱离当前的文档流
- 一个元素进行绝对定位以后,如果它是块级元素,那么它的宽度就不再是默认的100%,而是由里面的内容进行撑开,但是,这个时候我们可以通过width与height来设置它的宽度与高度(它只是改变了元素的宽度,并没有改变元素的性质:也就是没有把元素由块级元素转行内元素)
- 如果一个元素使用了绝对定位,那么就不能够使用
margin:auto
进行居中 - 绝对定位的元素会随着浏览器滚动条的拖动而滚动
固定定位fixed
固定定位与绝对定位很像,它们都具备一定的特性
- 一定以浏览器为标准定位
- 一个元素采用了固定定位以后,它的宽度默认为0,最终的宽度由里面的内容来撑开,但是可以通过width与height来设置
- 固定定位不会随着浏览器的滚动条而进行移动,但绝对定位会存在这种情况
- 固定定位会脱离文档流
- 固定定位不能使用
margin:auto
居中
静态定位static
静态定位就是position:static
,这一种定位相当于清除之前的定位(一定不要用,因为根本就没用)
定位的特性
-
一个元素经过任何一种定位(static除外)以后,它会多出一个轴出来(默认情况下,元素只有两根轴X与Y轴),一旦有了定位的属性以后,这个时候,它会有有一个属性
z-index
-
关于子绝父相
所谓的“子绝父相”指的是当子级元素使用绝对定位以后,父级元素要使用相对定位来拦住下来的绝对定位。
“子绝父相”里面,父级元素不一定要使用相对定位才行,除了static以外的任何定位,我们都可以拦下绝对定位
-
当一个元素在使用了固定定位fixed或绝对定位absolute以后,它的宽度与高度可以通过left/right/top/bottom来进行拉伸处理
##CSS中有那些属性会对元素的宽度照成影响
如果要对元素的宽度与高度照成影响,无非就在两个方面
width/height对宽度的影响
- 一个元素如果设置了width/height以后,就会设置元素的宽度与高度(块级元素与行内块级元素)
- padding也会对元素的宽度与高度照成影响
元素类型对宽度高度的影响
一个元素如果由块级元素(display:block)转换成了行内元素(display:inline)以后,这个时候,它的宽度就不会再是默认的100%,而是由里面的内容来进行撑开
脱流对元素宽度的影响
一个元素如果要脱流,只有两种情况
- 浮动
- 绝对定位,固定定位
当元素脱流以后,这个时候,它的宽度就不再是100%,而是由里面的内容进行撑开的
在这个地方,我们同样可以通过width去设置它的宽度
👉 脱流以后的元素不能使用
margin:auto
进行居中
弹性盒子
当一个元素的父级元素给了弹性盒子以后,里面的子元素宽度就不再是100%,而是由里面的内容去撑开的,但是仍然可以使用with去设置它的宽度