html+css

最新推荐文章于 2024-05-18 12:54:30 发布

Breeze fly

最新推荐文章于 2024-05-18 12:54:30 发布

阅读量2.1k

点赞数 1

文章标签：前端 css html5

本文链接：https://blog.csdn.net/m0_55836496/article/details/126526373

版权

HTML

day02

html常用标签

h1-h6

特点：双标签独占一行，自带加粗，不同等级标题，字号大小不同，自带间距，具有一个标题的含义。

段落文本标签 p

特点：双标签，独占一行，自带间距，具有文本段落的含义。

换行 br

特点：单标签。

分隔线 hr

特点：单标签

空格符 &nbsp

特点：浏览器默认只能识别一个空格，当我们需要用到多个空格符号时，需要用到空格符，空格符既不是单标签也不是双标签。

加粗 b，strong

特点：双标签；字体加粗，默认不占一行。

strong具有一个强调语气。

倾斜 em，i

特点：双标签，字体倾斜

8.下划线 u

特点：双标签，文本出现下划线，默认不独占一行。

9.删除线 del ，s

特点：双标签，文本出现删除线，默认不独占一行，del具有一个强调语气

10.上标 sup

特点：双标签，默认不独占一行

11.下标 sub

特点：双标签，默认不独占一行

12.列表标签

(1)有序列表 ol>li

type 序号类型

属性值

a 小字字母

A 大写字母

1 阿拉伯数字

i 小写罗马数字

I 大写罗马数字

start 开始的位置

属性值为数字表示从第几个开始

(2)无序列表 ul>li

(3)自定义列表 dl>dd+dt

*13.图片标签 img

特性:单标签，不独占一行。按照自身大小去显示

属性:

(1)src 图片路径

三种路径引入方式

<1>.相对路径（相对于此文件来说，图片文件的位置）

…/ 返回上一层

xxx/ 进入xxx文件夹

<2>.绝对路径（相对于你的计算机来说，图片的位置，不推荐使用）

C:\Users\ljy\Desktop\day02\images\3.jpg

<3>.网络路径（图片的网络路径，需要链接外网才能使用）

https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=34c1174b8813632715b8ca37a4bf8cda/34fae6cd7b899e512aadb18340a7d933c8950d01.jpg

(2)alt 图片无法正常显示时的显示文本信息

(3)title 鼠标悬停时的提示文本信息

(4)width 图片宽度

(5)height 图片高度

*14.超链接 a 点击内容区域进行跳转

特性：双标签，默认自带下划线，不独占一行

属性：

(1)href 跳转要去的路径

(2)target

_self(默认值) 当前窗口打开

_blank 在新窗口打开

(3)title 鼠标悬停时的提示文本信息

补充知识点:

快捷写法解析

> 代表包含嵌套

* 代表生成几个

{} {}内写标签内的文字内容

$ 代表数字序号

day03

表单相关

1.表单的作用：用来收集用户的信息的；

2.表单的组成：表单框（表单域form）、提示信息表单控件/表单元素

<1>表单框 form

method 请求方式

action 接口地址

注意：表单控件必须写在form中，否则无效。

<2>input 一个重要的表单控件

type

—text 文本框

—password 密码框

—submit 提交按钮

—reset 重置按钮

—button 普通按钮

name 参数名

value 输出框初始值或按钮文字

css相关

1.css概念

层叠样式表，是web标准中的标准语言，规定了如何修饰网页信息的显示样式。目前推荐遵循的是w3c发布的css3.0，用来修饰XHTML或者XML等样式文件的计算机语言。

2.css语法结构

（1）结构：

选择符{声明：声明}

声明–属性：属性值

（2）特点：

<1>css由选择器{选择符}和声明组成。选择器告诉浏览器要去修饰谁，声明则是具体如何修饰。

<2>选择器写在{ }之前，声明写在{ }之内

<3>声明由属性和属性值组成，属性和属性值之间：号链接。

<4>属性告诉我们要去修饰这个元素的什么内容，属性值为具体修饰成什么样式

<5>每条声明以 ; 结尾

（3）案例

h1{

color:red;

background-color:yellow;

}

（4）css属性

color 字体颜色

background-color 背景颜色

3.css三种样式表

（1）内部样式表

写在HTML内部，建立一个style标签，在style标签中书写css样式，注意style标签建议放在head标签中。

（2）外部样式

写在css文件中，我们需要通过link标签，引入到我们的html中，才能让其生效。一般我们把link标签也放在head标签中。

（3）行内样式（内联样式）

写在标签的style属性内，不需要写选择器，直接写css声明即可。

案例：

我是h2标签

(4)样式的生效顺序？

<1>当选中同意元素，如果未修饰同一属性，则两个都生效。如果修饰到同一属性，权重相同，后写的优先生效。

（5）书写习惯

建议一条声明写一行，注释方便

（6）css中的注释结构 /* */

4.css选择器

（1）标签选择器/元素选择器选中标签名叫做xxx的元素

案例: p{color:red;}

（2）id选择器 # 选中id名叫做xxx的元素

html:

我是p1

css: #box{color:red;}

注意事项：一个页面中不能出现重复的id名

如果id名重复。css没有影响，但是js无法选中第二个重复的id名

（3）群组选择器选择器1，选择器2，选择器3{ }

案例：选择器1,选择器2,选择器3{color:red;}

注意：，号分隔每一个选择器，并且每一个选择器都是相互独立的

（4）class选择器、类选择器 .xxx{}

案例:

html:

css: .p1{color:red;}

注意：class名可以用一次也可以用多次，和id比较像，但是没有相同id名只能使用一次的限制。

（5）通配符 * 选中所有

案例: *{margin:0;padding:0;} 清除默认间距

注意：通配符一般用来清除默认间距或者统一页面中的某一属性。

（6）包含选择器选择器1 选择器2{} 选中选择器1下边包含的选择器2

案例 ul li{color:red;}

（7）伪类选择器选中元素处于某种状态

：link 选中超链接初始状态

：visited 选中超链接访问后的状态

：hover 选中元素划过时的状态

：active 选中超链接激活时的状态

注意： hover可以用于其他元素

给超链接不同状态添加样式时，需要保持

：link-----：visited------：hover-----:active {lvha 驴哈}

5.css选择器的权重

（1）当多个选择器选中同一元素，不同属性，则多个属性都生效。如果修饰到同一属性，权重相同，后写的生效。

（2）多个选择器选中同一元素的相同属性，权重不同时，权重大的覆盖权重小的样式，权重大的优先生效。

(3)各个选择器权重（权重用四位数字表示）

			通配符*    0-1之间

标签 0001

			class     0010

id 0100

行内样式 1000

!important 9999

包含选择器此选择器中所有选择器权重之和

群组选择器此选择器中各个选择器权重单独计算

伪类选择器 0010 （此选择器一般不单独出现，所以权重也是相加）

6.补充标签

		  div   对标签，默认独占一行，没有间距，没有含义，没有功能，干干净净

		    所以我们在做页面中，经常使用div标签

		 span  对标签，默认不独占一行， 没有含义

day04

css文本属性

css文本属性
1. font-size 文字大小
  1. 默认16px
  2. 最小支持12px
  3. 单位
    1. px 像素大小
    2. em 相对父元素字体大小
color 文字颜色
1. 颜色单词
  1. rgb（）
    1. rgb分别代表红黄蓝，括号内三个取值在0-255之间
  2. #16进制
    1. 每两个字符代表一个色域，取值范围0-9 a-f
    2. 每个色域俩俩相同
2. font-family 文字字体
  1. window默认字体微软雅黑
  2. 电脑字体库没有的字体不生效
  3. 支持多字体，从左往右依次识别
  4. 多字体需要用逗号隔开，字体需要加引号
3. font-weight 字体粗细
  1. 关键词 bolder 更粗的、bold 粗的、normal默认的
  2. 取值范围 0-900
    1. 300 变细
    2. 400 默认粗细 normal
    3. 700 加粗 bold
    4. 900 极粗视觉效果和700等同含义上的更粗 bolder
4. font-style 文字倾斜
  1. normal 默认值不倾斜
  2. italic 斜体（需要字体支持
  3. oblique 字体倾斜
5. text-align 文字水平对齐方式
  1. left
  2. right
  3. center
  4. justify 两端对齐（中文效果不明显，多行文本才能生效
6. line-height 行高
  
  letter-spacing: ;字符间的间距
  1. 设置行高后，每行文字的高度都会变为设置的大小，文字会出现行高的正中间
  2. 单行文本垂直居中单行文本行高和元素的高度保持一致，可以达到垂直居中的效果
  3. 1.5倍行高写法 1.5em
