html+css学习笔记

一.实体(转义字符)

1
2
3
4
  空格
> 大于
< 小于
© 版权

image-20210218200551204

二.标签

1.meta标签

1
2
3
4
5
6
7
8
9
meta标签主要用来设置网页的一些元元素

charset 制定页面的字符集
<meta charset="UTF-8" />

name 制定的数据的名称 keywords关键字 description描述
 <meta http-equiv="refresh" content="5;url=https://www.baidu.com">

content 制定的数据的内容

2.其他标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
行内元素

强调 斜体 em
强调 粗体 strong
长引用 换行 blockquote
段引用 "" q
换行 br
选择文字 span

块元素布局标签
标题标签 h1 h2 h3 p 
分组标签 hgroud
网页的头部 header
网页的主体部分 main
网页的页脚 footer
网页中的导航 nav
和主体相关的 aside
文章 article
独立的区块 section
主要布局元素 div
主要  p

3.块和行内

1
2
3
4
块元素 布局
行内元素 包裹文字
一般会在块元素中放行内元素,而不会在行内元素中放块元素
p元素不能放任何的块元素

4.列表

(1).有序列表

1
2
3
4
<ol>
    <li>123</li>
    <li>1234</li>
</ol>

(2).无序列表

1
2
3
4
<ul>
    <li>123</li>
    <li>1234</li>
</ul>

(3).定义列表

1
2
3
4
5
6
<dl>
    <dt>1</dt>
    <dd>The first</dd>
    <dt>2</dt>
    <dd>The Second</dd>
</dl>

5.超链接

1
2
3
4
5
6
7
8
9
<a href="https://www.baidu.com/">baidu</a>
属性 
href 地址
# 回到顶部
javascript:; 占位符

target 
_self 默认值
_blank 新标签

6.图片

1
2
3
4
5
6
7
<img src="" alt="" />
src 路径
alt 描述
width 宽度
height 高度
base64

7.内联框架

1
2
3
4
5
6
<iframe
    src="https://www.baidu.com/s?ie=UTF-8&wd=tr"
    width="500"
    height="500"
    frameborder="0"
></iframe>

8.音频&视频

1
2
3
4
5
6
7
8
9
10
11
12
13
audio src
属性
是否允许控制 controls
自动播放 autoplay
循环播放 loop

兼容性
        <audio controls>
            你的浏览器不支持
            <source src="" />
        </audio>

三.css基础

1.基础

1
2
3
4
5
6
选择器
声明块
p {
    color: red;
    font-size: 20px;
}

2.常用选择器

(1).id选择器

(2).class选择器 .

(3).通配选择器 *

(4).复合选择器

​ 交集选择器 连这些 div.red

​ 并集选择器 ,连起来

(5).关系选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 子代选择器 */
div > span {
    color: red;
}

/* 后代选择器 */
div p {
    color: blue;
}
/* 选择下一个兄弟 */
p + span {
    color: yellow;
}
/* 下的所有 */
p ~ span {
    color: red;
}

(6).属性选择器

​ 

1
2
3
4
5
6
7
8
p[title]
p[title="abc"]
/* 开头 */
p[title^="abc"] 
/* 结尾 */
p[title$="abc"]
/* 有就行 */
p[title*="abc"]

(7).伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 :first-child 第一个元素 
 :last-child 最后一个元素 
 :nth-child(2) 第2个元素 n就表示全部 2n偶数

 :first-of-type  第一个元素同类型
 :only-of-type 唯一元素
 :last-of-type 最后一个元素
 :not() 把指定元素去除
 
:empty 空元素
/*超链接的伪类*/
a:link 没访问过的链接 正常的链接
a:visited 访问过的链接
/*其他标签可以使用*/
a:hover 移动到上面
a:active 鼠标点击

