CSS学习笔记
1.选择器
作用：选择页面的某一个或者某一类元素
1.1基本选择器
1.1.1 标签选择器：选择一类标签 标签{}
例如：div{代码块}
1.1.2 类选择器：选择所有class属性的标签，跨标签 .类名{}
例如：.name{代码块}
1.1.3 id选择器：全局唯一 #id名{}
例如：#name{代码块}
优先级：id>class>标签
1.2层次选择器
1.2.1 后代选择器：在某个元素的后面 爷爷，爸爸 你
body p{代码块}
1.2.2 子选择器：一代，儿子
body>p{代码块}
1.2.3 相邻兄弟选择器：同辈（只有一个，相邻（向下相邻））
.active+p{代码块}
1.2.4 通用 选择器：当前选中元素向下的所有兄弟元素
.active~p{代码块}
1.3结构伪类选择器
选择 ul 的第一个子元素
ul li:first-child{代码块}
选择 ul 的最后一个子元素
ul li:last-child{代码块}
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
p:nth-child(2){代码块}
选中父级元素，下的p元素的第二个，类型。
p:nth-of-type(1){代码块}
1.4属性选择器（常用）
id+class结合
=绝对等于
*=包含这个元素
^=这个开头
$=以这个结尾
存在id的元素
a[id]{代码块}
id=first的元素
a[id=first]{代码块}
class中有links的元素
a[class*="links"]{代码块}
选中href中以http开头的元素
a[href^=http]{代码块}
选中以$结尾的元素
a[href $=jpg]{代码块}
2.浮动
2.1标准文档流
块级元素 ：独占一行
h1~h6 p div 列表.....
行内元素：不独占一行
span a img strong....
行内元素可以被包含在块级元素中，反之不行
2.2display
block 块元素
inline 行内元素
inline-block 是块元素 但是可以内联在一行
none
div{代码块；
display:none}
div{代码块；
display:block}
div{代码块；
display:inline}
div{代码块；
display:inline-block }
这个也是一种实现行内元素排列的方式，但是我们很多时候，都是用float
2.3float
1.左右浮动 float
div{代码块;
float:left;}
div{代码块;
float:right;}
2.4父级边框塌陷的问题
解决方案
1.增加父级元素的高度
.father{
height:800px;
}
2.增加一个空的div标签，清除浮动
.clear{
clear:both;
margin:0;
padding:0;
}
3.overflow
在父级元素中增加一个overflow：hidden;
4.父类添加一个伪类：after
.after:after{
content:" "；
display:block;
clear:both;
}
小结：
1.浮动元素后面增加空div
简单，代码中尽量避免空div
2.设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制
-
overflow
简单，下拉的一些场景避免使用 -
父类添加一个伪类：after(推荐)
写法稍微复杂一点
2.5对比
display:方向不可以控制
float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题。
3.定位
3.1相对定位
position:relative;
top:10px；...
相当于原来的位置，进行指定的位移，它还是在标准文档流中，原来的位置会被保留
3.2绝对定位
position:absolute;
top:10px；...
定位：基于某某定位，上下左右
1.没有父级元素的前提下，相当于浏览器定位
2.假设父级元素存在定位，我们通常会相当于父级元素进行偏移
3.在父级元素范围内活动
相当于父级元素或者浏览器的位置，进行指定的位移，它还是不在标准文档流中，原来的位置不会被保留
3.3z-index及透明度
z-index:默认是0,最高无限。
图层低的被图层高的覆盖。
div{
z-index：0；
}
透明度：opacity:0.5;
3.4固定定位 fixed
position:fixed;
top:10px；...
相对是固定的
