一、常用选择器
标签选择器:标签名{样式} 权重: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;:文本超出部分显示省略号