(8).伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
第一个元素
p::first-letter {
	font-size: 50px;
}
第一行
::first-line 
选中的
::selection
元素的最后
::after{
    content:'123';
}
元素的开始
::before{
    content:'123';
}

3.样式的继承

1
背景一些不会被继承

4.选择器的权重

1
2
3
4
5
6
7
内联
id
类和伪类选择器
元素选择器
通配选择器
继承的样式
!important 最高优先级

5.像素和百分比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
子元素可以设置相对于父元素的百分比
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .box2 {
                width: 50%;
                height: 50%;
                background-color: aqua;
            }
        </style>
    
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
        
em 
     1em = 1font-size
     1em = 16px
     em随着字体大小而改变
rem     
     rem相对于根元素html字体大小来计算

6.颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
rgb
红绿蓝
rgb(255,255,255) 白色

rgba a表示透明度 0透明 0.5半透明 1不透明

十六进制表示 红2 绿2 蓝2
#ff0000

HSL
色相 0-360
饱和度0%-100%
亮度0%-100%
HSLA

四.css进阶

1.文档流

1
2
3
4
5
6
7
8
9
块元素
块元素在页面独占一行
默认宽度是父元素的全部(把父元素撑满)
默认高度是被内容撑开(子元素)

行内元素
行内元素不会独占一行,只占自身的大小
行内元素在页面从左向右水平排列,一行占不玩则会换行
默认宽高被内容撑开

2.盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
盒子大小 = 内容区+边距+内边距
1.内容区(content)

width height决定内容区的大小

2.内边距(padding)
内边距会影响盒子的大小
背景颜色会延伸到内边距上

3.边框(border)

border-width: 10px;(默认3px) 
	4个值 上 右 下 左(顺时针)
	3个值 上 左右 下
	2个值 上下 左右
	1个值 上下左右
         border-top-width
         border-bottom-width
         border-left-width

 border-color: red;
	可以指定4个值

 border-style: solid;
	solid 实线
	dotted 虚线
	dashed 双线
	double 双线
简写:
border: 10px orange solid;

4.外边距(margin)

不会影响可见框的大小
但是会影响盒子的位置

左上边框影响自己位置
右下边框影响其他元素

3.盒子的水平布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
元素在水平布局的位置由
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
以上8个相加为父元素的content区的宽度
不满足浏览器会配置margin-right来配平

三个值可以设置为auto,设置为auto的浏览器会调整它的值使得等式成立
margin-right
margin-left
width
水平居中
width:xxx
margin 0 auto

4.盒子的垂直布局

1
2
3
4
5
子元素的大小如果超过了父元素则会溢出

可以使用overflow属性来设置父元素处理溢出的子元素
overflow: hidden;
overflow: scroll(auto自动处理);

5.盒子垂直外边距的折叠

1
2
3
垂直外边距会发生重叠现象
兄弟元素 绝对值大听谁的 一正一负取两者的和
父子元素 子元素会传递给父元素 必须处理

6.行内元素的盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
行内元素无法设置width height 由内容决定
垂直方向的padding border margin不会影响页面的布局

display设置元素是行内元素还是块元素
属性:
inline block
inline-block行内块元素可以设置宽高又不会独占一行
table 表格
none 元素不在页面中显示,不占位置

 visibility: hidden;不显示占位置

7.浏览器默认

1
2
3
去除 li的点
list-style:none

8.练习

1

9.盒子大小

1
2
3
4
box-sizing:用来设置盒子尺寸的计算方式
	默认值:content-box 用宽度高度来设置内容区的大小
		 :border-box:宽度高度用来设置整个盒子的大小(width height为内容区边距内边距的大小,设置边距和内边距会减小空间)

10.轮廓 阴影和圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
outline:设置元素的轮廓线 用法和border一样
和border不一样不会影响可见框的大小

box-shadow:用来设置元素的阴影效果
第一个值10px(向右偏移) 
第二个值10px(向下偏移) 
第三个值10px(模糊半径) 
第四个值颜色

