css学习笔记（2）

一．选择器进阶

1.1后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中2满足条件的元素

选择器语法：选择器1 选择器2{css}

结果：

在选择器1所找到标签的后代（儿子，孙子，重孙子...）中，找到满足选择器2的标签，设置样式

注：

1. 后代包括：儿子，孙子，重孙子...
2. 后代选择器中，选择器与选择器之前通过空格隔开

1.2子代选择器

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法：选择器1>选择器2{css}

结果：

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注：

1. 子代只包括：儿子
2. 子代选择器中，选择器与选择器之间通过>隔开

2.1并集选择器

作用：同时选择多组标签，设置相同的样式

选择器语法：选择器1,选择器2{css}

结果：

找到选择器1和选择器2选中的标签，设置样式

注：

1. 并集选择器中的每组选择器之间通过，分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

3.1交集选择器

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1选择器2{css}

结果：

（既有原则）找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注：

1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

4.1hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器:hover{css}

注：

1伪类选择器选中的元素的某种状态

• 背景相关属性

2.1背景图片

属性名：background-image(bgi)

属性值： background-image:url(‘图片的路径’)

注：

背景图片中url中可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3.1背景平铺

属性名：background-repeat(bgr)

属性值：

取值        效果

repeat （默认值）水平和垂直方向都平铺

no-repeat 不平铺

repeat-x 沿着水平方向（x轴）平铺

repeat-y 沿着垂直方向（y轴）平铺

4.1背景位置

属性名background-position(bgp)

属性值background-position:水平方向位置 垂直方向位置;

1. 方位名词（最多只能有9个位置）

水平位置-left-center-right

垂直位置-top-center-bottom

1. 数字+px（坐标）

坐标系：原点(0,0)-盒子的左上角

x轴-水平向右

y轴-垂直向下

操作-将图片左上角与坐标系重合即可

注：

方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直

5.1背景相关属性的连写形式

属性名background（bg）

属性值：

单个属性值的合写，取值之间以空格隔开

书写顺序：

推荐：background:color image repeat position

省略问题：

可以按照需求省略

特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()

注：

如果需要设置单独的样式和连写

1. 要么把单独的样式写在连写的下面
2. 要么把单独的样式写在连写的里面

6.1（拓展）img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果

方法一：直接写上img标签即可

Img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二：div标签+背景图片

需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

• 元素显示模式

1.1块级元素

显示特点：
1.独占一行（一行只能显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...

2.1行内元素

显示特点：

1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高

代表元素

a,span,b,u,i,s,strong,ins,em,del...

3.1行内块元素

显示特点：

1. 一行可以显示多个
2. 可以设置宽高

代表标签：

Input,textarea,button,select...

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.1元素显示模式

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性 效果 使用频率

Display:block 转换成块级元素 较多

Display:inline-block转换成行内元素 较多

Display:inline 转换成行内元素 极少

• CSS特性

1.1继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性（文字控制属性都可以继承，不是控制文字的不能继承如height）

1. Color
2. Font-style,font-weight,font-size,font-family
3. Text-indent,text-align
4. Line-height
5. ...

注：

可以通过调试工具判断样式是否可以继承

继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1. a标签的color会继承失效
2. h系列标签的font-size会继承失效

本身具有的属性不在继承父类的属性

2.1层叠性的介绍

特性：

1. 给同一个标签设置不同的样式-->此时样式会层叠叠加-->会共同作用在标签上
2. 给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会失效

注：

1. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

CSS的盒子模型

• Css三大特性

3.1优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注：

1. !important写在属性值的后面，分号的前面!
2. !important不能提升继承的优先级，只要是继承优先级最低!
3. 实际开发中不建议使用!important

3.2权重叠加计算

场景：如果是符合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效

权重叠加计算公式：（每一级之间不存在进位）

复合选择器中，第一级：行内样式的个数，第二级id选择器的个数，第三级类选择器的个数，第四级标签选择器的个数

比较规则：