7. text-decoration 文本修饰
  1. underline 下划线
  2. overline 上划线
  3. line-through 删除线
  4. none 取消修饰，一般给超链接取消下划线
8. text-indent 首行缩进
  1. text-indent 可以取负值
  2. 仅仅对段落第一行生效
  3. 2em 首行缩进两个字符

10.复合属性 font

font:weight style size/line-height family;

注意：字体类型和字号不能省略，否则无效。因为我们一般情况下，很少去改变字体类型，所以这个复合属性，

相对来说不那么好用。

二、列表复合属性 list-style

回顾：

ul——无序列表默认li前边有个小点点

ol——有序列表默认li前边有序号

dl——自定义列表里边为dt+dd

解析：我们在去书写页面时，往往不太想要考虑html标签的默认样式，但是往往一些标签都自带一些样式和特性。这并不是

我们想要的，我们一般都回去取消他。

list-style:none; 取消列表的默认样式

三、边框 border

1.复合属性 border:边框宽度边框线型边框颜色;

2.案例 border:20px solid #ccc;

3.各个参数的单一属性

border-width 边框宽度

border-style 边框线型

solid 实线

dashed 虚线

double 双线

dotted 点划线

none 取消边框

border-color 边框颜色

border-radius: ; 边框圆角

4.单一方向上边框

border-left 左边框

border-right 右边框

border-top 上边框

border-bottom 下边框

5.边框属性的多参数应用

一个参数上下左右

两个参数上下、左右

三个参数上、左右、下

四个参数上、右、下、左

规律：顺时针生效，没有参数，就从对面拿参数。

四、背景属性 background

1.background-color 背景色

2.background-image 背景图

案例: background-image: url(…/images/m.png);

特点：

——当背景图比元素大时，裁切显示

——当背景图比元素小时，平铺显示

——当同时使用背景图和背景色时，背景色在下层，背景图在上层。

3.background-repeat 背景图是否平铺

no-repeat 不平铺

repeat(默认值) 平铺

repeat-x x轴水平平铺

repeat-y y轴垂直平铺

注意：就算背景图比元素大，他也会平铺。只是说我们看不出来罢了。

4.background-position 背景图定位

——参数有两个，第一个参数控制X轴位置，第二个参数控制Y轴位置

——第一个参数为正右负左，第二个参数正下负上。

——当只写一个参数时，默认为X轴参数，Y轴会补全一个center

——参数值还可以是关键词，水平关键词:left/center/right,垂直关键词:top/center/bottom

5.background-size 背景图大小

——参数有两个，第一个参数为宽度，第二个参数为高度

——当只写一个参数时，默认为宽度，高度随着宽度等比放大。

——参数除了可以是具体数值之外，还可以是百分比和关键词。

cover 等比放大，两条边都铺满就停止放大，但是会出现裁切

contain 等比放大，一条边铺满就停止放大，但是会有留白

6.background-attachment 背景图是否固定

fixed 背景图固定（背景图参照物为可视窗口）

scroll(默认值) 背景图随着元素进行滚动（背景图参照物还是元素）

7.background 复写属性

background: background-color background-image background-repeat background-position/background-size background-attachment;

五、浮动 float

1.属性值

left 左浮动

right 右浮动

none 不浮动

2.作用：让默认独占一行纵向排列的元素横向排列

3.浮动元素不再独占一行，而是有多大大小，占据多大空间。

4.浮动元素半脱离文档流。（元素飘起来了，但是文字内容还留在原地。）

5.浮动元素只能影响后边的元素，无法对前边的元素造成影响。

浮动如何使用？

同级元素，要浮动都浮动，要不浮动都不浮动。

记住浮动加给谁，改变谁的位置。浮动加给子元素只能控制子元素在父元素中的位置,并不能改变父元素。

补充：

1.width 宽度

2.height 高度

day05

盒模型

标准盒模型
1. 标准盒模型的组成：内容区域，内填充（内间距），边框、外间距
  1. 内容区域 content{width 、height}
  2. 内填充{内间距} padding
  3. 边框 border
    
    border-radius: ; 边框圆角
  4. 外间距 margin
2. 标准盒模型所占空间计算==content{width}+padding*2+border *2+margin *2
  
  标准盒模型体积计算==content(width)+padding * 2+border * 2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OeE1wuZG-1661413429845)(E:\千峰学习\一阶段\week1\day5\01-课件\box1.JPG)]

3.内填充{内间距} padding

1.概念：padding，可以用来确认元素和内容区域之间的距离

2.特点：

内填充出现在content和border之间
1. 内填充颜色和当前元素背景保持一致
  1. 内容区域不会出现在填充上
  2. 四个方向
    1. padding-top 上填充
    2. padding-left 左填充
    3. padding-right 右填充
    4. padding-left 下填充
  3. 多属性值
    1. 一个值四个方向
    2. 两个值上下、左右
    3. 三个值上、左右。下
    4. 四个值上、右。下、左
  4. 作用：用来调整子元素在父元素中的位置
    1. padding需要加给父元素
    2. padding值是额外加到元素大小之上，想要保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。
  5. 外间距 margin
    1. 定义：用来确认元素和元素之间的间距或者元素和父元素边界之间的间距。
    2. 四个方向
      1. margin-top 上间距
        
        margin-left 左间距
        
        margin-right 右间距
        
        margin-bottom 下间距
      2. 多属性值
        
        一个值四个方向
        
        两个值上下、左右
        
        三个值上、左右、下
        
        四个值上、右、下、左
      3. 特点：
        
        没有浮动的情况下。margin的参考边界在左侧，右浮动后，参考边界在右侧
        margin的背景色和父元素保持一致
        两个元素的上下margin会重叠，按照较大的显示
        两个元素的左右margin会相加。
        父元素下的第一个子元素添加margin，会出现在父元素身上{高度塌陷}
        解决方案
        给父元素添加边框，改变页面布局
        父元素下第一个子元素不用margin-top，改为给父元素添加padding
        给父元素添加overflow：hidden
        
        margin支持负值方向相反
        margin 可以控制元素盒模型在父元素水平居中
        margin：0 auto；
        margin上下不支持auto
        margin左右auto不和float同时使用
补充：

关于浮动

1.浮动元素如果没有写宽和高，宽高默认由内容区域撑开(有多大内容，占多大空间)。

2.父元素不写高度,想让高度由子元素撑开时，子元素浮动，会造成父元素高度塌陷。

——解决方案1:给父元素添加高度

——解决方案2:给父元素添加overflow:hidden;

day 06

怪异盒

box-size 改变盒模型

border-box 怪异盒

content-box 标准盒

标准盒模型中padding和border算在width之外，怪异盒模型中padding和border算在width之内。

单行文本溢出显示省略号
1. overflow 溢出属性
  1. visible（默认值）溢出内容展现在元素之外
  2. hidden 溢出隐藏
  3. scroll 元素出现滚动条
  4. auto 元素内容超出后，出现滚动条
  5. inherit 父元素overflow啥属性，我就啥属性
  6. overflow-x x轴溢出
  7. overflow-y y轴溢出
2. white-space 空白空间
  1. normal 默认值，多个空格时只识别一个空格，不识别换行，放不下自动换行
  2. nowrap 多个空格时只识别一个空格，不识别换行，一行显示
  3. pre 识别空格，识别换行但是不会自动换行
  4. pre-wrap 识别空格，识别换行，会自动换行
  5. pre-line 多个空格时只识别一个空格、识别换行、会自动换行
3. text-overflow 是否显示省略号（单独使用无效）
  1. ellipsis 显示省略号
  2. clip 默认值不显示省略号（。。。）
4. 总结
width 让我们知道在哪换行

white-space:nowrap 该换行也不换行，一行显示

overflow:hidden 多余的藏起来

text-overflow:ellipsis 溢出显示省略号
页面补充知识
1. 标签选择器不要单独使用、否则会影响页面的其他同类标签，我们一般需要给他加父元素作为前缀
2. 2.命名规范
  
  驼峰法：当标签名称或者变量名由多个英文单词组合而成时，从第二个单词开始，首字母大写
  
  下划线：当标签名称或者变量名由多个英文单词组合而成时，单词与单词之间用下划线隔开
3. .确认父元素和子元素之间的距离
  
  <1>给父元素添加padding，挤压子元素内容空间。
  
  <2>给子元素添加margin,来控制子元素距离父元素边界的距离

day07

元素类型