border-radius:
半径
border-top-left-radius:
第一个值x轴半径
第二个值y轴半径
border-radius:
圆形 50%

11.浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
float:
	默认值:none(不是浮动)
		 :left(元素向左浮动)
		 :right(元素向右浮动)


浮动的特点:
	1.元素设置浮动之后,水平布局不需要强制成立,会完全从文档流中脱离
		(1).脱离文档流之后(块元素行内元素变成对方)
			块元素不会独占一行
			块元素的宽度和高度默认被内容撑开
			行内元素脱离文档流变成了块元素
			
	2.设置浮动之后元素会向父元素的左侧或者右侧偏移
	3.浮动元素默认不会从父元素从移出
	4.浮动元素向左或向右移动时,不会超出它前面的其他浮动元素
	5.浮动元素的上面是一个没有浮动的元素,则浮动元素无法上移
	6.浮动元素不会超过它上边浮动的兄弟元素
	7.浮动元素不会盖住文字

12.网页的布局

1
垂直布局看块元素 水平布局看浮动

13.高度塌陷和BFC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
父元素是由子元素撑开的
当子元素浮动以后,将会脱离文档流导致子元素从文档流中脱离
将会无法撑起父元素的高度,导致父元素的高度丢失

父元素的高度丢失,其下面的元素会自动上移,导致页面布局混乱,必须要进行处理.

BFC:
	开启bfc会使改元素变成独立的布局区域
	特点:
		1.开启BFC不会被浮动元素所覆盖
		2.开启BFC子元素和父元素的外边距不会重叠
		3.开启BFC元素可以包含浮动的子元素

	/* float: left; */
	/* display: inline-block; */
	(以上两种不推荐)

	/* overflow: hidden; */

clear:
	清楚由于其他元素浮动导致当前元素的影响(原理margin-top)
	可选值:
		left(清除向左元素的影响)
		right(清除向右元素的影响)
		both(清除两侧最大的影响)
解决高度塌陷完美方案
            .box1::after {
                content: "";
                display: block;
                clear: both;
            }

14.clearfix

1
2
3
4
5
6
7
8
9
10
11
12
13
解决外边距问题
	            .box1::before {
                content: "";
                display: table;
            }

clearfix可以同时解决外边距重叠和高度塌陷的问题
            .clearfix::before,
            .clearfix::after {
                content: "";
                display: table;
                clear: both;
            }

15.定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
position:
	可选值:
		static默认值,没开启定位



		relative 相对定位
			1.参照自己在文档流中的位置进行定位
			2.会提升元素的层级
			3.不会脱离文档流
			可选值:
                top
                left
                right	
                bottom



		absolute 绝对定位
			1.元素从文档流中脱离
			2.会改变元素的性质,行内变成块,块的宽高被内容撑开
			3.会提升元素的层级
		包含快:
			1.离当前元素最近的祖先块元素
			2.离他最近开启了定位的祖先元素
			3.都没有开启定位的祖先元素则相对于根元素



		fixed 固定定位
			1.和绝对定位差不多
			2.永远参照于浏览器的视口进行定位


		sticky 粘滞定位
			一定top之后粘滞住了


			
开启了绝对定位之后水平布局的等式增加了left和right
    9个值中没有auto,自动调整right
    有auto,自动调整auto
可以设置成auto的值 margin width left right

垂直方向也必须要满足了且增加了top bottom
	垂直水平居中
                position: absolute;
                margin: auto;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;

优先显示靠下的元素
开启了定位的元素z-index设置元素的层级,层级越高优先显示
 祖先的元素的层级再高也不会盖住后代元素

16.字体

(1).字体库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
font-size: 40px;
color: red;
font-family: "";字体