1. 先比较第一级的数字，如果比较出来了，之后的统统不看
2. 如果第一级数字相同，此时再去比较第二级的数字，如果比较出来了，之后的统统不看
3. 。。。
4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁在下面，谁说了算）

注：

!important如果不是继承，则权重最高

• 盒子模型

1.1盒子模型的介绍

1. 盒子的概念

1. 页面中的每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子

2.盒子模型

Css中规定每个盒子分别由：内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）构成，这就是盒子模型

3.记忆：可以联想现实中的包装盒

2.1内容的宽度和高度

作用：利用width和height属性默认设置是盒子内容区域的大小

属性：width/height

常见取值：数字+px

3.1border-连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开

如：border:10px solid red;

快捷键：bd+tab

3.2border-单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方位名词

属性值：连写的取值

3.3border-单个属性

作用：给设置边框粗细，边框样式，边框颜色效果

单个属性

作用 属性名 属性值

边框粗细 border-width 数字+px

边框样式 border-style solid(实线)dashed(虚线)dotted(点线)

边框颜色 border-color 颜色取值

自动内减

操作：给盒子设置属性box-sizing:border-box;即可

优点：浏览器会自动计算多余大小，自动在内容中减去

清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

如：

Body标签默认有margin:8px

p标签默认有上下的margin

ul标签默认有上下的margin和padding-left

版心居中

Margin:0 auto;

1.外边距折叠现象-合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终俩者距离为margin的最大值

解决方法：避免就好

只给其中一个盒子设置margin即可

2.外边距折叠现象-塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1. 给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动

如果想要通过margin和padding改变行内标签的垂直位置，不会生效。只能使用line-height改变。

Css的浮动

• 结构选择器

1. 作用与优势

1. 作用：根据元素在HTML中的结构关系查找元素
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父类选择器中的子元素

1. 选择器

选择器 说明

E:firrst-child{} 匹配父元素中的第一个子元素，并且是E元素

E:last-child{} 匹配父元素中最后一个子元素，并且是E元素

E:nth-child(n){} 匹配父元素中的第n个子元素，并且是E元素

E:nth-last-child(n){} 匹配父元素中倒数第n个子元素，并且是E元素

n的注意点：

1. n为：0,1,2,3,4,5,6...
2. 通过n可以组成常见公式

功能 公式

偶数 2n，even

奇数 2n+1，2n-1，odd

找到前5个 -n+5

找到从第五个往后 n+5

• 伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1. 元素：HTML设置的标签
2. 伪元素：由css模拟出的标签效果

种类：

伪元素 作用

::before 在父元素内容的最前添加一个伪元素

::after 在父元素内容的最后添加一个伪元素

注：

1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

• 标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

• 浮动

浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

相当于从地面飘到了空中

1. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
2. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
3. 浮动有特殊的显示效果

一行可以显示多个

可以设置宽高

注：

浮动的元素不能通过text-align:center或者margin:0 auto

css的书写顺序

1浮动/display

2盒子模型：margin border padding宽度高度背景颜色

3文字样式

• 清除浮动

1.1清除浮动的介绍

含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：

子元素浮动后脱标->不占位置

目的：

需要父元素有高度，从不影响其他网页元素的布局

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置

2.1清除浮动的方法--直接设置父元素高度

特点

优点：简单粗暴，方便

缺点：有些布局不能固定父元素高度。如：新闻列表

2.2清除浮动的方法--额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear:both

特点：

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

2.3清除浮动的方法--单伪元素清除法

操作：用伪元素替代了额外标签

1基本写法

.clearfix::after{

        content: '';

        display: block;

        clear: both;

      }

2补充写法

.clearfix::after{

        content: '';

        display: block;

        clear: both;

        /*补充代码，在网页中看不到伪元素*/

        height: 0;

        visibility: hidden;

      }

特点：

优点：项目中使用，直接给标签加类即可清除浮动

2.4清除浮动的方法-双伪元素清除法