块元素
1. 特点 block
  1. 默认不独占一行
  2. 可以定义宽和高
  3. 一般作为盒子使用，用来容纳其他元素{内联元素，块元素，内联块元素}
    1. 常见标签div、p、h1-h6、ul、li、ol、dl、dt、dd
    2. 注意p标签不能用来容纳其他元素，只能作为内联元素或者内联块元素的容器
2. 内联元素、行内元素、 inline
  1. 特点
    1. 默认不独占一行，横向排列显示
    2. 定义宽高无效，实际宽高由内容区域撑开
    3. 内联元素可以定义padding。border、margin等属性，但是这些属性上下值没有实际的布局效果，只有视觉效果。
      1. 常见标签:span、a、em、i、b、strong、s、del、u等等
3. 内联块元素，行内元素 inline-block
  1. 特点
    1. 默认不独占一行，横向排列显示
    2. 可以定义宽和高
    3. 一般情况下，有自身默认大小
    4. 常见标签：img、input、textarea、select、video、audio/
元素属性转换 display
1. 属性值
  1. block 块元素
  2. inline 行内元素
  3. inline-block 行内块元素
  4. none 隐藏元素
  5. flex 弹性盒
  6. grid 网格布局
2. 不常用属性
  1. list-item 列表项，将元素转换成列表。li’的默认类型
  2. table 以表格形式显示，table表格的默认类型
  3. table-row 以表格形式显示 tr表格的行的默认类型
  4. table-cell 以表格列形式显示 tb’表格的列默认类型
3. 注意事项
  1. 我们在写元素隐藏和出现效果时，不要写划过自身让自身小时或者出现的效果，会出现bug’，一般我们写给一个一直存在的元素，来控制另一个元素的隐藏和出现
  2. display：none 元素隐藏，如果想要元素出现，只要使用display属性，属性值不是none即可覆盖
  3. float可以将元素默认转换成块元素{position、display：flex也是这样}
inline-block元素的特点以及vertical-align的应用
1. inline-bllock元素的问题和特点
  1. 三像素间距问题：内联块元素和块元素之间存在三像素的间距
    1. 解决方案
      1. 将内联块元素转为块元素
      2. vertical-align：top、middle、bottom
  2. 内联块元素之间的对齐方式不一致
    1. 解决方案：vertical-align:top/middle/bottom;
  3. 文字和内联块也无法对齐
    1. 解决方案 vertical-align：middle
2. vertical-align 控制一行内的内联元素的垂直对齐{跟父元素的行高对齐}
  1. 属性
    1. top 顶线
    2. middle 中线
    3. baseline 基线{默认值}
    4. bottom 底线
3. 置换元素和非置换元素概念
  1. 置换元素：内容不受css视觉格式化模型控制，css渲染模型并不考虑对此内容的渲染，且元素一般拥有固有尺寸
  2. 这些元1

day08

定位 position

static 默认值无特殊定位不支持偏移量
relative 相对定位
1. 定位参考物为自身原本的位置
2. 特点相对自身原本的位置进行定位，不脱离文档流仍占据原来的空间。未添加偏移量时，位置不变。
3. 偏移量位移规律
  
  top 上正下负上
  
  left 左正右负左
  
  right 右正左负右
  
  bottom 下正上负下

3.absolute 绝对定位

定位参照物为包含块{定位父级}
特点完全脱离标准文档流，相对于包含块进行定位，如果父元素是包含块，就针对父元素定位，父元素不是的话，就会一级一级往上寻找，直到body为止
fixed 固定定位
1. 定位参照物为浏览器窗口
2. 针对浏览器窗口进行定位，脱离文档流，不占用原来的空间位置
sticky 粘性定位
1. 相对离自己最近且有滚动条的父元素做的定位

注意：position:absolute;和position:fixed;会将元素类型转换为块元素。

二、偏移量

1.特点：定位属性的辅助属性，当我们的元素设置定位后，他会根据偏移量进行具体的位置变化。

2.属性

top 上

left 左

right 右

bottom 下

3.注意事项：top和bottom同时使用是top优先生效，left和right同时使用，left优先生效

定位拓展

什么时候用定位

发生重叠、吸顶、固定定位的样式时，使用定位。

绝对定位和浮动的区别

绝对定位完全脱离文档流，浮动半脱离文档流

定位了的元素文字也会层叠，浮动后的元素，文字上不去。

定位的应用元素水平垂直居中
1. 给父元素添加position:relative;
给子元素添加

position:absolute;

left:50%;

top:50%;

margin-top:负的子元素高度的一半;

margin-left:负的子元素宽度的一半;
1. 父元素添加position:relative;
给子元素添加

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;
1. 元素在页面中水平垂直居中
position:fixed;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

六.锚记

通过a标签的跳转功能，快速定位到页面中的某个模块

案例：

七、透明 opacity

取值范围 0-1之间 0为全透明 1为不透明

效果：元素整体透明，包括里边的子元素和内容

拓展：颜色透明 ** **(0-255,0-255,0-255,0-1) a为透明度，取值范围为0-1 0为全透明，1为不透明

拓展：filter:alpha(opacity=value) 老版本ie浏览器opacity透明写法 value取值范围为0-100

opacity IE8及以下浏览器不支持

filter:alpha(opacity=value) IE9及以下版本透明写法，IE9以上不支持。

day09

表格和表单

table 表格

tr 行

td 单元格

<table> <tr> <td></td> </tr> </table>

table支持的标签属性

1.border 边框

2.width 宽度

3.height 高度

4.bgcolor 背景色

5.bordercolor 边框颜色

align 表格整体位置
cellpadding 单元格内填充
cellspacing 单元格间距
rules 表格内边框线型

all 全线型

cols 竖线型

rows 横线型

tr中的标签

height 高度
bgcolor 背景色
align 本行单元格内容水平对齐方式
valign 本行单元格内容垂直对齐方式

top、middle、bottom

td中标签

height
width
bgcolor
align 本单元格内容水平对齐方式
valign 本单元格内容垂直对齐方式
rowspan 合并行（竖向合并）

合并n行，向下合并，除本身单元格外占用几个单元格下边删除几个
colspan 合并列（横向合并）
合并n列，横向合并，除本身单元格外占用几个单元格右边删除几个

表格中的css属性

border-collapse 是否合并单元格间隔

collapse 合并单元格间隔

separate 不合并单元格间隔

border-spacing 单元格之间的间距
empty-cells 空单元格是否隐藏

hide 隐藏

show(默认值) 显示
table-layout 表格宽度分配方式

auto（默认值）自适应（自动分配空间）

优势：内容不会溢出

劣势：没有内容的单元格会被挤压

fixed 固定

优势：每一个单元格的宽度不都会被挤压，宽度平均分配

劣势：内容过长会溢出单元格

表格其他标签

表格行分组
1. thead 表头
2. tbody 表体
3. tfoot 表尾
表格标题
1. th 多用于thead
表格列分组
1. colgroup
2. span
表格标题
1. caption

表单

表单的作用：收集用户信息
表单的组成：表单框，表单控件，表单提示信息
表单标签
1. form
  
  method 提交方式
  
  get
  
  post
  
  put
  
  delete
  
  action 接口地址
  1. input 表单控件
    1. type 表单控件类型
      1. text 文本框
      2. password 密码框
      3. submit 提交按钮（刷新页面，提交数据、）
      4. button 普通按钮
      5. radio 单选按钮
      6. checkbox 多选按钮
      7. file 上传文件框
      8. image 图像框
      9. hidden 隐藏字段框（不可见）
      10. placeholder 灰色提示

2.name 参数名

3.value 输入框初始值/按钮文本、参数值

	3.select    下拉框(需要配合option使用，option为下拉选项)

	4.textarea    文本域

默认可以随时改变大小，

resize:none;禁止改变文本域大小

	5.label    提示信息框

案例: 提示信息 (注意for里边写的是对应的id名)

	6.fieldset  表单字段集

legend 字段集标题(写在表单字段集之内)

浮动只对后边的元素有影响

day10

自适应

