CSS相关

CSS选择器

• 全局选择器：*{...}
• 元素选择器：标签名{...}
• 类选择器：.类名{...}
• ID选择器：#id名{...}

优先级：
1、配置！importent属性时优先级最高
2、行内>ID选择器>类选择器>全局
3、计算公式：（a,b,c）a代表ID选择器个数；b代表类、伪类、属性选择器；c代表元素、伪元素

动态伪类

1. 标签:link -->未访问状态
2. ~:visited -->访问过的状态
3. ~:hover -->鼠标悬停的状态
4. ~:active -->鼠标按下不松开的状态
5. ~:focus -->获取焦点的元素（表单类元素才能使用）

常用的结构伪类

1. ：first-child -->所有兄弟元素的第一个
2. ：last-child -->所有兄弟元素的最后一个
3. ：nth-child(n) -->所有兄弟元素的第n个
4. ：first/last-of-type -->所有同类型兄弟元素的第一个/最后一个
5. ：nth-of-type(n) -->所有同类型兄弟元素的第n个

字体属性

1. 字体大小：font-size:~px;
2. 字体族：font-family:"字体英文名"
3. 字体风格：font-style:;

1、normal：正常（默认）
2、italic：斜体
3、oblique：字体无倾斜效果时强制倾斜

4.字体粗细：font-weight: ;

1、lighter（100~300）：细
2、normal（400~500）：正常
3、bold(600~700）：粗
4、bolder：很粗

文本属性

1. 文本修饰：text-decoration:;

后可跟-style可指定修饰样式

2. 文本缩进：text-indent:~px;/~em
3. 文本对齐：水平方向：text-align:;

可选值：left：左对齐；right：右对齐；center：居中对齐

4.行高：line-height:~px;

常用方式：直接写数字且无单位，数字为字体大小的倍数
注意：对于单行文字：height = line-height时可使文字在容器中垂直居中对齐

5…vertical-align
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
***注意：***不能控制块元素

CSS背景属性

• background-color
  背景颜色（不包括margin，但是可以包括padding）
  默认透明属性：transparent
• background-image:背景图片
• background-repeat:背景图的平铺方式

1、repeat：重复铺满元素（默认）
2、no-repeat：不平铺
3、repeat-x/y ：沿某方向平铺

• background-position:背景图位置

1、水平方向：left、right、center
2、垂直方向：top、bottom、center

元素显示模式

1. 块元素（block）

特点：
1、独占一行
2、默认宽：撑满父元素
3、默认高：由内容撑开
4、可设置宽高

2.行内元素（inline）

特点：
1、不独占一行
2、默认宽和高：由内容撑开
3、不能设置宽高

3. 行内块元素（inline-block）

特点：
不独占一行，但可以设置宽高

修改显示模式
display：

1、none：隐藏元素
2、block：作为块元素显示
3、inline：作为行内元素显示
4、inline-block：作为行内块显示

盒子模型

盒子大小：内容区+左右padding+左右border
注意：margin不会影响盒子的大小，会影响位置

水平居中方式

margin:0 auto ;

maegin塌陷问题

原理：第一个子元素的上margin和最后一个子元素的下margin会作用在父元素身上，造成父元素塌陷

解决margin塌陷：
1、给父元素设置不为0的padding
2、给父元素设置不为0的border
3、父元素设置CSS属性：overflow：hidden

内容溢出

处理方式：设置属性：overflow:;

visible:显示内容（默认）
hidden：隐藏
auto：自动生成滚动条
scroll：滚动条显示

隐藏内容的方式

1. visibility：show(默认：显示) ---- hidden：隐藏
2. display:none;彻底隐藏

布局技巧：元素居中

行内、行内块元素，可以被父元素当作文本处理

子元素在父元素中：

1. 水平居中

1、若子元素为块元素，给子元素加上：margin:0 auto;
2、若为行内、行内块元素：给父元素加上：text-align:center;

2.垂直居中

1、块元素：给子元素添加：margin:auto;
2、行内、行内块：让父元素的height = line-height,每个子元素都加上vertical-align:middle;
***注意：***绝对垂直居中：父元素：font-size;0;

行内、行内块元素之间的空白问题

父元素：font-size;0;，再给文字单独设置大小

浮动

元素浮动后的特点

1. 脱离文档流
2. 默认宽高都是由内容撑开，且都可以设置宽高
3. 不会独占一行
4. 不会margin合并和塌陷
5. 没有行内的空白问题

设置和清除浮动

1、设置float:left/right/none(默认)
2、清除clear:left/right/both(常用)

清除浮动的方式

1. 给父元素设置高度
2. 让父元素也浮动
3. 给父元素设置overflow:hidden
4. 在所有浮动元素的最后添加一个块级元素，并设置clear:both

定位

相对定位

1. 开启相对定位

设置：position:relative;
可设置属性：left、right、top、bottom，单位：px
参考点：相对自己原本的位置

2. 特点

1、不会脱离文档流，不会对其他元素产生影响
2、定位元素的层级更高，定位之间层级相同
规则：定位元素覆盖在普通元素上，定位之间，后来者居上

绝对定位

1. 开启绝对定位

设置：position:absolute;
可设置属性：left、right、top、bottom
参考点：当前视口

2.特点：

1、脱离文档流，对后面的元素有影响
2、不能同时有浮动，否则浮动失效，以定位为主

粘性定位

1. 开启定位

设置position:sticky;
属性：left、right、top、bottom
==参考点：==最近的一个拥有滚动的祖先

2. 特点

1、不脱离文档流
2、最常用top:0;

定位层级

1. css属性：z-index:数字;可设置元素的权重，值越大层级越高
2. 定位元素在包含快中居中的方式

上下左右都设置为0
margin设置auto

盒子模型属性

box-sizing:~;
可设置：content-box:(默认)宽高为内容区的大小；；boeder-box:宽高即为整个盒子的大小

box-shadow:~;阴影
语法：box-shadow:~px(水平) ~px(垂直) ~px(模糊距离) ~px(外延值) color inset(向内模糊)
注意：水平和垂直的属性必须要写，另外模糊值和颜色也是常用

opacity：不透明度
为整个元素添加透明效果：值 0~1，0为完全透明，1为完全不透明

过渡

作用：让元素从一种样式平滑的过渡为另一种样式
属性：

1. 设置过渡：transition-property:~;

width、height…属性名（要过渡的属性）
all 所有属性都过渡

2. 过渡的时间：transition-duration:~;

一个值：所有属性一致的时间
多个值：按属性的顺序分别过度的时间（逗号隔开）
单位：s\ms

3. 延迟时间：transition-delay:~;（单位s\ms）
4. 过渡的类型：transition-timing-function:~;

ease:（默认）速度：慢-快-慢
linear：匀速（线性）
steps:分段

常用复合形式
transition：duration delay function；
注意：无顺序要求，只有一个时间时表示过渡的时间，两个时间时第二个时间才是延迟的时间

动画

开启动画
简单定义方式

@keyframes DH{
			from{
				
			};
			to{

			}
		}

完整定义方式 实例：

 <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            animation: DH 10s linear 3s infinite;  /*动画属性复合写法*/
        }
        /* 暂停效果 */
        .box:hover{
            animation-play-state: paused;
        }

        @keyframes DH{
            0%{
                background-color: red;
            }
            50%{
                background-color: green;
                border-radius: 50%;
            }
            100%{
                background-color: blue;
            }
        }
    </style>

