系列文章目录
文章目录
一、CSS浮动
1. 浮动的概念
-
HTML页面的标准文档流:
从上到下,从左到右,遇到块级元素换行。
-
浮动元素:
浮动元素则是脱离了文档流,“漂浮”在页面之上、父元素(默认为body标签)的边框之内。
当一个元素成为浮动元素,就会空出原来在文档流中的位置,后续的元素会自动顶替它的位置。
浮动元素本身多大就占多大空间,没有块级元素的概念。
-
实例:
元素A设置为向左浮动,元素C顶替它的位置,然后被遮盖了一部分。
PS:浏览器在遇到文本内容被遮挡的情况时,会想方设法的将内容展示出来。
两个元素都向右浮动,元素A先浮动,元素C后浮动。当C碰到A就停止浮动,紧贴在A左边。
向左浮动也是类似的道理。
2. 设置浮动元素
选择器 {
float: 方向;
}
- 方向可以写:
left:向左浮动。
right :向右浮动。
none :默认值,不浮动。
inherit:从父元素继承float属性。
3. 父标签的塌陷问题及解决方法
-
父标签的塌陷问题:
父元素(图中的黑框)没有设置尺寸,全靠子元素(图中的元素A)“撑开”。当子元素浮动后,脱离文档流,就会导致父元素塌陷。
-
解决方法:
事先写好以下代码,之后在要解决塌陷问题的标签上,添加
calss=clearfix
属性即可。.clearfix:after { content: ''; display: block; clear: both; }
二、溢出属性
-
溢出问题:
当某个元素内容很多,而尺寸不够时,就会溢出。如,下图中的元素,内容溢出了边框。
-
溢出属性:
选择器 { overflow: 值; }
可用的值:
-
hidden - 直接隐藏溢出部分。
-
scroll - 溢出内容不会在元素外显示,而是在元素内滚动显示,类似窗口。
-
auto - 与 scroll 类似,但仅在必要时添加滚动条。
-
三、CSS定位
1. 定位方法
-
静态定位:
所有的标签默认都是固定的,无法改变位置。默认属性值为:
position: static;
。如果需要修改位置,就需要先修改position属性。且修改完该属性后,无论是否修改标签的位置,该标签都会被视为定位过的标签。
-
相对定位:
相对于标签原来的位置进行移动。
属性值为:
position: relative;
。 -
绝对定位:
相对于已经定位过的父标签进行移动。如果父标签没有进行过定位,就以body标签为参照进行移动。
属性值为:
position: absolute;
。 -
固定定位:
相对于浏览器窗口,固定在某个位置。
属性值为:
position: fixed;
。
2. 修改位置
设置完定位方法,就可以修改位置了:
选择器 {
top: 偏移量;
bottom: 偏移量;
left: 偏移量;
right: 偏移量;
}
比如,bottom: 30px;
是指距离参照元素(原来的位置、父标签、浏览器等)底部30px。
3. 是否脱离文档流
绝对定位、固定定位是脱离文档流的;
相对定位、静态定位则不脱离。
四、z-index属性
-
作用:
html页面在逻辑上,其实是三维的。除了长、宽方向的两个轴,还有一个z轴,是朝向用户的一个轴。
z-index用来设置元素的堆叠顺序,也就是元素之间,谁在谁上面的问题。
-
语法:
选择器 { z-index: 数值。 }
z-index的值可以是负值,且仅能在定位元素上起作用!
数值更大的元素,总是会处于数值较小的元素的上面。
五、透明度
使用opacity属性可以设置元素的透明度。与rgba不同的是:rgba只能修改颜色的透明度,而opacity还可以修改字体的透明度。
选择器 {
opacity: 值;
}
该属性的取值范围为[0, 1],0表示完全透明,1表示不透明。