一、自适应：不去给元素定义宽和高，元素随着窗口的宽度而改变宽度，随着窗口的高度而拥有高度。
1.宽度自适应:不去定义元素宽度,默认情况下块元素宽度为父元素的100%,元素随着窗口的宽度而改变宽度。
(1)默认值： width:auto;(100%)
(2)用途:页面通栏、满屏效果、子元素想要占据父元素宽度全部的时候
2.高度自适应：元素不写高度，高度由内容或者子元素撑开，这就是高度自适应。如果没有内容或
子元素，那么元素将没有高度。
(1)默认值 height:auto;
(2)优劣势：
——优势：不会出现子元素溢出父元素的情况，能够一直和子元素内容保持一致。
——劣势：<1>当元素内容过少时，页面布局会很难看。
解决：写最小高度。
<2>父元素不写高度，子元素浮动，会造成高度塌陷。
3.如何解决自适应高度元素，浮动后的高度塌陷问题？
<1>写高度 (元素不再是自适应元素)
<2>overflow:hidden;(大多数情况可用，当元素需要部分超出父元素时，无效正常显示)
<3>在浮动元素同级添加一个宽高为0的未浮动元素，然后给这个元素添加clear:both。(会使页面多出来很多无用空标签)
<4>万能清除浮动法
塌陷的父元素::after{
content: “”;
display: block;
width: 0;
height: 0;
overflow: hidden;
clear: both;
}
补充：clear 清除前边元素浮动对当前元素的影响
left
right
both 清除两边
注意：clear智能清除浮动元素对同级元素造成的影响
二、伪元素
<1>理解：通过css来选中某一块并不存在标签的区域，模拟一个标签，添加内容或修改样式。
<2>和伪类的区别：伪元素双冒号，伪类单冒号。
<3>具体内容
xxx::before{ 选中xxx内部最前边，必须搭配content使用
content:‘’;
…
}
xxx::after{ 选中xxx内部最后边，必须搭配content使用
content:‘’;
…
}
xxx::first-line{ 选中xxx内的第一行
…
}
xxx:t:firs-letter{ 选中xxx内的第一个字符
…
}
三、元素隐藏和透明
隐藏
1.display:none; 元素消失,元素不存在,不占据页面空间

2.visibility 元素消失,元素不存在,但是仍占据页面空间

hidden 元素消失
visible(默认值) 元素显示

3.opacity:0; 元素透明不显示，但是元素还在，仍占据页面空间
4.height:0; 元素消失(因为高度0都没出现)，但是里边有内容，内容溢出了
5.transform: scale(0); 元素缩放为0倍消，元素不存在，仍占据页面空间（下周三讲）
透明
1.opacity 0-1 0为全透明 1为不透明
特点:元素及子元素和内容整体透明
拓展：filter:alpha(opacity=value) 老版本ie浏览器opacity透明写法 value取值范围为0-100
opacity IE8及以下浏览器不支持
filter:alpha(opacity=value) IE9及以下版本透明写法，IE9以上不支持。
2.rgba(0-255,0-255,0-255,0-1);
特点:背景色透明，不影响内容
rgba中前三个参数取值范围为0-255，分别代表红、绿、蓝三色域取值，a为透明度，取值为0-1
3.transparent 透明色
特点:就是一个透明色，一个颜色而已，不影响内容和子元素
四、最大最小宽高
min-width 最小宽度
max-width 最大宽度
min-height 最小高度
max-height 最大高度
特点:块元素常态下，如果不写宽高和内容，默认显示的是最大宽度(100%大于最大宽度时)和最小高度。
浮动时，显示最小宽度和最小高度。(其实可以按照块元素特点理解：不写宽高的常态下宽度默认100%，
高度由内容撑开，浮动后，宽高都由内容撑开)
五、窗口自适应 (盒子根据窗口的大小进行改变)
html,body{
height: 100%;
}
作用:可以使body下边一级子元素高度100%生效，实现满屏高度的效果。
六、iframe 在一个页面中显示另外一个页面
案例：
七、calc()函数
1.作用：用于动态计算长度值。
2.注意事项：运算符前后都需要保留一个空格。
3.支持的运算：“+”, “-”, “*”, “/”，采用标准的数学运算优先级规则。
4.案例： width:calc(100% - 100px);

两栏三栏

代码案例：

-------------------------------------------------------------------------------------------------------->

Document

H5 新增

html的浏览器兼容

谷歌 chrome

ie IE

苹果 safari

欧朋 opera

火狐 firefox

学习目的：知道日后在工作中，如果需要做兼容的话，都需要去兼容谁。

区别

H5语法相较于之前更加具有兼容性，语法没有之前那么严格。在书写代码时，如果个别语法使用

错误或者使用不严谨，并不会报错，浏览器仍然能够解析，但解析的结构可能并不是我们想要的结构。

H5新增语义化标签

header 头部标签

footer 脚部标签

nav 导航栏标签

main 页面主要模块

section 内容模块

article 与上下文无关的独立模块，比如广告文章之类的

aside article的辅助模块，用来解释aside的内容，写在article外边

figure 表示标签规定独立的流内容（图像、图表、照片、代码等等）。

关于语义化标签的理解：他们功能和特点与div基本一致，只是自身带有些专有的含义。

视频和音频

video 视频标签行内块元素
1. src 视频路径地址
2. controls 控制台
3. autoplay 自动播放 (现在很多浏览器都把这个功能禁止了，需要先设置静音才能使用)
4. muted 默认静音
5. loop 循环播放
6. poster 视频加载时的封面
audio 音频标签行内块元素
1. src
2. controls
3. muted
4. autoplay
5. loop

智能表单

input --type
1. text 文本框
2. password 密码框
3. submit 提交按钮
4. reset 重置按钮
5. radio 单选按钮
6. checkbox 复选框
7. button 普通按钮
8. file 提交文件按钮
9. image 图片提交按钮
10. hidde 隐藏数据框

关于提交按钮：不管你在哪个输入框，只要form里边有submit或image按钮，就可以触发提交功能。

新增智能表单——type类型属性

input ——type

   	color                             选色框

     		  tel                                  唤醒拨号盘（pc无效，在移动端可以看出效果）

				 search                           搜索框(右边有个x号，可以清空输入的内容)

				 range                             滑块框

	 			number                         数字框(只能输入数值类型)

				 email                              邮箱框(要么不输入，若输入，内容必须包含@符号，否则无法提交)

				 url                                    网址框(要么不输入，若输入，内容必须包含http:否则无法提交)

 				date                                 日期框(选取年、月、日)

 				month                              月份框(选取年月)

 				week       	                     周选择框(选择一年的第xx周)

				 time                                 时间选择器(选取时、分)

				 datetime-local                本地时间选择器(选取年月日、时分)

range number

					 min   最小数值(起始数字)

					 max   最大数值(终止数值)

	 				   value  显示数值
	 				   
						step  变化的单位间隔

email
multiple 可以支持连续输入多个邮箱，邮箱之间用(,)号隔开
required 必填字段
disabled 禁用选框
placeholder 输入框未输入时，文本提示信息
autofocus 输入框自动获取焦点(一个页面中只能出现一个此属性)
pattern 正则验证(二阶段使用),给输入框设置验证规则
autocomplete 是否开启自动补全
on 开启
off 关闭
注意：
(1)autocomplete 需要搭配 name使用

(2)autocomplete提示的是name提交的参数记录，只要name相同，提示的autocomplete也相同

(3)只要你的设置name,就相当于开启了autocomplete，只要你不禁用，就能进行提示

<9> datalist 数据列表
案例:

<input type="url" list="url_list" name="link" />
          <datalist id="url_list">
            <option label="W3School" value="http://www.W3School.com.cn" />
            <option label="Google" value="http://www.google.com" />
            <option label="Microsoft" value="http://www.microsoft.com" />
          </datalist>

写法：（1）写一个datalist列表，给这个列表起一个id名。列表项为option,value必须写
(2)给想要添加数据列表的标签，添加一个list属性，属性值为datalist的id名
注意：datalist和autocomplete的补全信息不是一回事，两个提示相互独立

C3新增

css3的概念和优点**

css语言开发是朝着模块化发展的。css3将完全向后兼容，在保证之前的

css依旧能够使用的前提下，进行了拓展，网络浏览器也还将继续支持css2，css3主要影响是能够使用新的选择器和属性。

优雅降级和渐进增强

渐进增强 progressive enhancement

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别

优雅降级是从复杂的现状开始，并试图减少用户体验报告供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应版本未来环境的需要。降级意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

css3选择器

层级选择器
1. 包含选择器 E F 选中E下边所有层级中的F
2. 子选择器 E>F 选中E下边第一层的F
3. 相邻兄弟选择器 E+F E后边第一个兄弟，如果是F 被选中
4. 通用选择器 E~f 选中E后边所有的同级F
属性选择器
1. E[attr] 选中E标签中，所有带有属性attr的元素
2. E[attr=‘value’] 选中E标签中，所有属性名为attr属性值只为vlaue的元素
3. E[attr~=‘value’] 选中E标签中，所有属性名为attr，属性值包含value这个单词元素
  
  拓展
  1. (1)E[attr^=‘value’] 选中E标签中，所有属性attr的元素，属性值以value开头的元素
  (2)E[attr$=‘value’] 选中E标签中，所有属性attr的元素，属性值以value结尾的元素
  
  (3)E[attr*=‘value’] 选中E标签中，所有属性attr的元素，属性值包含value关键词的元素
  
  (4)E[attr|=‘value’] 选中E标签中，所有属性attr的元素，属性值以value-开头的元素或者完全为value的元素