</head>
<body>
    <div class="box">

    </div>
</body>

伸缩盒模型（弹性盒）

开启弹性盒：display：flex;或display:inline-flex;(行内弹性盒，用的很少)
一个元素可以同时是伸缩容器和伸缩项目

伸缩项目

1. 仅弹性盒的子元素为伸缩项目
2. 伸缩项目会”块状化“

新增元素水平垂直居中

父元素：display：flex;
子元素：margin:auto;

响应式布局----媒体查询

1. 媒体类型

语法：@media 媒体类型 {}
类型：1、all–检测所有设备；2、screen----检测屏幕；3、print----检测打印机

2. 媒体特性

语法：@media (媒体特性) {}
特性：1、width—视口宽度；2、max-width—最大视口宽度；3、min-width—最小视口宽度
注意：关于高几乎不会用到

实例

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        p { font-size: 50px;}
        @media screen and (max-width:768px) {

            /* 设备小于768时加载的样式 */
            .box {
                background-color: aqua;
            }

            .p1 {
                display: none;
                /* 不显示 */
            }

            .p2 {
                display: none;
            }
        }

        @media screen and (min-width:768px) and (max-width:996px) {

            /* 设备大于768但小于996时加载的样式 */
            .box {
                background-color: pink;
            }
            .p1 {
                display: none;
            }
            .p2 {
                display: block;
            }
        }

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

            /* 设备大于996时加载的样式 */
            .box {
                background-color: blue;
            }
            .p1 {
                display: block;
            }
            .p2 {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p class="p1">哈哈哈哈哈哈哈</p>
    <p class="p2">呵呵呵呵呵呵呵</p>
</body>