CSS的选择器、常用属性、浮动与定位

后代选择器	select1 selector2	选择前一个元素的后代节点
子选择器	select1>selector2	选择前一个元素的直接子代的节点
兄弟选择器	select1~selector2	选择兄弟元素，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点
相邻兄弟选择器	select1+selector2	选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点

4、伪选择器

（1）条件伪类选择器：

:lang():基于元素语音来匹配页面元素；

:dir():匹配特定文字书写方向的元素；

:has():匹配包含指定元素的元素；

:is():匹配指定选择器列表里的元素；

:not()用于匹配不符合一组选择器的元素。

（2）行为伪类选择器：

：active：鼠标激活的元素；

：hover：鼠标悬浮的元素；

：：selection：鼠标选中的元素；

（3）伪类元素选择器：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 在元素前插入内容；

::after 在元素插入内容；

5、并选择器

语法： 选择器1,选择器2

{

css样式

}
并集选择器：同时选择多组标签，设置相同的样式。
结果：找到选择器1和选择器2选中的标签，设置样式。
注意：选择器与选择器之间用“，”隔开。可以是基础选择器或者复合选择器。每组选择器通常一行写一个，提高代码的可读性。

6、交集选择器

语法： 选择器1选择器2

{

css样式

}

作用：选中页面中同时满足过个选择器的标签紧挨着的
结果：找到标签中既能被选择器1又能被选择器2选中的标签，设置样式
注意：选择器之间没有任何东西隔开，紧挨着的。交集选择器中如果有标签选择器，标签选择器必须放在前面。

7、属性选择器

七种写法：

（1）.某某[属性]

（2）.某某[属性=属性值]

（3）.某某[属性^=属性值]

（4）.某某[属性$=属性值]

（5）.某某[属性*=属性值]

（6）.某某[属性~=属性值]

（7）.某某[属性|=属性值]

二、常用属性

1、字体属性

（1）字体颜色：

color属性可设置文本的字体颜色；

color属性主要可以用英语单词、十六进制、rgb（）、rgba（）表示法。

（2）font-size：

设置字体大小，常用单位px像素以及百分比。

（3）font-weigth：

normal正常粗细，与400等值；

bold加粗，与700等值；

lighter比父元素继承来的值更细；

bolder比父元素继承来的值更粗。

（4）font-family：

设置字体类型，浏览的默认字体“微软雅黑”；

可以设置多个字体类型，后面的字体为前面的字体的“后备”字体；

字体间逗号分隔；

中文字体要用双括号。

（5）@font-face：

自定义字体；

电脑中没有想要的字体，在浏览网页的时候就会下载相关字体。

2、文本属性

（1）color：

定义文本的颜色。

（2）text- decoration ：

-color:文本修饰的颜色；

-line:文本修饰的位置；

thickness:文本修饰线的粗细。

（3）下划线：

none去掉下划线；

underline添加下划线；

line through添加下划线；

设置文本的修饰线外观的(下划线上划线、贯穿线)；

text decoration-style：文本修饰样式

wavy波浪线/solid实线/dashed虚线

（4）letter- spacing：

定义字符之间的间距；

值和长度相关。

（5）text-align：

定义文本的水平对其放松属性：left

right

center

（6）text-indent：

定义文本首行缩进方式；

值与长度相关。

（7）text-shadow：

capitalize：文本中每个单词的首字母大写；

uppercase：全部大写字母；

lowercase：全部小写字母；

none：和源文件样。

（8）white-space：

normal：默认只保留一个空白；

pre：保留空白；

nowrap：只保留一个空白。

（9）word- spacing：

定义单词之间的距离；

值与长度相关。

3、颜色和背景属性

（1）background-color

定义了元素的背景色；

语法: background color:颜色值。

（2）background-image

描述了元素的背景图像方便控制位置；

语法: background image: none /url ()。

（3）d background-repeat

对背景图像进行平铺；

语法: background-repeat: repeat/no repeatrepeat x/repeat-y。

（4）background-position

改变图片在背景中的位置；

语法: background position: x, y；

length:百分数由浮点数字和单位标识符组成的长度值。

（5）background-attachment

设置背景图片是否固定或者随着页面其余部分滚动；

backgroud-attachment后期可以制作视觉差滚动效果；

语法: background attachment: scroll/fixed（scol:背景图像是随对象内容滚动。fixed:背景图像固定）。

（6）背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同个属性background中。

顺序: background: 背景颜色背景图片地址背景平铺背显图像滚动背景图片位置。

（7）背景色半透明

语法: background: rgba (O, 0, 0, 0.3) ;

最后一个参数是alpha透明度，取值范围在0~1之间；

注意:背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

三、浮动与定位

1、浮动（float）

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：选择器

{

float：属性值；

}

属性	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

特性：

浮动元素会脱离标准流（脱标）。
浮动的元素会一行内显示并且元素顶部对齐。
浮动的元素会具有行内块元素的特性。

2、定位

（1）静态定位

一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

对边偏移无效。

一般用来清除定位的

一个有定位的盒子不想再有定位了，加上 position:static;就可以了

（2）相对定位

1、相对定位可以通过边偏移来移动位置，但是原来的位置继续占有。
2、每次移动的时候，都是以自己的左上角为起点的，（相对于自己原来的位置）原来的位置继续占有。
3、相对定位的盒子仍在标准流中，不影响其他元素布局。
4、如果说浮动是让多个块级元素一行显示，那么定位的价值是让我们的盒子移动到我们想要的位置上去。
（3）绝对定位

1、绝对定位的元素脱离了文档流，绝对定位元素不占据空间
2、具备内联盒子特性：宽度由内容绝对
3、具备块级盒子特性：支持所有样式
4、绝对定位元素相当于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位。

（4）固定定位

1、固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
2、具备内联盒子特性：宽度由内容绝对
3、具备块级盒子特性：支持所有样式
4、不受祖先元素影响
5、固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。

固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

（5）粘性定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

定位总结：

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少