3.结构伪类选择器

X Y：first-child x第一个子元素，如果是Y则被选中

X Y：last-child x最后一个子元素，如果是Y则被选中

X Y：nth-child

()内为number X第number个子元素，如果是Y则被选中

odd、2n-1、2n+1 X第奇数个子元素，如果是Y则被选中

even、2n X第偶数个子元素，如果是Y则被选中

					   3n、4n...      X第3的倍数的子元素，如果是Y则被选中

拓展：

(1)X Y:only-child X只有一个子元素且是Y则被选中

(2)X:root 匹配文档的根元素,html中根元素永远是html

(3)X:empty 匹配完全为空的元素X(有空格和换行不算完全空)。

4.目标伪类选择器

E：target 搭配锚点使用，当元素E获取被锚点跳转时选中

5，UI状态伪类选择器{多用于表单元素}

E：enabled 选中表单中，所有不是disabled状态的E元素{这种元素叫做可用元素}

E:disabled 选中表单中，所有时disabled状态的E元素

E:checked 选中表单中，处于选中状态的元素E

6.UI状态伪元素选择器

E:：selection 选中E元素中被用户选中或者处于高亮状态的部分

7.否定伪类选择器

E:not（s）选中除了s之外的所有E元素

8.用户行为选择器

E:focus 当元素获取焦点时被选中

四、字体模块

1.自定义字体 @font-face

案例：<1>@font-face {

font-family: ljy4;

src: url(…/font-face/ygyxsziti2.0.ttf);

}

<2>p:nth-child(4){

font-family: ‘ljy4’;

}

2.阿里矢量图标 iconfont

五、文字阴影 text-shadow

参数1 阴影水平偏移 (右正，左负)

参数2 阴影垂直偏移(下正，上负)

参数3 模糊程度(不可为负)

参数4 阴影颜色

多组值写法（多阴影写法）

text-shadow:样式1,样式2,样式3,样式4;

例：text-shadow:5px 5px 3px aqua,-5px 5px 3px yellow,-5px -5px 3px blue,5px -5px 3px orangered;

六、盒子阴影 box-shadow

box-shadow:阴影水平偏移阴影垂直偏移模糊距离阴影大小阴影颜色内外阴影;

参数1 阴影水平偏移 (右正，左负)

参数2 阴影垂直偏移(下正，上负)

参数3 模糊程度(不可为负)

参数4 阴影大小(可写可不写，四个边缩放大小，支持负值，正数放大，负数缩小)

参数5 阴影颜色

参数6 内外阴影(可写可不写，默认外阴影，当写inset时，变为内阴影)

多组值写法（多阴影写法）

box-shadow:样式1,样式2,样式3,样式4;

例：box-shadow:5px 5px 3px aqua,-5px 5px 3px yellow,-5px -5px 3px blue,5px -5px 3px orangered;

注意：多阴影时，需要逗号隔开，先写的阴影在上边，后写的阴影在下边。

七、css3多背景属性

案例：

background:url(…/images/234.jpg) no-repeat, url(…/images/345.jpg) no-repeat,red;

多组值时，用逗号隔开，后写的在下层，先写在上层，背景色写在最后边。

八、边框圆角 border-radius

border-radius:x1/y1;

1.x1为圆角的水平半径，y1为圆角的垂直半径。当x1=y1时，可以简写为一个值。

2.多参数应用(参数顺时针生效，没有参数的角，从对角拿)

一个参数四个角的圆角

两个参数左上右下、右上左下

三个参数左上、右上左下、右下

四个参数左上、右上、右下、左下

3.圆形：正方形在border-radius大于或者等于宽高的一半时，可以是圆形。

4.椭圆形:长方形在border-radius大于或者等于50%,就是椭圆形。

5.跑道形:长方形在border-radius大于或者等于较短边长度的一半。

九、注意：在开发过程中，如果需要写圆角和阴影，不是靠前端量或者猜，需要UI设计师在设计图

中标注出具体的值。

渐变

1.概念：CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。在css3渐变出现之前，

线性 linear-gradient()

(1)概念：线性渐变是从“一个方向”向“另一个方向”的颜色渐变。

我们都是使用图片来制作渐变效果。

background:linear-gradient(方向,颜色,颜色,颜色);

渐变

正方向渐变

background:linear-gradient(to left, red , blue)

对角渐变

background：linear-gradient（to top right ，red，颜色，颜色）去右上角

角度渐变

0度从下朝上渐变，正数顺时针改变角度

deg角度单位

background: linear-gradient(10deg, red, blue)

默认从上到下渐变

可以写多个颜色

默认渐变均匀

可以通过to xxx 改变渐变方向 to right 从左到右

可以写多个颜色，颜色按照方向第一个向最后一个展示
可以不写方向，默认从上向下渐变（tobottom、180edg）
可以朝着某个方向渐变，to top、right、left、bottom；去xxx方向
可以朝着某个角落渐变，to +两个方向关键词
可以按照某个角度渐变，0deg为从下到上渐变，180度从上到下渐变，正数顺时针改变角度。负数逆时针。

渐变呈非均匀线性渐变

background: linear-gradient(to right,red 0%,yellow 20%,blue 100%);

百分比为改颜色出现的位置

background:linear-gradient(to left, red 56% , blue 78%)

径向渐变 radial-gradient

概念：径向渐变是从“一个点”向四周的颜色渐变。

 案例:  background:radial-gradient(渐变位置,渐变形状,渐变大小,渐变开始的颜色,...,渐变结束的颜色);

特点：

——渐变的前三个属性为渐变点，渐变形状，渐变大小，但是这三个参数为可选参数，可写可不写

——前三个属性，如果需要使用，需要添加浏览器前缀提供支持

——默认渐变位置为元素中心，默认渐变形状为椭圆形。在正方形中，椭圆形和圆形展示效果相同。

ellipse 椭圆形

circle 圆形

——渐变大小可以设置以下值

closest-side：最近边

farthest-side：最远边

closest-corner：最近角

farthest-corner：最远角

像素大小

百分比

——渐变大小和渐变形状不要同时使用

——径向渐变的不规则渐变写法

background:radial-gradient(closest-side at 80% 40%,red 0%,yellow 20%,blue 100%);

补充：上述写法需要加浏览器前缀，属于谷歌的专属写法。可以使用以下方式书写

background:radial-gradient(closest-side at 80% 40%,red,yellow,blue);

background:radial-gradient(渐变大小 at 渐变位置,渐变起始颜色,…,渐变终止颜色);

4.重复渐变

重复线性渐变 repeating-linear-gradient(red 0%,yellow 10%,blue 20%);

渐变图案从20%开始继续平铺，直到铺满。

重复径向渐变 repeating-radial-gradient(red 0%,yellow 10%,blue 20%);

渐变图案从20%开始继续平铺，直到铺满。

二、浏览器前缀

目的：某些CSS属性还只是最新版的预览版，并未发布成最终的正式版。而大部分浏览器已经为这些属性提供了支持，

但这些属性是小部分浏览器专有的；为了让这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。

-ms- IE浏览器

-webkit- 谷歌和苹果

-o- 欧朋

-moz- 火狐

过渡

transition

1.含义：css3的transition允许css的属性值在一定的时间区间内平滑地过渡,过渡需要触发条件。

2.语法

transition:

transition-property 过渡对象

transition-duration 过渡时间

transition-timing-function 过渡速率

transition-delay 延迟时间;;

——过渡对象 transition-property

具体属性具体哪个属性参与过渡

all 全部属性参与过渡

——过渡时间 transition-duration

——过渡速率 transition-timing-function

linear 匀速

ease 逐渐减速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

steps() 分步骤

cubic-bezier() 贝塞尔曲线 http://cubic-bezier.com/

——延迟时间(如果不需要，可以省略不写) transition-delay

3.注意事项：

(1)过渡需要触发条件

(2)过渡需要写给初始状态，否则返回时没有过渡效果。

(3)过渡是给同一属性的属性值的改变添加一个过程，display:block和display:none的切换时一瞬间的，所以过渡看不到效果。

(4)想要谁的属性变化有过渡效果，就把过渡加给谁。

2D

css 2d属性 transform

