总目录
浮动
浮动属性可以控制盒子左右浮动,直到边界碰到父对象或另一个浮动对象
1. 基本浮动定位
float:none(默认值,元素不浮动)
float:left(元素向父对象的左侧浮动)
float:right(元素向父对象的右侧浮动)
注意: 设置了向左向右浮动的盒子,整个盒子会做相应的浮动,浮动盒子不再占用原本在文档中的位置,其后续元素会自动向前填充,遇到浮动对象边界停止。
2. 清除浮动属性
clear:none(默认值,允许浮动)
clear:left(清除左侧浮动)
clear:right(清除右侧浮动)
clear:both(清除左右浮动)
overflow:auto:(一个元素比包含它的元素高,并且它是浮动的,它将“溢出”到其容器之外:然后我们可以向包含元素添加 overflow: auto;,来解决此问题)
补充:清除了左侧浮动后,该元素就可以忽略前一个元素设置的向左浮动,就避免了(后续元素自动向前填充)这种效果。
定位
使用定位属性(position)可以精确控制盒子的位置,其语法格式如下
position:static|relative|absolute|fixed
1. 静态定位
position:static;
注意:设置position属性的值为static,或者不做设置时默认为static,盒子按照HTML规则定位,一般来说就是自上而下靠左排列.此时定义top,left,bottom,right无意义。
2. 相对定位
position:relative;
即设置盒子相对其原本位置的定位,可以使用top,left,bottom,right定位该盒子相对其原本应显示位置的偏移位置,占用原位置空间,如果有另外一个盒子,则另一个盒子位置不动。
3. 绝对定位
position:absolute;
即使用top,left,bottom,righ等属性值 定位盒子相对其具有position设置的父对象的偏移位置,绝对定位的元素浮于页面之上,不占用原页面空间。(注意:后续元素不收其影响,会填充其原有位置)
(1)若父对象有position属性设置
则该元素 以其父对象为参照绝对定位
(2)若父对象无position属性设置
则该元素脱离其父元素,以浏览窗口为参照偏移位置
4. 层叠定位属性
z-index: 数值(可以为负);
前三种定位后,被定位的元素会挡住其他元素,此时可以使用层叠定位属性定义页面元素的层叠次序,值大者在上。
5. 粘性定位属性
position: sticky;
粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置。如果使用(top: 0)则到达其滚动位置时,sticky 元素将停留在页面顶部
6. 固定定位
position:fixed;
通过top,left,bottom,right等属性定位盒子相对浏览器窗口的偏移位置
伪类选择器
伪类选择器可以分为结构伪类选择器和UI元素伪类选择器,结构伪类是通过文档结构的位置关系来匹配特定的元素,从而减少文档内对class和ID属性的定义,从而使文档更简洁;而UI伪类选择器作用在标记的状态上,即指定的样式只在某种转态时才起作用。
结构伪类选择器
(1)基本结构伪类选择器
:root 匹配文档的根元素
:not 对某个结构元素使用样式,但排除其下方子类元素
:empty 指定元素内容空白时的样式
:target 对页面中target元素指定样式
(2)与元素位置有关的结构伪类选择器
:first-child 对父元素的第一个子元素指定样式
:last-child 对父元素的最后一个子元素指定样式
UI伪类选择器
最常用:
`/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}`
其他:
伪元素选择器
选取元素的一部分并设置其样式
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
(1)::first-line 伪元素
::first-line 伪元素用于向文本的首行添加特殊样式。
eg:p::first-line {格式}
(2)::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。注意::first-letter 伪元素只适用于块级元素
(3) ::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
(4)::after伪元素
::before 伪元素可用于在元素内容之后插入一些内容。