1.选择器
1.基本选择器
-
统配选择器 *
-
标签选择器
会选择到这个页面上所有的这个标签的元素
-
类选择器 .class名称{}
选择所有class属性一支的标签,跨标签
-
4.id选择器: #id名称{}
? id必须保证全局唯一
? 不遵循就近原则
? 优先级: id选择器 > class选择器 > 标签选择器
2.层次选择器
- 后代选择器: body p{}
- 在某个元素的后面都有显示
- 子选择器: body>p{}
- 在某个元素的后面一代显示
- 相邻兄弟选择器: .active +p{}
- 只有同辈相邻的向下的 p元素的那一个(不包括自己)
- 通用兄弟选择器: .active~p{}
- 同辈向下的所有 p 元素(不包括自己)
3.结构伪类选择器
/* ul 的第一个子元素 子元素为 li*/
ul li:first-child{
background:red;
}
/* ul 的最后一个子元素*/
ul li:last-child{
}
/*选中p1 : 定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效.
* 顺序/
p:nth-child(1){
}
/*选中父元素,下的p元素的第二个, 类型*/
p:nth-of-type(1){
}
4.属性选择器(常用)
属性名, 属性名 = 属性值(正则)
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
/*都在a标签内
/*存在id属性的元素 a[]{}
a[id]{}
id = first的元素
a[id=first]{}
class中有links的元素
a[class*="links"]{}
选中href中以http开头的元素
a[href^=http]{}
选中href中以xx结尾的元素
a[href&=http]{}
2.美化网页元素
文本的样式
- 颜色: color rgb rgba
- 文本的对齐方式 text-align =
- 首行缩进 text-indent=
- 装饰 text-decoration 下划线
- 文本图片水平对齐: vertical-align:middle
- text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径
超链接伪类
? 1.hover 鼠标悬停的状态
? 2.active 鼠标点击中的状态
3.块元素,内联元素,内联块元素之间的转换
display属性是用来设置元素的类型及隐藏的,常用的属性有:
1.none 元素隐藏且不占位置
2.block 元素以块元素显示
3.inline 元素以内联元素显示
4.inline-block 元素以内联块元素显示
4.父级边框塌陷问题
解决方案
-
增加父级元素的高度
-
增加以个空的div标签,清除浮动
<div class="class"></div> .clear{ clear:both; margin:0; padding:0; } -
overflow
在父级元素中增加一个 overflow:hidden -
在父级添加一个伪类:after
#father:after{ content:‘‘; display:block; clear:both }
小结:
- 浮动元素后添加div
- 优点:简单
- 缺点:代码中尽量避免空div
- 设置父元素的高度
- 简单
- 元素假设有了固定高度就会被限制
- overflow
- 简单
- 下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐)
5.定位
-
相对定位: position:relative
相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流之中
原来的位置会被保留
-
绝对定位:基于xxx定位,上下左右
- 没有父级元素定位的前提下,相对于游览器的定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素的范围内移动
- 相对于父级或游览器的位置,进行指定的偏移,绝对定位的话,他不在标准文档流之中
-
固定定位
不会随游览器移动