位移 translate（） position 也能完成位移
1. transform：translate（x，y） x为
2. 特点：
  1. 案例中x为水平偏移量，y为垂直偏移量
  2. 和position：relative类似，位置变化后任然占据原本空间，不会改变页面结构
  3. 参数可以为负数，第一个参数为正右，负左，第二个参数为正下负上
  4. 当第二个参数忽略不写时，默认第二个参数为0
3. 单方向位移
  1. transform：translateX（x）；左右水平位移
  2. transform：translateY(y) ; 上下垂直位移
  3. transform：translateX（X) translate（Y) ；
缩放 scale（）
1. transform：scale（x，y）
2. 特点
  1. 放大缩小为倍数
  2. 两个参数，第一个参数为宽度缩放比例，第二个参数为高度缩放比例
  3. 默认值scale（1,1），第二个参数可以省略，默认和第一参数相同
  4. 初始比例为1，大于1放大，小于1缩小为倍数，0消失，
  5. 值为负数，先缩小再放大，元素翻转
  6. 元素从中心点放大或者缩小仍占据原本空间大小，不影响页面整体布局。
3. XY单轴缩放
  1. transform：scaleX（x） ;宽缩放
  2. transform：scaleY（y）;高缩放
旋转 rotate（）
1. transform：rotate（）角度单位deg
2. 特点：
  1. rotate（）里边写角度，正数顺时针转，负数逆时针转
  2. 默认沿着2d转换原点转，默认在正中间
3. 沿着X轴Y轴转
  1. transform：rotateX（）
  2. transform：rotateY（）
倾斜 skew（）
1. 案例 transform：skew（X，Y）
2. 特点
  1. 第一个参数代表水平倾斜度数，第二个参数是垂直倾斜度数
transform 的多属性应用‘
1. 我们在使用transform写多个2d效果时，不能多次使用transform
2. 后写的会覆盖先写的
3. 写多个2d效果时，用一个transform，后跟多个参数，每个参数为一个属性
4. transform：translateX（X) translate（Y) ；
2D转换原点 transform-origin
1. 在2D效果中，是有一个默认参考点，2D缩放，旋转等特效都是参考这个转换原点，默认是元素中心点，可以通过transform-origin改变
2. transform-origin：center center；
  1. 第一个参数是X轴位置，第二个为Y轴位置
  2. 参数可以是像素大小，百分比，关键词
  3. 想要改变谁的原点就写给谁
  4. 可以是负数

3D

3d和2d区别

2d是一个平面，在2d中，我们拥有水平的X轴，和垂直的Y轴

但是3D是立体的，他比2D多一条轴，这条轴垂直于2D的平面，叫做Z轴。z轴可以看做2d平面拥有了厚度，从而变成了一个3D的立体图形，z轴半轴靠近电脑屏幕，z轴负半轴远离电脑屏幕。

景深 prespective 视觉效果上的3D，只是有近大远小的效果

日常生活中，我们在看一个物体时，有近大远小的视觉效果。让物体显得更加的立体，但是在页面中，元素是没有近大远小的效果，我们一般会给3D的父元素添加景深，从而使他们视觉上也拥有近大远小的效果。

注意：一般我们将景深设置为 perspective：1200px；视觉效果最佳

perspectiv-origin 改变3d观察点
1. 观察3d元素默认的角度 perspective-origin：center center ；中心
2. perspective-origin：left top 左上角
3. perspective-origin：100% 100% 右下角
4. 注意把景深加给谁，就把观测点加给谁
3D空间 transform-style
1. transform-style属性是3d空间一个重要属性，制定嵌套元素如何在3D空间中呈现给元素设置transsform-style：perserve-3d；之后这个元素就变成了一个3d空间。他的子元素就能展现出3d效果
3D属性
1. 3d位移
  1. transform：translate3d（tx，ty，tz）
    1. X轴位移
    2. y轴位移
    3. z轴位移
    4. translateX
    5. translateY
    6. translateZ
2. 3d旋转
  1. transform：rotate3d（x，y，z，a）
  2. X轴矢量
  3. y轴矢量
  4. z轴矢量
  5. 旋转角度‘
    1. 矢量主要为0 和1.0为不旋转，1为旋转
    2. 用rotate3d各个轴的旋转角度需要保持一致
    rotateX X轴旋转
    
    rotateY y轴旋转
    
    rotateZ z轴旋转
3. 3d缩放
4. transform：scale3d（x，y，z）
5. 参数1 2 3
  1. X轴缩放比例
  2. Y轴缩放比例
  3. z轴缩放比例
  4. scaleX（）X轴缩放比例
  5. scaleY（）同理
  6. scaleZ（）同理
    
    scaleZ（）和scale3d（）函数单独使用时没有任何效果，需要配合
    
    其他变形函数一起使用才会有效果。
    
    scalez相当于改变厚度，写给父元素

动画

animation

css3属性中有关于制作动画的三个属性

transform 具体什么动画效果

transition 过度

animation 动画

animation 和transition的区别

相同点：都是随着时间改变元素属性

不同点：

transition需要触发事件(hover事件或者click事件等)而animation不需要

transition触发后只能执行一次，而animation可以执行任意次数

在css3中明确规定animation是制作动画的

animation：动画名时间速率延迟时间执行次数运动方向动画状态
1. animation-name 动画名绑定动画
  1. 创建动画
    1. @keyframes xxx {
      
      0%{
      
      transform: translate(0,0);
      
      }
      
      100%{
      
      transform: translate(500px,500px);
      
      }
      
      }
      
      注意：如果需要在关键帧位置的参考点为初始位置，而不是上一帧所在位置
  2. animation-duration 单次动画持续时间
  3. animation-timing-function 动画速率
    1. linear 匀速
    2. ease 逐渐减速
    3. ease-in 加速
    4. ease-out 减速
    5. ease-in-out 先加速后减速
    6. steps（）分步骤
    7. cublic-bezier（）贝塞尔曲线http://cubic-bezier.com/
  4. animition-delay 第一次执行的延迟时间
  5. animition-iteration-count 执行次数
    1. number 具体次数
    2. infinite 无限次循环
  6. animition-direction 运动方向
    1. normal 正常方向
    2. reverse 反方向运行
    3. alternate 先正向再反向，交替运行
    4. alternate-reverse 先反向在正向，交替运行
  7. animition-play-state 动画运动状态
    1. running：运动
    2. paused：暂停

弹性盒子

概念：
在弹性盒中，拥有一条默认水平的轴和一条永远垂直于主轴的侧轴，弹性盒的子元素（也叫作弹性元素）默认沿着主轴排列

弹性盒 display：flex；写给父元素

主轴对齐方式 justify-content 写给父元素
1. flex-start 主轴起点对齐
2. flex-end 主轴终点对齐
3. center 主轴居中对齐
4. space-around 主轴环绕式分布
5. space-between 主轴两端对齐
改变主轴的方向 flex-direction 写给父元素
1. row 默认值横向
2. row-reverse 横向翻转
3. column 纵向
4. column-reverse 纵向翻转
主轴换行 flex-wrap写给父元素
1. 在弹性盒子中，默认不换行，如果子元素放不下，这些子元素一起缩小
2. 子元素特性：有剩余空间时默认不放大，空间不够时默认缩小
3. flex-wrap：
  1. nowrap：默认值主轴不换行
  2. wrap：主轴换行，主轴将变为多行
每行主轴的侧轴对齐方式 align-items 写给父元素
1. flex-start 每行主轴的侧轴起点地方对齐
2. flex-end 每行主轴的侧轴终点的地方对齐
3. center 每行主轴的侧轴中间对齐
4. baseline 行高基线对齐
5. 可以理解为一行内的对齐方式
侧轴整体对齐方式 align-content 需要flex-wrap：wrap；才能生效写给父元素
1. center 整体居中
2. flex-start 整体起点地方对齐
3. flex-end 整体终点地方对齐
4. space-around 每行环绕分布
5. space-between 每行两端对齐
6. 可以理解为行与行的对齐方式
控制单个弹性元素垂直对齐方式 align-self 写给子元素

flex-start 此弹性元素侧轴开始地方对齐

flex-end 侧轴结束的地方对齐

center 侧轴中间对齐

baseline 元素行高基线对齐

弹性元素排序属性 order写给子元素

order ： number ；越大越靠后默认为0 可以为负数

弹性元素如何分配空间 **** flex 复写属性写给子元素

默认 flex：0 1 auto；弹性元素特点 0 默认不放大，1 放不下了缩小，auto优先采用自己本身宽度

flex：flex-grow 是否放大 0：不放大 1：放大，放不下缩小（单个元素优先放大，放不下不会优先缩小）

flex：flex-shrink 是否缩小 1：放不下缩小 0：不缩小，放不下溢出缩小

