DAY3，4

作业

伪类选择器

1.伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。

2.伪类选择器使用冒号（:）表示，比如:hover。

3.伪类选择器很多，比如链接伪类、结构伪类等。
 

伪类选择器：

1）E:link

2）E:visited

3）E:hover

4）E:active

5）E:not(S) 匹配不包含S的E元素

6）E:first-child

7）E:last-child

8）E:only-child

9）E:empty

10）E:checked

11）E:nth-child(n)

/* :hover 鼠标悬停 */

/* cursor 鼠标样式 */

4.链接伪类选择器：

包含的情况
 

例子：

.three img {

display: none;

position: absolute;

bottom: -130px;

left: 0;

.three:hover img {

display: block;

<a href="#" class="three">

五彩导航

<img src="../code.jpg" alt="">

</a>

结构伪类选择器
结构伪类选择器的作用：
根据元素在HTML中的结构关系查找元素

结构伪类选择器的优势
减少对于HTML中类的依赖，有利于保持代码整洁

结构伪类选择器的用途
常用于查找某父级选择器中的子元素

E:first-child    选择父元素的第一个子元素
E:last-child    选择父元素的最后一个子元素
E:nth-child(n)    选择父元素下的第 n 个子元素
E:nth-last-child(n)    选择父元素中倒数第n个子元素
nth-child（）：nth-child → 直接在所有孩子中数个数
功能    公式
偶数    2n、even
奇数    2n+1、2n-1、odd
找到前5个    -n+5
找到从第5个往后    n+5
n为:0、1、2、3、4、5、6、…

nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

E:nth-of-type(n) {}    只有父元素的同类型（ E）子元素范围中，选择第n个
伪元素选择器
 
伪对象即伪元素，表示DOM外部的某种文档结构。

伪元素改变文档结构，在结构外另加一个没有实际存在的元素（即伪元素）。

常用伪元素：

1）E:before/E::before

2）E:after/E::after

/* input::placeholder 表单提示词 */

例子

input::placeholder {

color: rgb(62, 226, 56);

}

/* ::selection 选中时 */

例子

ul li:nth-child(4)::selection {

color: pink;

}
 

文本相关样式 

px像素就是指屏幕上的一个点，可以简单的这样来理解，比如说我们设置当前的元素宽度是一百个像素宽，那么就设置成100px就可以； 

 em被称为文本字符的单位。1em就是指个字符，比如说我们要设置行高，两个字符的行高，那么我们就把这个属性的值设置成2em就可以了，它是自动的适应用户所使用的字体的，比如说当时用户所使用的字体，它的字号是12个像素大小，那么2em就是12x2=24个像素大小 

百分比是一个租对的概念，对于htm文档来说，它可以做成这样的一个DOM树，来表示当前文档的元素的个继承关系，最上面是文档的根节点，body节点包含两个div元素，右边的div元素包含两个同级元素h1和p，那么在p、h1上一层的div就称为父层，下面的两个元素称为子层，如果设置了父层元素大小而没有设置子层的元素大小，则子层会默认的继承父层的大小，若div设为12，则h1默认值也为12，若h1设为120%即为12*120%

文本 

 /* css具有层叠行，后面的会覆盖前面的 */ 

元素显示转换模式 

1.块元素( b l o c k ) (block)(block)，独占一行，可调整像素宽，高。
2.行内元素( i n l i n e ) (inline)(inline)，一行可以有多个，不能调整像素宽高。
3.行内块元素( i n l i n e − b l o c k ) (inline-block)(inline−block)，一行既可以有多个，也可以调整像素宽高。
 

二、模式转换

1.如何转换CSS元素的显示模式?
设置元素的display属性

2.display取值
block 块级
inline 行内
inline-block 行内块级

背景 

/* background-color: aqua; */设置背景颜色

            /* background-image: url(../米莱迪.jpg); */设置背景图片

 语法：background-image:url(相对路径);
    -可以同时为一个元素指定背景颜色和背景图片，
        这样背景颜色将会作为背景图片的底色
    -图片在元素中的位置
       如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素    
        如果背景图片大于元素，默认会显示图片的左上角
        如果背景图片和元素一样大，则会将背景图片全部显示

background-size   设置图片的大小
  参数：
    第一个值：宽度
    第二个值：高度
        如果只写一个，第二值，默认为auto
        
    cover  图片的比例不变，将盒子元素铺满
    contain 图片比例不变，将图片元素完整显示
 

            /* background-repeat: no-repeat; */用于设置背景图片的重复方式

可选值： repeat，默认值，背景图片会双方向重复（平铺） no-repeat ，背景图片不会重复，有多大就显示多大 repeat-x， 背景图片沿水平方向重复 repeat-y，背景图片沿垂直方向重复

            /* background-attachment: fixed; */

前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。

取值：

scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。

fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。

local：背景图相对于元素内容固定，

inhert:继承，没什么说的。

该属性可以应用于任何元素。

            /* background-position: top left; */

background-position可以调整背景图片在元素中的位置
    背景图片默认是贴着元素的左上角显示
可选值：
    该属性可以使用 top right left bottom center中的两个值
        来指定一个背景图片的位置
        top left 左上
        bottom right 右下
        如果只给出一个值，则第二个值默认是center

  也可以直接指定两个偏移量，
        第一个值是水平偏移量
            - 如果指定的是一个正值，则图片会向右移动指定的像素
            - 如果指定的是一个负值，则图片会向左移动指定的像素
        第二个是垂直偏移量    
            - 如果指定的是一个正值，则图片会向下移动指定的像素
            - 如果指定的是一个负值，则图片会向上移动指定的像素

            

             background
                      - 通过该属性可以同时设置所有背景相关的样式
                      - 没有顺序的要求，谁在前谁在后都行
                          也没有数量的要求，不写的样式就使用默认值
                    -background-size要写在background-position后面

例子

background: fixed url(../米莱迪.jpg) no-repeat;
 

边框 

            /* border-width 边框宽度 */

            /* border-width: 20px;

border-width:设置边框的宽度，一般使用px作为单位即可，值一般使用:1px。

          

border-style:设置边框的样式，其常用的样式有:
               none(无边框)
               soild(实线边框)
               dashed(虚线边框)
               dotted(点线边框)
               double(双边框)

            border-color: rgb(35, 223, 18); */

border-color:设置边框的颜色，可以使用颜色关键字，如:red;

            border: 4px solid black;

border:复合属性，可以指定border的所有内容。如:border:1px soild black;

            /* border-radius: 50%;    边框弧度*/

            border-top-left-radius: 40%;

border-radius：用于设置圆角边框,由于给任何一个元素添加圆角效果都有四个角，所以边框的圆角效果受到 
                 参数的影响。
 
  (1).border-radius:5px;    //四个角的圆角效果都是使用5px
 
  (2).border-radius:5px 10px;  //左上、右下:5px,左下、右上：10px
 
  (3).border-radius:5px 10px 15px;  //左上:5px,左下、右上:10px,右下:15px
  
  (4).border-radius:5px 10px 15px 20px;  //左上:5px,右上10px,右下:15px,左下:20px
 

合并相邻边框

 /* 合并相邻边框 */

            border-collapse: collapse;

阴影 

box-shadow: h-shadow v-shadow blur spread color inset;

例子： box-shadow: 20px 20px 10px 10px black;
向元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow: 必需。水平阴影的位置，可以为负值
v-shadow:必需。垂直阴影的位置，可以为负值
blur:可选，阴影模糊的距离
spread:可选，阴影的尺寸
color:可选，阴影的颜色
inset:可选，将外部阴影（outset）改为内部阴影

text-shadow: h-shadow v-shadow blur color; 

例子：text-shadow: red 5px 5px;

向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
h-shadow: 必需。水平阴影的位置，可以为负值
v-shadow:必需。垂直阴影的位置，可以为负值
blur:可选，阴影模糊的距离
color:可选，阴影的颜色
 

轮廓线 

outline(轮廓线)
此样式类似于边框，通常出现在表单中，表单元素基本都自带轮廓线
outline-color:颜色;
outline-style:样式;
outline-width:宽度;

一般使用场景是清除表单的轮廓线可使用outline:0;或outline:none;

注意点

outline 不占据空间，绘制于元素内容周围。
根据规范，outline通常是矩形，但也可以是非矩形的。
对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。
将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。
如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

例子：

 outline: none;

            outline-style: groove;

元素隐藏

display(设置或检索对象是否以及如何显示)

display:none; 隐藏对象 并且不再保留位置
display:block;在此处的作用为显示元素，block不光可以让元素转换为块级元素

cursor(鼠标样式)

以下只列举了常用样式，还有很多鼠标样式请看开发手册

属性值	说明
default	默认样式 鼠标指针
pointer	访问链接等可点击的地方时出现的小手
move	移动拖拽时出现的十字键头
text	文本输入时出现的文本指针
not-allowed	禁止指针样式

防拖拽

resize(拖拽元素)
使用此样式的元素必须存在overflow属性才可生效

属性值    说明
none    不允许用户拖拽元素
both    用户可调整元素宽度和高度
horizontal    用户可调整元素宽度
vertical    用户可以调整元素高度
一般的使用场景都是防止用户拖拽使用文本域 textarea 制作的评论或其他的功能性表单
因为 textarea 自带 overflow 属性 所以可以直接使用 resize:none; 来防止用户拖拽文本域
 

 例子：

textarea {

            /* 防止文本拖拽 */

            resize: none;

/* vertical-align改变与文字的对齐方式 */

            vertical-align: top;顶部

            vertical-align: middle;居中

            vertical-align: bottom;底部

 定位

绝对定位：

/* position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动

            如果都没找到，则相对于浏览器进行定位

概念：元素脱离文档流，按照指定的位置进行移动
语法：
注意：偏移量的设置方式和相对定位一样
position:absolute
1
绝对定位的特点
只设置绝对定位的元素会脱离文档流
只设置绝对定位的元素，会在当前位置脱离文档流
一旦设置偏移量，元素默认参考整个文档进行移动（设置了定位父级之后，参考最近的父级定位进行移动）
原来的空间不再占用
行内元素设置绝对定位以后，元素变为能够支持宽高
 

 /* position: relative; */：相对定位

概念：元素参考原来的位置，按照指定的方向移动
语法：
position:relative
1
注意：只设置相对定位，元素没有任何影响，还需要设置偏移量

偏移量（可以为负值，往反方向偏移）：
top：距离参考位置上边缘的间距；
bottom：距离参考位置下边缘的间距；
left：距离参考位置左边缘的间距；
right：距离参考位置右边缘的间距；
相对定位的特点
只设置相对定位，元素没有任何影响；
盒子原来的空间存在；
设置相对定位的元素是参考原来的位置进行移动；
设置相对定位的元素是破坏文档流进行移动；
子元素设置相对定位，父元素进行移动时，子元素跟着相对移动，原因在于子元素的参考对象为父元素；
通常配合绝对定位一起使用；
 

固定定位

 概念：元素会脱离文档流，按照指定的位置进行移动，会固定在页面上，不会随着滚动条移动
语法：
position:fixed;
1
特点：
设置固定定位的元素会脱离文档流，并且覆盖在标准文档流之上
会固定在页面上，不会随着滚动条滚动
只设置固定定位，当前位置脱离固定在页面上，如果设置了偏移量，参考整个文档进行移动，固定在页面上
原来的空间不再占用
应用场景：头部导航固定、广告、弹出窗等
 

粘性定位 

position: sticky; 基于用户的滚动位置来定位。

粘性定位特点

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）

• 粘性定位占有原先的位置（相对定位特点）

• 必须添加 top 、left、right、bottom 其中一个才有效

• 例子：

  position: fixed;

              right: 40px;

              top: 50%;

盒子模型 

盒子模型
盒子由content内容、border边框线、padding组成。

content内容区域
 内容区域：一般包括高度、宽度、背景颜色等属性
border边块线
盒子的边框线，一般的，区域和区域间都有边框线，目的是区分块，默认情况下，border会将四边均加边框，可以通过border-left/right/top/bottom来自定义某些边。

padding内边距
页面间的内容一般情况下是不会和某个块（盒子）定紧紧相挨着的，会留部分空白

margin外边距
一般情况下，为了页面美观，块与块之间会留有距离

 border-style：solid-实线边框，dashed-虚线边框，dotted-点线边框

内边距
padding: 10px 60px 90px;

/* 上，左右，下 */

padding: 10px 30px 60px 90px;

/* 上 右 下 左 */

外边距 
外边距可以让块级盒子水平居中，但是必须茜足两个条件:

①盒子必须指定了宽度(width )。
②盒子左右的外边距都设置为auto 。

例子

. header{ width: 960px; margin: 0 auto; }

清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {
        padding:0;/*清除内边距*/
 
        margin : 0;/*清除外边距*/
 
}
注意:行内元素为了照预兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

外边距塌陷
什么叫盒子模型塌陷
 当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。
解决盒子模型塌陷的方法：
1.给父容器设置上边线 
border: 1px solid red;

 2.给父元素设置内边距
padding: 5px;

 文本溢出

Overflow
overflow为溢出（容器），当内容超出容器时只需添加overflow属性值为hidden， 就可以把超出容器的部分隐藏起来；

如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto；

overflow：auto 属性如果超出就出现滚动条，没有超出则不出现滚动条这样就可以出现滚动条，

Overflow属心常见的有四个：visible，hidden，auto和scroll；

visible为overflow 的默认值，为超出显示；

hidden为超出隐藏；

auto为自动，即超出会出现滚动条， 不超出就没有滚动条；

scroll为内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

单行文本超出省略

1. .sl{

3. white-space:nowrap;/*不换行*/

5. overflow:hidden;/*超出隐藏*/

7. text-overflow:ellipsis;/*超出省略*/

9. width:;

11. }

注意要设置宽度

 样式继承

/* css样式的继承性

        不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承

        a链接最好在自身更改样式

         */

• 样式的继承，我们为一个元素设置的样式，同时也会应用到它的后代元素上
• 继承是发生在祖先后后代之间的，继承的设计是为了方便我们的开发
• 利用继承，我们可以将一些通用的样式，统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式
• 注意，并不是所有的样式都会被继承：

• 比如背景相关的，布局相关等的这些样式都不会被继承。

解决padding影响盒子大小问题 

在有添加padding（内边距）的样式中添加  box-sizing: border-box;

flex布局

Flex布局概念
Flex全称Flexible box，简称弹性布局，用盒装模型提供最大灵活性。任何容器都可以被指定为flex布局。

采用flex布局的元素被称为flex容器（flex container），它的所有子元素自动成为容器成员，称为flex项目（flex item）

1.flex-direction

定义主轴上项目的排列方向，拥有四个属性。

row与row-reverse，水平正向（默认）与反向，左起/右起。

column与column-reverse，垂直正向与反向，上沿/下沿 

flex-wrap

定义主轴上项目换行与否（在轴线排不下的情况下），拥有三个属性。

nowrap：不换行；

wrap：换行；

wrap-reverse：换行，第一行在下方；

.justify-content

定义项目在主轴上的对齐方式。拥有五种属性。

justify-content: center;

            justify-content: end;右对齐；

            justify-content: start;左对齐；

             justify-content:centern;居中；

            justify-content: space-around;项目两侧距离相等；

项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。

            justify-content: space-evenly;项目分布使得任何两个项目之间的间距（以及边缘的空间）相等

            justify-content: space-between;项目之间距离相等；

第一项在起始行，最后一项在结束行

align-items

定义项目在交叉轴的对齐方式。共有五个属性。（/* 侧轴 */）

/* align-items   单行的   align-content：多行的*/

            align-items: center;每个子元素都居中显示

           

            align-content: center;所有盒子居中对齐（该行元素作为一个整体，这个整体相对于整个flex盒子居中对齐了（设置高度时，不设置时不会生效（因为没有高度，这两行元素加起来的高度和flex盒子内容高度一样，所以居中显示不会有效果）））

           

使行间盒子挨着：align-content: flex-start;

一个贴着上沿一个贴着下沿：align-content: space-between;

上下相同间距，中间对齐：align-content: space-around;
 

定位补充

/* z-index  定位中显示的优先级 */ 

浮动 

.块级元素同行显示
块级元素本身是可设置宽高，独自成行，若想将块级元素同行显示，有以下两个方法：
第一，采用行级元素和块级元素相互转换的方式

dispaly:inline-block

这种方法虽然能够使得块级元素同行显示，但是每个元素之间存在5px的间距，且对于某些浏览器来说存在兼容性的问题。
第二，则是采用浮动的方法

float:left|right|none

float本身的特性：

• 多个元素同时浮动时，第一个元素先找到父元素边界，其他依次去找前一个元素的边界
• 块级元素设置浮动后，如果没有设置宽度，那么宽度默认为auto，其宽度由内容决定

/* 浮动，会脱离文档流   不再保留原来位置  会造成在其下方的兄弟元素位置发生变化  */

            /* 当子元素发生浮动时，其父元素的高度发生塌陷 */

• 子元素浮动，会造成父元素高度塌陷的问题
  注：子元素浮动起来之后，相当于在父元素的上面，若父元素没有设置高度，那么会出现高度塌陷的情况
• 给受影响的元素设置clear属性，left表示取消左浮动的影响
  .box_2{
      clear:left 
  }
  1
  2
  3
  在html中通过br属性将浮动与非浮动元素隔开
  <div>box1</div>
  <br clear="all">
  <div>box2</div>
  1
  2
  3
  使用空盒子的样式设计
  <div style="clear:both"></div>
  1
  给父元素添加伪元素选择器::after，取代空盒子的样式设计
  注意：因为after是行内元素，因此要转成div的块级元素
  .clearfix::after{
      content:"";
      clear:both;
      dispaly:both;
  }
  
  注意：另外，overflow:hidden 也可以解决高度塌陷的问题，但是它实际没有清楚浮动，而是利用BFC容器的特性——该容器中的浮动不影响父元素的高度
   

渐变 

渐变背景

当渐变用于背景时，可以使用像图像一样的background-image属性设置。

线性渐变

linear-gradient(方位，颜色1，颜色2)

参数1：表示方位，不写默认为to bottom ，可选值：
（1）to left,to right,to top,to bottom
（2）xxx deg表示角度，度数
（3）turn表示圈
参数2：颜色1
参数3：颜色2

注意

默认情况下，颜色等分占比，可手动指定渐变占比。

例子：

 background-image: linear-gradient(to right, green, pink, yellow, red);

字体图标 

在阿里图标库中将图标放到购物车中在导入到项目中

在项目中吧图标下载到本地

跟据下载文件夹中的引导区进行图标的插入

媒体查询 

能够根据设备宽度的变化，设置差异化的样式

媒体特性常用写法：
1.max-width
2. min-width

@media screen and (min-width: 900px) {

            div {

                background-color: green;

            }

媒体查询完整代码
上面例子是简洁写法

@media (媒体特性){
    选择器{
        样式
    }
}

1
2
3
4
5
6
完整写法

@media 关键词  媒体类型 and(媒体特性){
    css样式代码
}
1
2
3
关键词：and only not

媒体类型：用来区分设备类型，比如屏幕设备，打印机设备等

类型名称    值    描述
屏幕    screen    带屏幕的设备
打印预览    print    打印预览模式
阅读器    speech    屏幕阅读模式
不区分类型    all    默认值，包括以上三种情形
媒体特性：主要用来表述媒体类型的具体特征，比如当前屏幕的宽高、分辨率等

特性名称    属性    值
视口的宽和高    width、height    数值
视口最大宽或高    max-width、max-height    数值
视口最小宽或高    min-width、min-height    数值
屏幕方向    orientation    protrait:竖屏，landscape:横屏

默认外边距 

转换 

   /* 平移 */

            /* transform: translate(-40px, 40px); */

            /* transform: translateX(70px); */

            /* transform: translateY(-60px); */

            /* 旋转 */

            /* transform: rotateZ(40deg); */

            /* 复合写法  旋转永远放在最后一个 */

            /* transform: translate(100px) rotateZ(45deg); */

            /* transform: rotateZ(45deg) translate(100px); */

            /* transform: scale(1.5); */

            /* transform: scaleX(2); */

            /* transform: scaleY(2); */

            /* transform: skew(40deg); */

            /* 向右下移动100px   旋转45度    缩放1.5 */

           transform: translate(100px, 100px) scale(1.5) rotate(45deg);

过度 

/* transition   谁变化给谁加 */

            transition: all 5s;

            width: 300px;

            height: 300px;

            background-color: pink;

            /* transform: translateZ(-200px); */

            /* transform: rotateY(45deg); */

            /* transform: rotate3d(1, 1, 0, 45deg); */

            /* backface-visibility: hidden; */

 动画

 @keyframes myMovie {

            from {

                width: 200px;

                background-color: pink;

            }

            to {

                width: 800px;

                background-color: aqua;

            }

        }

        @keyframes myfirst {

            0% {

                width: 200px;

                background-color: pink;

            }

            20% {

                width: 400px;

                background-color: green;

            }

            80% {

                width: 800px;

                background-color: red;

            }

            100% {

                width: 1200px;

                background-color: aquamarine;

            }

        }

        div {

            width: 200px;

            height: 50px;

            background-color: aqua;

            animation: myMovie 5s infinite alternate steps(4);

            animation: myfirst 5s infinite alternate steps(400);

        }

    </style>

</head>

<body>

    <div>

    </div>