fontawesome 类名使用 i标签引入

        li::before{
            /* 
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式
                        fab
                        font-family: 'Font Awesome 5 Brands';

                        fas
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900; 

            
            content: '\f1b0';
           font-family: 'Font Awesome 5 Brands';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }


阿里巴巴矢量库

        i.iconfont{
            font-size: 100px;
        }

        p::before{
            content: '\e625';
            font-family: 'iconfont';
            font-size: 100px;
        }
实体:

    <i class="iconfont">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</i>

    <i class="iconfont icon-qitalaji"></i>

(2).行高

1
2
3
4
如果是整数则是字体指定的倍数
 /* 设置行高，没有设置高度 使文字垂直居中 */
line-height: 30px;

(3).字体简写

1
2
3
4
5
6
7
8
9
10
11
font: 字体大小/行高 字体族

以下两个可以写到上面简写的最前面
font-weight:字重
	可选值:
		bold(100-900)加粗
		normmal
font-style:
	可选值:
		normal
		italic斜体

17.文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
text-align 文本的水平对齐
    可选值：
        left 左侧对齐
         right 右对齐
        center 居中对齐
        justify 两端对齐
vertical-align 设置元素垂直对齐的方式
     可选值：
          baseline 默认值 基线对齐
          top 顶部对齐
          bottom 底部对齐
          middle 居中对齐
text-decoration 设置文本修饰
     可选值：
        none 什么都没有
        underline 下划线
        line-through 删除线
        overline 上划线	
 white-space 设置网页如何处理空白
      可选值：
          normal 正常
          nowrap 不换行
          pre 保留空白
多余的内容设置省略号
 			width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

18.背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
background-color: ; 
background-image: url("");

background-repeat 用来设置背景的重复方式
 可选值：
      repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
      repeat-x 沿着x轴方向重复
      repeat-y 沿着y轴方向重复
      no-repeat 背景图片不重复

 background-position 用来设置背景图片的位置
 设置方式：
        通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
        使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
        通过偏移量来指定背景图片的位置：
        水平方向的偏移量 垂直方向变量

设置背景的范围 
background-clip 
  可选值：
       border-box 默认值，背景会出现在边框的下边
       padding-box 背景不会出现在边框，只出现在内容区和内边距
       content-box 背景只会出现在内容区

background-origin 背景图片的偏移量计算的原点
        padding-box 默认值，background-position从内边距处开始计算
        content-box 背景图片的偏移量从内容区处计算
        border-box 背景图片的变量从边框处开始计算

background-size 设置背景图片的大小
         第一个值表示宽度 
         第二个值表示高度
            - 如果只写一个，则第二个值默认是 auto
                    cover 图片的比例不变，将元素铺满
                    contain 图片比例不变，将图片在元素中完整显示

background-attachment
        - 背景图片是否跟随元素移动
        - 可选值：
              scroll 默认值 背景图片会跟随元素移动
              fixed 背景会固定在页面中，不会随元素移动

background: url('./img/2.jpg') #bfa  center center/contain border-box content-box no-repeat ;
        注意：
            background-size必须写在background-position的后边，并且使用/隔开
            background-position/background-size
			background-origin background-clip 两个样式 ，orgin要在clip的前边


解决图片闪烁的问题：
            可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片
            这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题
            这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图

        雪碧图的使用步骤：
            1.先确定要使用的图标
            2.测量图标的大小
            3.根据测量结果创建一个元素
            4.将雪碧图设置为元素的背景图片
            5.设置一个偏移量以显示正确的图片

        雪碧图的特点：
            一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验

19.表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
tr:行
td:单元格
rowspan:合并纵向单元格
colspan:合并横向单元格
			<!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
            <tr>
                <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
                <td>A1</td>
                <td>B1</td>
                <td>C1</td>
                <td>D1</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
                <td>C2</td>
                <!-- rowspan 纵向的合并单元格 -->
                <td rowspan="2">D2</td>
            </tr>
            <tr>
                <td>A3</td>
                <td>B3</td>
                <td>C3</td>
            </tr>
            <tr>
                <td>A4</td>
                <td>B4</td>
                <!-- 
                    colspan 横向的合并单元格
                 -->
                <td colspan="2">C4</td>
            </tr>
长表格:

20.表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<form action="target.html">
           <!-- autocomplete="off" 补全 
                readonly 只读 会提交
                disabled 禁用 不会提交
                autofocus 获取焦点
           -->
           <span>用户</span>
           <input type="text" name="username" />

           <br />

           <span>密码</span>
           <input type="password" name="pwd" />

           <br />

           <!-- 单选框 -->
           <!-- checked默认选中 -->
           <input type="radio" name="rem" value="true" />

           <br />

           <!-- 多选框 -->
           <input type="checkbox" name="1" value="1" />
           <input type="checkbox" name="2" value="2" />
           <input type="checkbox" name="3" value="3" />

           <br />
           <!-- 下拉列表 -->
           <select name="select">
               <option value="1">1</option>
               <option value="11">2</option>
               <option value="111">3</option>
           </select>

           <br />

           <input type="submit" />
           <input type="reset" />
           <input type="button" value="按钮" />

           <button type="submit">提交</button>
           <button type="reset">重置</button>
       </form>

21.过渡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
transition: 
1.property
方式 all
2.duration
秒数
3.timing-function
过渡的持续函数
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier()制定时序函数
steps()分步执行过渡效果 
4.delay
过渡效果的延迟

22.动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@keyframes test{
	from{}
	to{}
}
            /* animation-name: 要对当前元素生效的关键帧的名字 */
            /* animation-name: test; */

            /* animation-duration: 动画的执行时间 */
            /* animation-duration: 4s; */

            

            /* 动画的延时 */
            /* animation-delay: 2s; */

            /* animation-timing-function: ease-in-out; */

            /* 
            animation-iteration-count 动画执行的次数 
                可选值：
                    次数
                    infinite 无限执行
            */
            /* animation-iteration-count: 1; */

            /*
             animation-direction
                指定动画运行的方向
                    可选值：
                    normal 默认值  从 from 向 to运行 每次都是这样 
                    reverse 从 to 向 from 运行 每次都是这样 
                    alternate 从 from 向 to运行 重复执行动画时反向执行
                    alternate-reverse 从 to 向 from运行 重复执行动画时反向执行

            */
            /* animation-direction: alternate-reverse; */

            /* 
                animation-play-state: 设置动画的执行状态 
                可选值：
                    running 默认值 动画执行
                    paused 动画暂停
            */
            /* animation-play-state: paused; */

            /* 
            animation-fill-mode: 动画的填充模式
                可选值：
                    none 默认值 动画执行完毕元素回到原来位置
                    forwards 动画执行完毕元素会停止在动画结束的位置
                    backwards 动画延时等待时，元素就会处于开始位置
                    both 结合了forwards 和 backwards
            */
            /* animation-fill-mode: both; */

23.变形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
         /* 
             变形就是指通过CSS来改变元素的形状或位置
             -   变形不会影响到页面的布局
             - transform 用来设置元素的变形效果
                 - 平移：
                     translateX() 沿着x轴方向平移
                     translateY() 沿着y轴方向平移
                     translateZ() 沿着z轴方向平移
                         - 平移元素，百分比是相对于自身计算的
         */
         /* transform: translateY(-100px); */
居中
         color: orange;
         position: absolute;
         /* 
             这种居中方式，只适用于元素的大小确定
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto; */

         left: 50%;
         top: 50%;
         transform: translateX(-50%) translateY(-50%);



         /* 
             对元素进行缩放的函数：
                 scaleX() 水平方向缩放
                 scaleY() 垂直方向缩放
                 scale() 双方向的缩放
         */
         transform:scale(2)

24.弹性布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
主轴:弹性元素排列的方向为主轴
侧轴:主轴垂直的方向称为侧轴

display:flex;
display:inline-flex;

flex-direction:
row
row-reverse
column
column-reverse



flex-grow:0
弹性元素的伸展系数

flex-shrink:1
收缩系数


            /* flex-wrap: 
                设置弹性元素是否在弹性容器中自动换行
                可选值：
                    nowrap 默认值，元素不会自动换行
                    wrap 元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着辅轴反方向换行
            */

            /* flex-wrap: wrap-reverse; */

            /* flex-flow:  wrap 和 direction 的简写属性 */
            /* flex-flow: row wrap; */


            /*  
                justify-content
                    - 如何分配主轴上的空白空间（主轴上的元素如何排列）
                    - 可选值：
                        flex-start 元素沿着主轴起边排列
                        flex-end 元素沿着主轴终边排列
                        center 元素居中排列
                        space-around 空白分布到元素两侧
                        space-between 空白均匀分布到元素间
                        space-evenly 空白分布到元素的单侧

            *//* align-content: 辅轴空白空间的分布 */


            /* justify-content: center; */

            /*
             align-items: 
                - 元素在辅轴上如何对齐
                - 元素间的关系
                    - 可选值：
                        stretch 默认值，将元素的长度设置为相同的值
                        flex-start 元素不会拉伸，沿着辅轴起边对齐
                        flex-end 沿着辅轴的终边对齐
                        center 居中对齐
                        baseline 基线对齐
             */
     /* 		 /* align-self: 用来覆盖当前弹性元素上的align-items */


                元素基础长度

                flex-basis 指定的是元素在主轴上的基础长度
                    如果主轴是 横向的 则 该值指定的就是元素的宽度
                    如果主轴是 纵向的 则 该值指定的是就是元素的高度
                    - 默认值是 auto，表示参考元素自身的高度或宽度
                    - 如果传递了一个具体的数值，则以该值为准
            */
            /* flex-basis: auto; */

            /* 
                flex 可以设置弹性元素所有的三个样式
                    flex 增长 缩减 基础;
                        initial "flex: 0 1 auto".
                        auto  "flex: 1 1 auto"
                        none "flex: 0 0 auto" 弹性元素没有弹性
            */
				order制定排列顺序

25.grid布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
display: grid

grid-template-columns: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;

coluumn-gap:
列间距
row-gap:
行间距
gap
统一设置

            .wrapper {
                display: grid;
                grid-template-areas:
                    "header header header"
                    "sidebar content content"
                    "footer footer footer";
            }
            header {
                grid-area: header;
            }
            main {
                grid-area: content;
            }
            aside {
                grid-area: sidebar;
            }
            footer {
                grid-area: footer;
            }

justify-items
end start center
align-items

26.移动端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
默认情况下，移动端的像素比就是  980/移动端宽度  （980/750）
 
1px = 2移动端像素
100vm = 一个视口宽度
1vw = 1%视口宽度

            /* 
                网页中字体大小最小是12px，不能设置一个比12像素还小的字体
                    如果我们设置了一个小于12px的字体，则字体自动设置为12

                0.1333333vw = 1px

                5.3333vw = 40px 用这个
            */
100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
font-size: 5.3333vw;
1 rem = 1 html的字体大小
1 rem = 40 px(设计图)

27.媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@media 查询规则{
    
}
查询规则:
	all
    print
    screen
    speech
前面加上only兼容


             媒体特性：
                width 视口的宽度
                height 视口的高度

                min-width 视口的最小宽度（视口大于指定宽度时生效）
                max-width 视口的最大宽度（视口小于指定宽度时生效）
        

         @media (max-width: 500px){
             body{
                
             }
         } 


         样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
         一般比较常用的断点

         小于768 超小屏幕 max-width=768px
         大于768 小屏幕   min-width=768px
         大于992 中型屏幕 min-width=992px
         大于1200 大屏幕  min-width=1200px
         
         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }