CSS学习笔记

Posted 2021-06-29 “明白”

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.设置父级元素的高度
简单，元素假设有了固定的高度，就会被限制

3. overflow
   简单，下拉的一些场景避免使用

4. 父类添加一个伪类：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；...
相对是固定的