【css】常用选择器及浮动

一、常用选择器

标签选择器：标签名{样式} 权重：1

class选择器（类选择器）： .+class名{} 权重：10

特点：多个标签可以有相同的class名
一个标签可以有多个class名
class名由两个单词组成，用下划线隔开eg：div-box

id选择器： #+id名{} 权重：100
特点：1、类似于身份证号2、多个标签不可以有相同的class名3、一个标签不可以有多个class名

后代选择器、父选择器、子选择器{} 权重 几个选择器权重相加

子代选择器
父选择器>子选择器 权重：几个选择器权重相加 只有儿子

组合选择器
选择器1，选择器2…{} 权重：各个选择器权重单独计算

通配符选择器：权重最小 会选中所有标签*{} 用途：去除一些默认样式

二、浮动

浮动的作用：让块属性元素排成一行 解决水平布局问题 float:left 左浮动（以左边为开始位置）float：right右浮动（以右边为开始位置）

注意点：排成一行的元素都需要设置浮动

附带作用：1.让行属性标签支持设置宽高 2.文字环绕效果

为什么不使用display：inline-block
- 代码换行默认有空隙
- 一个移动，其他元素会跟着移动
- 默认文本下对齐
- 用途：让行属性元素支持设置宽高

锚点标签

• 固定定位 脱离文档流 position:sticky粘性定位（固定定位和绝对定位的结合）
• 去除默认样式text-decoration: none;
• 鼠标移入效果 .nav a:hover
• a标签+id选择器配合起来使用

浮动存在的问题：父元素在不设置高度情况下高度由子元素撑开 一旦子元素设置浮动 父元素会失去高度进而影响后面元素布局
解决方式：1.给父元素设置overflow：hidden
​ 2.动态向父元素后面添加一个clear:both的块属性元素
white-space：nowrap；：强制文本在一行显示
text-overflow：ellispsis；：文本超出部分显示省略号