操作

 .clearfix::before,

      .clearfix::after{

        content: '';

        display: table;

      }

      .clearfix::after{

        clear: both;

      }

特点：

优点：项目中使用，直接给标签加类即可清除浮动

2.5清除浮动的方法--给父元素设置overflow:hidden

操作：

直接给父元素设置overflow:hidden

特点：

方便

CSS的定位修饰

1.1网页常见布局方式

1. 标准流
   1. 块级元素独占一行->垂直布局
   2. 行内元素/行内块元素一行显示多个->水平布局
2. 浮动

1. 可以让原本垂直布局的块级元素变成水平布局

1. 定位

1. 可以让元素自由的摆放着网页的任意位置
2. 一般用于盒子之间的层叠情况

1.2定位的常见应用场景

1可以解决盒子与盒子之间的叠层问题

定位之后的元素层级最高，可以层叠在其他盒子上面

2可以让盒子始终固定在屏幕中的某个位置

2.1使用定位的步骤

1. 设置定位的方式

属性名：position

常见属性值：

定位方式 属性值

静态定位 static

相对定位 relative

绝对定位 absolute

固定定位 fixed

1. 设置偏移值

偏移值设置分为俩个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则

方向	属性名	属性值	含义
水平	Left	数字+px	距离左边的距离
水平	Right	数字+px	距离右边的距离
垂直	Top	数字+px	距离上边的距离
垂直	Bottom	数字+px	距离下边的距离

4.1相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码：position：relative;特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置->没有脱标

应用场景：

1. 配合绝对定位组CP(子绝父相)
2. 用于小范围的移动

如果left和right都有以left为准

如果top和bottom都有以top为准

5.1绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position:absolute;

特点：

1. 需要配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置->已经脱标

应用场景：

配合绝对定位组CP（子绝父相）

注：

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的定位，就以浏览器窗口为参照进行定位

绝对定位的盒子不能使用左右margin:0 auto;进行文本居中

Transform:translate(-50%,-50%);

7.1固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed;

特点：

1. 需要配合方位属性实验移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置->已经脱标

应用场景：

让盒子固定在屏幕中的某个位置

注：

1. 脱标-不占位置
2. 改变位置参考浏览器窗口
3. 具备行内块特点

8.1元素层级问题

不同布局方式元素的层级关系：

标准流<浮动<定位

不同定位之间的层级关系：

相对，绝对，固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

注：

默认情况下，定位的盒子，后来者居上

1. index:整数;取值越大，显示顺序约靠上，z-index的默认值是0（配合定位才能生效）

• 装饰

1.1认识基线（了解）

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

1.2文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

1.3垂直对齐方式

属性名：vertical-align

属性值：

属性值 效果

Baseline 默认，对齐效果

Top 顶部对齐

Middle 中部对齐

Bottom 底部对齐

2.1光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性名：

属性值 效果

Default 默认值，通常是箭头

Pointer 小手效果，提示用户可以点击、

Text 工字型，提示用户可以移动文字

Move 十字光标，提示用户可以移动

3.1边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px，百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

3.2边框圆角的常见应用

画一个正圆：

1. 盒子必须是正方形
2. 设置边框圆角为盒子宽高的一半->border-radius:50%

胶囊按钮：

1. 盒子要求是长方形
2. 设置->border-radius:盒子高度的一半

4.1溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示，隐藏能够，滚动条...

属性名：overflow

常见属性值：

属性值 效果

visible 默认值，溢出部分可见

hiddle 溢出部分隐藏

scroll 无论是否溢出，都显示滚动条

auto 根据是否溢出，自动显示或隐藏滚动条

5.1元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

1. visibility:hidden(占位隐藏效果，工作中不常用)
2. display:none(不占位隐藏)

（拓展）元素整体透明度

场景：让元素整体（包括内容）一起变透明

属性名：opacity

属性值：0-1之间的数字

1：表示完全不透明

0:表示完全透明

注：

opacity会让元素整体透明，包括里面的内容，如：文字，子元素等...