flex：flex-basis 弹性元素长度 auto：优先自身宽度

头部和脚部固定中间滚动‘

多列

column-count 将元素分成几列
column-gap 列和列之间的间隔
column-rule 间隔线等同写边框
column-fill 列高度是否统一
1. auto 内容优先填充前一列
2. balance 默认值每列高度均一致，每列平分内容
column-span 多列标题，元素是否跨列（写给子元素，
1. all 跨列
2. none 不跨列
column-width 根据列宽分列
1. 和column-count 互相冲突，谁的列宽大谁生效==谁的列少谁生效

break-inset：avoid ；不允许流式布局分开显示。

移动端基础知识

1.什么pc端什么是移动端；
——pc端指的是在电脑设备上看到的页面。
——移动端指的是在平板、手机、手表等设备上看到的页面。
——很多网站为了更好的用户体验，pc端和移动端是两套不同的代码，通过检测设备类型，来响应对应的站点页面。
2.关于浏览器中的手机模拟器
——F12或者右键页面，点击检查。然后选择左上角小手机图标，点击变蓝后即可激活模拟器。
——手机模拟器包含以下几种功能
——切换手机型号（可以改变手机逻辑像素窗口大小）
——查看手机逻辑像素大小
——改变模拟器窗口大小比例（改变此大小只是变化模拟器大小，不会影响到逻辑像素）
——查看各个手机型号设备像素比DPR
——截图页面和截取页面长图(物理像素图)
3.物理像素(设备像素)
显示屏是由一个个物理像素点组成的，通过控制每个像素点的颜色，使屏幕显示出不同的图像。
屏幕从工厂出来那天起，它上面的物理像素点就固定不变了。即手机出厂时，屏幕上的像素点。
4.逻辑像素(css像素)
我们在做移动端时，所书写和参考的像素。
5.设备像素比(DPR)
物理像素和逻辑像素的比值就叫做设备像素比。同时他也是人们常说的几倍屏。
了解：
(1)在最开始的时候，逻辑像素和物理像素是1:1的，乔布斯在iphone4时，发布了视网膜屏，
这款屏幕在单位体积内，拥有了二倍的像素点(即400400的物理像素的大小内，拥有了800800的像素点)
使用两个物理像素点，来解析设计图中的一个逻辑像素点，来使页面更细腻。他们物理像素和逻辑
像素的比值就是设备像素比，这也是最早的倍屏。
(2)随着时代的发展，手机屏幕分别率越来越高，在单位体积内的像素点越来越密集。目前，市场
上已经有了2倍屏，3倍屏,四倍屏。
(3)我们知道这个概念是为了当我们拿到设计图时，知道按照多少像素去书写页面。
例如iphone12Pro 物理像素1170 dpr为3
那么我们在开发时，量出来的尺寸大小，全部除以3，来书写页面
6.视口
<1>布局视口
布局视口是指的网页的宽度，一般移动端页面默认都是布局视口，布局视口宽度往往都是980px;
他是为了解决早期pc端页面在移动端上的显示问题产生的。但是我们现在pc端和移动端项目往往是
两套项目，我们不再需要让pc端页面在移动端显示。所以这个不是我们最理想的开发视口。
<2>视觉视口
视觉视口是指用户在手机上能看到的网站的区域。这个区域大小基本上和手机屏幕窗口一致。简单的
说就是设备逻辑像素多宽我多宽。
<3>理想视口
理想视口是指对设备来讲最理想的视口尺寸。简单的说就是让布局视口和视觉视口保持一致。我们写页面的
时候，可以按照设备的逻辑像素去开发。
<4>如何设置理想视口

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

——width=device-width 宽度等于设备宽度
——initial-scale=1 初始缩放比例为1
——minimum-scale=1 最小缩放比例为1
——maximum-scale=1 最大缩放比例为1
——user-scalable=no 是否允许用户进行缩放=不允许
7.针对于具体某一手机的移动端布局流程（px固定布局）
<1>确定设计图出自哪个设备————为了获知设备像素比dpr
<2>通过设备像素比和量出的尺寸，来计算我们开发所需要的尺寸大小。（计算逻辑像素）
<3>引入理想视口
<4>引入相关资源，进行开发。
注意：这种写法为我们目前的一个过渡写法，目的是为了让你知道逻辑像素（css像素）和理想视口的作用。
此种布局方案只能适配一种设备，无法达到切换不同型号手机，页面仍能够满屏不出滚动条的效果。
二、移动端的几种布局方式
1.px像素布局(固定布局)（不推荐）
通过设计图尺寸和dpr算出css像素，进行页面布局。这种布局不能够根据设备的变换来适配不同的设备。
1.5 可切换固定布局（不推荐）
以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；
2.响应式布局（不主流）
设计初衷：
可以一套代码适配多端，不管是pc端设备还是移动端设备，都能够展示出较为完善的页面效果。
优势：
<1>面对不同分辨率设备灵活性强。
<2>能够快捷解决多设备显示适应问题。
劣势:
<1>兼容各种设备工作量大，效率低下
<2>代码累赘，会出现隐藏无用的元素，加载时间加长
<3>其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
<4>一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
响应式布局的实现————媒体查询
<1>概念：媒体查询可以让我们根据设备显示器的特性为其设定CSS样式。
媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
<2>媒体查询操作方式
对设备提出询问(表达式)，如果表达式为真，则此媒体查询下的css生效，如果表达式为假，
则忽略此媒体查询的css.
<3>具体格式
@media 设备类型 and(条件1) and(条件2) …{
当上方表达式都为真的时候，所需要响应的css
}
@media all and (min-width:320px) {
body { background-color:blue;}
}
<4>关于设备类型
媒体查询支持的类型有很多，以下几种类型为前端开发中，最常用的几种类型
all 所有设备
screen 显示器、笔记本、移动端（基本包含了全部的前端设备）
handled 便携设备，移动端
<5>注意事项
默认样式要写在最前边
<6>常用的一些表达式
/* 手机等小屏幕手持设备 /
@media screen and (min-width: 320px) and (max-width: 480px) {}
/ 平板之类的宽度 1024 以下设备 /
@media only screen and (min-width: 321px) and (max-width: 1024px) {}
/ PC客户端或大屏幕设备: 1028px 至更大*/
@media only screen and (min-width: 1029px) {}
/* 竖屏 /
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}
/ 横屏 */
@media screen and (orientation:landscape){对应样式}
3.弹性布局
4.等比缩放布局
5.混合布局(最常用)

移动端常用布局

1.弹性布局(100%布局) 拉勾网

页面多出现百分比和flex布局。可以一定范围内适配所有尺寸的设备屏幕及浏览器宽度。

特点：

(1)页面多出现百分比和flex

(2)关键的模块高度固定，宽度伸缩

(3)两侧重要模块写固定大小，中间空白区域伸缩有弹性。(中间这块尽量写flex:1或者百分比)

(4)图片宽度写百分比大小，高度不写。让他根据图片的宽度大小自适应。(注意装图片的父元素

也不要写大小，不然会溢出)

(5)文字内容模块流式，不要写宽高。

大白话翻译：尽量让页面Q弹一点，多用百分比和flex。宽度尽量用百分比，高度除了关键模块，能不写就不写。

文字模块尽量不写高度，让文字自己撑出高度。图片宽度写百分比，不要写固定高度。

2.等比缩放布局(rem布局) 网易新闻

思路:页面开发所有单位都用rem，rem他是相对根元素字体大小，一旦根元素字体大小发生变化，页面所有用rem的计量单位都会变。

理论上只要能够在改变页面宽度的时候，让我们的根元素字体大小也跟着改变。那么我们的页面就能够实现等比缩放。

<1>媒体查询+rem实现等比缩放布局

可以实现等比缩放。但是需要达到触发条件，并不是实时的等比缩放。一般不考虑

<2>rem+vw实现等比缩放布局

思路:

通过上述思路，我们又学习了vw，vw为视窗宽度单位，只要窗口大小改变，1vw所代表的值就会改变。

我们又希望根元素字体大小随着窗口的改变而改变，那么我们可以将根元素字体大小设置为vw作为单位。

那么问题来了————我们根元素字体大小设置为多少vw? 我们写页面的时候又怎么书写数值？

答案：html{

font-size:(10000/设计图大小)vw;

}

之后量多少，只写除以100使用即可，记得单位是rem;

特点：可以使我们的页面通过vw和rem的特性实现等比缩放布局。但是毕竟我们设置了

页面的根元素字体大小。如果在开发时，有文字的话，都会变成这个字体大小。

所以说在rem布局中，我们只要有文字，都需要重新定义字体大小。

