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}

display:block}

display:inline}

display:inline-block }

这个也是一种实现行内元素排列的方式，但是我们很多时候，都是用float

2.3float

1.左右浮动 float

div{代码块;

float:left;}

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;

小结：

1.浮动元素后面增加空div

简单，代码中尽量避免空div

2.设置父级元素的高度

简单，元素假设有了固定的高度，就会被限制

overflow

简单，下拉的一些场景避免使用
父类添加一个伪类：after(推荐)

写法稍微复杂一点

2.5对比

display:方向不可以控制

float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题。

3.定位

3.1相对定位

position:relative;

top:10px；...

相当于原来的位置，进行指定的位移，它还是在标准文档流中，原来的位置会被保留

3.2绝对定位

position:absolute;

定位：基于某某定位，上下左右

1.没有父级元素的前提下，相当于浏览器定位

2.假设父级元素存在定位，我们通常会相当于父级元素进行偏移

3.在父级元素范围内活动

相当于父级元素或者浏览器的位置，进行指定的位移，它还是不在标准文档流中，原来的位置不会被保留

3.3z-index及透明度

z-index:默认是0,最高无限。

图层低的被图层高的覆盖。

div{

z-index：0；

透明度：opacity:0.5;

3.4固定定位 fixed

position:fixed;

CSS学习笔记