rem和vw换算梳理开发思路：

1.我们拥有一张640px的设计图

2.我们想让这张640px的设计图在任何屏幕大小中都能够满屏显示不出滚动条

3.那么就是期待在屏幕中100vw==640px;

4.1rem=100px; 6.4rem=640px;

整理条件 100vw640px 6.4rem640px;

\5. 100vw==6.4rem;

\6. (100/6.4)vw=1rem;

7.(10000/640)vw=1rem;

8.总结：拿到设计图后，直接用10000/设计图大小，算出来xxxvw;以后量多少px，直接除以100,写rem即可。

1rem==100px;比1rem=16px;好计算

100vw=640px; 1rem100px100vw/6.4px;

1rem==?vw; 1rem==10000/640

问题1：为什么1rem==100px;

答：1rem=100px比1rem=16px 好计算

思路2:我们想要我们640px的设计图在任何手机中都是满屏，那么100vw==640px;

如果是720px的设计图，那么100vw==720px

如果是1120px的设计图，那么100vw==1120px;

100vw1120px; 1rem100px;

简化 (100/1120)vw100px 1rem(100/11.2)vw; 1rem==(10000/1120)vw;

1rem==?vw;

3.混合布局(等比缩放布局和弹性布局混着用)

其实就是rem+vw+弹性布局

在弹性布局中，我们个别区域还是需要写上一个固定大小，之前我们是用px来写这个固定大小，现在我们

可以用rem来写这个参数。这样会使我们页面显得更加具有弹性。（能用flex用flex,能用百分比就用百分比，

需要写具体大小时，我们就用rem做单位。）

二、页面开发单位

1.px 逻辑像素(css像素)大小固定大小

2.em 相对父元素字体大小

3.rem 相对根元素字体大小

4.vw 视窗宽度 1vw视窗宽度的百分之1 100vw视窗宽度的百分之100

5.vh 视窗高度 1vh视窗高度的百分之1 100vw视窗高度的百分之100

6.百分比继承父元素的百分之多少。

网格布局

一、grid 网格布局
	1.含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。
	2.grid与flex之间的区别
	(1)相同点：都是可以指定容器内部多个项目的位置。
	(2)差异点：flex布局是轴线布局，只能指定“项目”针对于轴线的位置，可以看做是一维布局。
	grid布局则是将容器划分为行和列，产生单元格，然后指定“项目”所在的单元格，所以可以看做二维布局。
	3.grid内部各项的概念(容器、项目、行、列、单元格、网格线)
	(1)容器：一个案例中最大的盒子，可以理解为父元素，即写了display:grid;的元素。
	(2)项目:一个案例中，最大的盒子里边的内容，可以理解为子元素。即写了display:grid;元素的第一层子元素。
	(3)行和列:容器中水平的区域称为“行”，垂直的区域称为“列”。
	(4)单元格：行和列交叉的区域，称为"单元格"。
	(5)网格线：划分网格的线叫做“网格线”，水平的网格线划分出行，垂直的网格线划分出列。
	(6)网格线的规律:
	一行两列两横三竖
	两行一列三横两竖
	两行两列三横三竖
	n行n列 n+1横n+1竖
	4.grid布局中的属性
	(1)属性分类:网格布局的属性分为两类：一类容器属性，一类是项目属性。
	(2)容器属性(写给父元素)
	1.触发网格布局 display:grid;
	grid 触发网格布局(具有块元素特性)
	inline-grid 触发网格布局(具有内联块元素特性)
	2.行列划分
	——(1)grid-template-rows 划分行
	——(2)grid-template-columns 划分列
	——(3)案例：三行三列
	grid-template-rows:100px 100px 100px;
	grid-template-columns:100px 100px 100px;
	——(4)可以定义多个属性值，定义分几行几列，每个参数为行列的宽高。
	允许不占满或者超出grid容器定义的大小。
	——(5)属性值:
	——《1》像素单位取值 100px 100px 100px;
	——《2》百分比取值 25% 25% 25% 25%;
	——《3》关键词auto 70px auto 70px;(auto占据容器分配后的剩余空间)
	——《4》关键字fr 1fr 1fr 1fr;(将容器划分份额，每行或每列占几份)
	——《5》功能函数 repeat(5,20%) 第一个参数为平铺几次，需要平铺的内容
	——《6》功能函数关键字 repeat(auto-fill,份额) 根据他的份额，自动计算可以平铺几次
	——《7》minmax()功能函数规定参数的最大值和最小值。
	——《8》划分网格线案例如下:(一般此属性搭配grid-row和grid-column一起使用)
	grid-template-rows:[x1] 100px [x2] 100px [x3] 100px [x4];
	grid-template-columns:[y1]100px [y2] 100px [y3] 100px [y4];
	3.划分区域 grid-template-areas (一般此属性搭配grid-area一起使用)
	案例:grid-template-areas:
	“. . .”
	“b b .”
	“a1 c c”;
	注意:划分区域时，每个区域块可以是正方形可以是长方形，但是不能是梯形或者斜着连线。
	“.”在划分区域时是占位符，他可以斜着来，代表此位置空间不可用。
	4.项目排列顺序(排列方向) grid-auto-flow
	row 子项优先沿着行排列，排完第一行排第二行
	column 子项优先沿着列排列，排完第一列排第二列
	5.单元格内项目排列方式
	justify-items 单元格内项目横向对齐方式
	align-items 单元格内项目纵向对齐方式
	*复写形式:place-items:垂直水平;
	——属性值
	start 单元格开始地方对齐
	end 单元格结束地方对齐
	center 单元格居中
	stretch(默认值) 不写宽高时，拉伸内容至铺满单元格
	6.项目整行和整列的对齐方式
	justify-content 项目横向对齐方式
	align-content 项目纵向对齐方式
	*复写形式:place-content:垂直水平;
	——属性值
	center 居中
	space-around 环绕式
	space-between 两端对齐
	start 开始对齐
	end 结束对齐
	7.行列间距和place-content有冲突，一般不会同时使用
	grid-row-gap 网格行间距
	grid-column-gap 网格列间距
	*复写形式:grid-gap:行间距列间距;
	(3)项目属性(写给子元素)
	1.grid-row(复写形式，grid-row:x1/x2;第一个参数规定网格行开始边，第二个参数规定网格行结束的边)
	grid-row-start 参数规定网格行开始边
	grid-row-end 参数规定网格行结束的边
	2.grid-column(复写形式，grid-column:y1/y2;第一个参数规定网格列开始边，第二个参数规定网格列结束的边)
	grid-column-start 参数规定网格列开始边
	grid-column-end 参数规定网格列结束的边
	3.grid-area 分配区域

一、BFC 块级格式化上下文

作用：用来强化元素的作用块，解决高度塌陷或者浮动造成的影响。

如何触发bfc?

1.overflow属性，最常用的为hidden;

2.float,不包括none;

3.position:absolute;和position:fixed;

4.display:flex;

5.display:inline-block;

二、background-clip 背景图显示区域

background-orgin 背景图定位原点

——content—box 内容区域

——border-box 边框区域

三、鼠标划过时，图标变为小手的形状a：hover{cursor:pointer}
| *复写形式:place-items:垂直水平; |
| | ——属性值 |
| | start 单元格开始地方对齐 |
| | end 单元格结束地方对齐 |
| | center 单元格居中 |
| | stretch(默认值) 不写宽高时，拉伸内容至铺满单元格 |
| | 6.项目整行和整列的对齐方式 |
| | justify-content 项目横向对齐方式 |
| | align-content 项目纵向对齐方式 |
| | *复写形式:place-content:垂直水平; |
| | ——属性值 |
| | center 居中 |
| | space-around 环绕式 |
| | space-between 两端对齐 |
| | start 开始对齐 |
| | end 结束对齐 |
| | 7.行列间距和place-content有冲突，一般不会同时使用 |
| | grid-row-gap 网格行间距 |
| | grid-column-gap 网格列间距 |
| | *复写形式:grid-gap:行间距列间距; |
| | (3)项目属性(写给子元素) |
| | 1.grid-row(复写形式，grid-row:x1/x2;第一个参数规定网格行开始边，第二个参数规定网格行结束的边) |
| | grid-row-start 参数规定网格行开始边 |
| | grid-row-end 参数规定网格行结束的边 |
| | 2.grid-column(复写形式，grid-column:y1/y2;第一个参数规定网格列开始边，第二个参数规定网格列结束的边) |
| | grid-column-start 参数规定网格列开始边 |
| | grid-column-end 参数规定网格列结束的边 |
| | 3.grid-area 分配区域 |