2022年7月5日 HTML基础知识
一.路径的使用
1.绝对路径的使用:表示含有盘符的路径地址
==-不建议在服务器(工作)中使用==
-补充：插件的名字:Image preview（在编辑器代码前显示图片）
二.相对路径的使用
同级找同级元素:目标文件的名称
父级找子级元素:目标文件的文件夹名称/目标文件的名称
子级找父级元素:../目标文件的名称
三.常见的命令
./ 表示当前目录
../ 表示跳出当前文件夹返回上一级
自定义列表（区别于有序和无序，自定义必须重新写dl）
dl>dt+dd(dt:名词，dd：名词的解释)
………………………………………………………………………………………
选择注释的快捷键：Alt+shift+A
生成固定格式的快捷键：shift+！
Ctrl+D：选择下面相同的部分
………………………………………………………………………………………
四.html常用标签
标记也可以称为标签或者元素,常见的叫法是单标签和双标签
五.html特殊字符
&It; < 小于号或显示标记
>； < 大于号或显示标记
&； & 可用于显示其他特殊字符
"； " 引号
®； 已注册
©； 版权
&trade； 商标
 ； 不断行的空白（不加分号可行）
2022年7月6日 表单和css基础
一:注意点
1.超链接属性：target：（self替换当前页面；blank：新开页面）
2.直接在头部书写base target=blank 一次性定义当前html文件的所有超链接打开方式为新开窗口，省的在超链接那定义属性
3.div:划分区域，没有具体含义，用作网页的盒子实现页面布局
span:实现页面横向跨越布局，横向一连串，没有具体的含义，包裹文本内容。
4.标签嵌套
P标签和h标签不能嵌套自己，h可以嵌套p，p不可以嵌套h
元素类型：块级元素（div）可以嵌套行内元素（span）
标签嵌套可以通过>实现，例如a>img
5.表单
网址中的？表示发送数据成功，后面携带参数
表单的两种提交方法：post和get ，Post比get安全，在地址栏中不会携带参数
Input 标签里的type属性下的button不会提交表单，需要绑定,而button标签里会默认提交表单
type=radio 单选框（name值设置为一样，可以实现只能选一个）
type=checkbox 复选框 checkbox默认是未选中的，若想默认选中，给其加上属性及属性值：checked="checked"即可（可以简写成checked） eg:<input type="checkbox" checked>
Placeholder 不占位置，用户输入信息自动消失（文字提示）
Value 占位置，用户输入前得先把信息删除（文字提示），注意：文本框类型为password时，不推荐使用value。
Alert（‘’）弹窗
注意：如果需要修改placeholder内容的颜色，需要加上浏览器前缀
针对不同版本和浏览器时会有不同的写法，需要添加相应的后缀
注意：
1、WebKit, Blink, Edge浏览器等需要带上-webkit-前缀，且是双冒号，写的时候还要带上input
2、针对火狐浏览器则有两种写法，一种是针对低版本的，一种是针对高版本的，二者都需要带上-moz-前缀。要点1：火狐低版本的使用冒号（：），而高版本的使用双冒号（：：）；要点2：火狐浏览器不需要像webkit内核那样要带上input。
3、由于placeholder属性只在IE10+才支持，因此，针对IE10、IE11的写法是加上-ms-前缀，使用的是冒号（：），需要带上input
特别强调：冒号与双冒号的问题，还有是否需要加上input
eg：
Css样式表：行内，内部，外部
Css语法组成：选择器{声明}/选择器{属性:属性值}
选择器：修饰的对象（eg：标签）声明：包含属性和属性值，用：隔开。
有多个声明，每个声明用分号；隔开，顺序不区分。
二.CSS样式表的创建方式:行内、内部、外部
语法组成:选择器{属性:属性值}
一:行内式样式表创建
1.需要在标签内部创建样式表
2.书写style属性,在属性值里面书写声明即可
二:内部样式表的创建
1.需要在头部文件中创建style标签
2.在标签内书写规范的css语法即可
三:外部样式表的创建
1.在外面创建一个后缀名为.css的文件
2.在文件中书写规范的css代码即可
三.需要引入外部的样式表
第一种方式(常用): link标签
第二种方式(了解):
需要在头部中创建style标签
在标签里面书写 @import url('路径')
四.注意外部引入的区别
link标签引入的时候HTML和CSS同时加载
@import方式引入先加载HTML后加载CSS
@import方式在后期学习模块化开发按需引入很常用
1.从属关系: link是html的标签,不仅可以加载CSS文件,还可以定义RSS、 rel连接属性等;而@import是css的语法，只有导入样式表的作用。
2.加载顺序:页面被加载时，link会将css和html同时被加载;而@import引入的 CSS将在页面加载完毕后被加载。
3.兼容性: @import是CSS2.1才有的语法，所以只能在IE5以上才能识别;而link是HTML标签,所以不存在兼容性问题。
4.DOM: javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
5.link方式的样式权重高于@import的权重。
五:练习样式表的创建（考虑权重的问题）
有一个div盒子 需要使用是那种样式表同时给当前div添加样式 观察最终文本的字体颜色
思考三种样式表的使用场景
六.基本选择器的分类:标签、class、id、通配符、群组选择器
（一）.标签选择器
1.语法:可以把HTML中的所有标签看成是选择器进行选择修饰
2.常见的标签选择器:div、p、span、ul、li、ol...
（二）:id选择器
1.语法
需要在标签内添加id属性和属性值
在样式表中通过 #id属性值{}
2.作用:在网页布局中通常用来表示网页的最外围结构,建议在一块布局中只使用一次
（三）:class选择器(类选择器)
1.语法
需要在标签内添加class属性和属性值
在样式表中通过 .class属性值{}
2.作用:没有强制的要求 可以用来设置一类或者是单个需要添加样式的声明
（四）:通配符(选择到页面中的所有标签)
1.语法: *{margin:0;padding:0} 清楚默认内外边距(盒模型)
2.作用:页面布局中浏览器和标签都是有默认间距的 8px
（五）:群组选择器
1.语法:选择器1,选择器2,选择器3{声明}
2.作用:选择到相同声明的选择器放在一起书写 简写代码
七.层级选择器的使用:后代选择器(包含)、子级选择器、相邻一个兄弟、相邻全部兄弟
(一):后代选择器(包含选择器)
1.语法:父级选择器 子级选择器{声明}
2.作用:可以通过父级元素选择到相对应的子级选择器
（二）:子代选择器
1.语法:父级选择器>子级选择器
2.作用:选择到父级元素下面的直接子级元素 爷爷的直接孩子
（三）:相邻一个兄弟
1.语法:兄弟标签+下一个相邻兄弟
2.作用:表示通过哥哥选择到后面的一个兄弟
（四）:相邻所有兄弟
1.语法:兄弟标签~后面所有相邻兄弟
2.作用:表示通过哥哥选择到后面的所有兄弟
版心居中：margin：0 auto；（直接margin：auto也可行）
八：超链接标签的使用
超链接：用户点击标签可以发生跳转
1.标签名称: a
2.默认样式
字体有颜色(颜色会进行改变)
默认有下划线
鼠标指针悬停显示手型(引导用户点击)
3.属性
href 表示连接地址
title 提示文本
target 控制跳转页面的打开方式
_self 表示覆盖原窗口
_blank 表示打开新窗口
4.拓展
在头部文件中书写 base标签
在标签内书写属性即可
eg：<base target="_blank">
权重（css中用四位数字表示权重，权重的表达方式如：0，0，0，0)
类型（元素）选择器：0001
Class选择器（类选择器）：0010
id选择器：0100
伪类选择符：0010
包含选择符：为包含选择符的权重之和
属性选择符：0010
伪元素选择符：0001
内联（内部）样式：1000
选择器权重：id>class>标签>包含
内联样式即行内样式表的优先级最大
外部样式和内部样式的优先级取决于书写顺序，在下面的优先级高（就近原则）
注意：封装的自定义标签(类选择器)>内部和外部
页面布局：默认边距为8px。
通配符（选择到页面中的所有标签）
语法：*{margin:0;padding:0}(取消默认8px边距，样式)
2022年7月7日 浮动&盒模型
一.css选择器快捷操作
div#id属性 id选择器
div.class属性 class属性值
二.浮动属性的使用
1.作用:可以元素在网页中的位置(如果盒子默认是上下排列的可以改为水平的)
2.属性:float 使xx漂浮/浮动
3.属性值:left、right、none(默认值,不浮动)
4.浮动的特点
- 浮动只能控制元素在水平方向上移动,会使元素脱离文档流,初始位置不存在,破坏正常的网页布局
- 浮动停止漂浮的条件
- 碰到父级的包含框就会停止浮动（超出父级）
- 碰到前面一个含有浮动属性的元素也会停止浮动
- 当子级元素比父级元素宽度多的时候,最后一个子级元素往下移动直至找到足够的空间（空间不够，上下走，类似气球）
5.拓展
- 文档流(普通流、普通层):正常的网页布局,从左到右 从上到下
- 浮动流(浮动层):会存在于当前文档流的上方,从上帝视角看不见（飘起来了）
注意：浮动只能盖住盒子，不能盖住文字（可以设置环绕型文字，所有环绕都可以，加标签就行）
三.标准盒模型的使用
1.盒模型的概念:所有的标签都可以看成是一个盒子,盒模型是可以设置元素与元素之间的间距
2.盒模型的组成:
- 内容区域 content => 快递物品 篮球
- 内边距 padding => 缓冲物品
- 边框 border => 快递盒
- 外边距 margin => 多个快递盒之间的间距
四.外边距margin的使用
1.margin的作用:主要是用来设置"同级"元素之间的位置间距
2.属性值的写法:可以使用数值加单位px(网页中最常用的单位像素)
3.外边距margin的属性值个数
- margin一个属性值:上下左右
- margin两个属性值:上下 左右
- margin三个属性值:上 左右 下
- margin四个属性值:上 右 下 左
4.属性值的方向设置(顺时针)
- margin-top
- margin-right
- margin-bottom
- margin-left
5.关于外边距的固定搭配使用
- *{margin:0;padding:0}
- 版心选择器{margin:0 auto}
6.margin常见的bug问题
- 当父级元素下面只有一个子级元素的时候 给子级元素设置margin-top会错误解析到父级元素
解决方法：
- 子级元素设置浮动
- 给父级元素设置边框属性
- 给父级元素设置文本溢出属性(可以解决布局的99%bug) 文本溢出属性：overflow：hidden
- 有上下两个盒子 分别设置margin-top/bottom 会错误解析之间的最大值
解决方法：
- 只设置一个值就好了
五.盒模型中内边距padding的使用方法
1.内边距作用:主要设置父级与子级元素之间的位置间距
2.padding的属性值:数值和单位(像素px)
3.padding的设置位置
padding值：
- 添加在父级元素上(所有的子级元素间距都是一样的):会撑大当前盒子的宽高大小,为了不破坏初始布局,需要在盒子宽高上减去相应的
- 添加在子级元素上(控制的是每一个子级元素的间距):
4.内边距padding的属性值个数
- padding一个属性值:上下左右
- padding两个属性值:上下 左右
- padding三个属性值:上 左右 下
- padding四个属性值:上 右 下 左
5.属性值的方向设置(顺时针)
- padding-top
- padding-right
- padding-bottom
- padding-left
6.关于内外边距设置负值的问题?
- 内边距 不可以 （eg:缓冲物不能到快递盒外面去）
- 外边距 可以 （eg:两个快递叠在一起）
7.关于外边距的固定搭配使用
*{margin:0;padding:0}
选择器{margin:0 auto}
2022年7月8日 边框和文本属性
一.昨日回顾：
1.CSS样式表的创建
2.优先级:行内样式表的优先级最高,内部和外部取决于书写顺序
3.浮动属性
4.盒模型
- 概念
- 组成
- 内外边距的使用
二.盒模型属性的总结
1.概念:设置元素之间的间距
2.组成部分:content、padding、border、margin
3.盒模型的分类
- 标准盒模型
- 盒子自身的大小:content+paddinng+border
- 盒子真实的大小:content+paddinng+border+margin
- 怪异盒模型
- 盒子自身的大小:content(paddinng+border)
- 盒子真实的大小:content(paddinng+border)+margin
4.如何形成怪异盒模型(IE)
- 属性:box-sizing
- 属性值:content-box(标准)/border-box(怪异)
- 特点:padding和border都是长在盒子内部的并且不会撑大盒子的宽高大小
三.边框属性的使用
1.组成边框的样式
边框宽度 border-width
样式 border-style
边框颜色 border-color
2.边框属性的属性值
- 边框宽度:数值加单位(px)
- 边框样式:solid(实线) dashed(虚线) dotted(点线) double(双实线)
- 边框颜色
- 英文单词:yellow、green、red...
- 十六进制:
- 以#开头,后面接六个字符(0~9,a~f) #1234ab
- 当后面的六个字符相等的时候可以简写成3个
- eg:#778899(#789) #000 #fff #ccc
3.边框属性的简写方式
- 属性:border
- 属性值:border-width border-style border-color
4.通过需求拓展边框其他属性的用法
改变顶部边框的颜色:border-top-color
右侧所有的样式:border-right
清除标签的自带边框:border:none/0
根据上面的知识尝试绘制三角形（代码展示如下）
html{
background-color: pink
}
div{
width: 0;
height: 0;
border: 100px solid #000;
border-top-color: transparent;/* 透明 */
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
四.颜色设置
十六进制，以#开头，后面接六个字符（0-9，a~f）
当后面六个字符相同时，可以简写为3个
eg：#778899（#789），#ffffff（#fff）， #000000（#000）
五.文本属性
文本大小的设置
1.属性:font-size
2.属性值:数值加单位(网页中常用的单位像素px)
- 在浏览器中默认的字体大小是16px
- 由于浏览器存在差异,官方规定最小的字体只能是12px
- 除了px单位还有很多其他可用单位
- pt、em、rem、%、deg、vw、vh、vmax、vmin、rpx
- em:相对单位,相对有父级元素计算 常用于首
字体类型属性
1.属性:font-family
2.属性值
- 在浏览器中默认的字体类型是微软雅黑(商用收费),win系统默认的是宋体/新宋体
- 中文属性值:建议加引号(双/单)
- 英文属性值:当属性值只有一个英文单词的时候可以省略引号,有多个必须添加引号
- 在使用设置的字体时候需要在本地中有下载字体包
六.加粗和倾斜的属性
加粗属性
1.属性:font-weight
2.属性值
- 设置100-900之间的整百数(100-500表示正常字体,600~900表示加粗字体)
- bold/bolder 加粗的/更粗的
- 重要:normal 清除默认的加粗样式
倾斜属性
1.属性:font-style
2.属性值
- italic(斜体字)
- oblique(倾斜的文字)
- 重要:normal 清除默认的倾斜样式
七.行高属性的使用
垂直方向对齐方式
1.属性:line-height
2.解释:基线,多行文本之间从第一行顶部到第二行顶部的间距
3.重点:设置行高和容器高度一样的时候,单行文本就会在垂直方向居中显示
水平方向对齐
1.属性:text-align
2.属性值
- left、right、center
- justify 两端对齐
八.文本的复合属性的使用
复合属性写法
1.属性:font
2.属性值:font-weight font-style font-size/line-height font-family
- font-weight font-style 没有需求可以不写并且位置可以互换
- font-size/line-height 不可以换位置
- font-family无论是否有需求都必须写
代码示范如下:
九.字体颜色及其他属性
字体颜色
1.属性:color(不要写成font-color)
2.属性值:
- 英文单词、十六进制
- rgb/rgba(red,green,blue,alpha) 透明度0~1
- 十六进制透明度 #00000099 取值10~99
- opacity 0~1
文本修饰属性
1.属性:text-decoration
2.属性值
- underline 下划线
- overline 上划线
- line-through 删除线 del、s
- 重要:none 清除默认的下划线样式
首行缩进
1.属性:text-indent
2.属性值
- px、em
- 首行缩进属性只针对于第一行文本起作用
- 只能在块级元素中使用(设置宽高大小的盒子)
中文汉字的间距设置
1.属性:letter-spacing
2.属性值:px
问题注意点
1.路径地址问题: 父级 子级
2.单词错误: ul/u1 0/o text/test main/mina form/from class/calss header/headr
3.取名规范: box200
十.背景属性
背景颜色属性
1.属性:background-color/background
2.属性值:英文单词、十六进制、rgb/rgba
背景图片属性
1.属性:background-image
2.属性值:url(路径)
3.特点
- 当容器比背景图片大的时候,图片会平铺 铺满整个盒子
- img图片是结构,占位置,背景图片是css样式需要容器支持不占位置的
- 如果背景图片大于容器的宽高,也只会显示和容器一样的大小区域
背景平铺属性
1.属性:background-repeat
2.属性值
- repeat 默认值
- no-repeat 不平铺
- repeat-x/y
背景定位属性
1.属性:background-position(定位)
2.属性值:x y（可以给负值）
- x:left right center
- y:top bottom center
- x和y轴也可以使用坐标值
背景固定属性(大型游戏)
1.属性:background-attachment
2.属性值
- scroll 默认值 表示滚动
- fixed 固定 固定在浏览器窗口里面，固定之后就相对于浏览器窗口了
简写方式
1.属性:background
2.属性值:颜色 图片 平铺 定位 固定
十一.列表属性
有序和无序列表的默认样式是有兼容问题的,一般都是不用的,需要清除掉
1.属性:list-style
2.属性值:none
十二.css属性的继承
CSS的继承性是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。
具有继承性的相关属性：font-family, font-size, font-style, font-weight, font, letter-spacing,line-height，text-align, text-indent，list-style等
2022年7月11日 文本溢出
一.昨日回顾
1.css基本属性
2.文本属性
3.背景属性
4.列表属性
二.背景定位技术
疑问:在网页中有很多的小图标,如何优化处理使图标加载更快
解答:将页面中的所有小图标放在一张大的图片上,导入大图片,需要使用背景定位技术移动图片的位置即可
背景定位技术（图片整合）
1.原理：把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用
2.优点:
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点:
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
三.图片整合技术(css sprites)
1.别名:精灵图、雪碧图
2.原理:background-position
3.关于图片整合技术的优缺点
- 优点:加载次数减少的 服务器请求次数减少 压力就更小
- 缺点:当图标过多的时候比较麻烦 量取位置不方便
- 阿里巴巴矢量图标库
四.文本溢出属性
需求:在一个固定宽高的盒子内,以下文本内容较多会如何显示
1.纯数字
2.英文单词或者字母
3.中文汉字
文本溢出属性
1.属性:overflow
2.属性值
- visible 默认值 正常显示，内容不会被修剪，会呈现在元素框之外；
- hidden 表示超出容器的区域隐藏，并且其余内容是不可见的；
- scroll 表示内容超出的时候会显示滚动条，即内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容
- auto 表示文字超出显示滚动条，没有超出不显示；即如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
3.拓展:overflow-x/y
拓展：五.单行文本超出显示省略号
1.容器一定要设置固定的宽高大小 width：value；
2.单行文本需要强制性的在一行显示 white-space：nowrap;
3.超出去的文本隐藏起来 overflow：hidden；
4.隐藏的文本变成省略号 text-overflow：ellipsis;
2022年7月12日 元素类型
一.元素类型的分类:块元素、行内元素、行内块元素
1.块元素的使用:块级元素、块状元素、块元素
常见的块元素:div、p、h、ul>li、ol>li,dl>dt+dd
2.块级元素的常见特点
块级元素可以直接设置宽高大小,通常都是以盒子的方式在浏览器中显示的
块级元素默认是独占一行的,会上下排列
为了嵌套其他标签或者是其他元素类型作为盒子实现网页布局
二.行内元素的使用:行内元素、内联元素
1.常见的行内元素:a、span、i、em、b、strong
2.行内元素的常见特点
- 行内元素无法直接设置宽高大小,宽高由文本内容撑开的。
- 行内元素默认在一行内逐个显示。
- 常见bug:设置垂直方向的margin值是没有效果的。
三.行内块元素的使用:之前根据css的显示分类第三种元素类型叫做可变元素(根据上下文的关系进行显示方式)
1.常见的行内块元素:input、img
2.行内块元素常见的特点
- 可以直接设置宽高大小 => 块级元素
- 可以在一行内逐个显示 => 行内元素
- 拥有了块级元素设置宽高大小,行内元素在一行显示的共同特点
四.问题:所有的行内块都会以基线对齐的(虚拟线)
解决:vertical-align:top\bottom\middle（基线对齐属性）;
（要使行内块改变基线对齐，成为居中对齐，可以拿一个参照物（例如span标签），vertical-align:middle）
拓展：五.实现img结构居中对齐
1.在父级元素上设置text-align:center控制图片水平方向居中
2.在img后面设置任意标签(不要有换行)
3.给标签转换成行内块元素(宽度为0 高度为100%)
4.将图片和辅助线都设置居中对齐 vertical-align:middle
六.元素类型的转换
1.属性:display(显示方式)
2.属性值:官方有19个属性值,常用的只是两三个
- block 块,将其他的元素类型转换为块级元素,使其具有块级元素的特点(a=>块级)
- inline 行内,将其他的元素类型转换为行内元素,使其具有行内元素的特点
- inline-block 行内块,将其他的元素类型转换为行内块元素,使其具有行内块元素的特点（可以实现浮动，但不脱离文档流）
- list-item 了解 列表项目(有序无序) 和转换成块级元素的效果是一样的
- none 无、隐藏(不占位置的)
display的属性值有18个属性值，甚至更多，display：table-header-group/table-footer-group/flex inline-flex/table/table-cell/table-caption.......
3.拓展:浮动属性不仅可以让元素脱离文档流,还默认将元素类型转换为行内块元素
4.重点:block表示块级 还可以显示作用 和none形成一对应用
七.总结none的用法
- border:none 清除边框
- list-style:none 清除列表样式
- text-decoration:none 清除下划线
- display:none 隐藏显示元素
- background:none 清除背景
- outline:none 点击文本框的显示样式
- float:none 不浮动
八.动态伪类选择器:表示输入移入文字的时候状态的变化
1.a:link{color: red;} /* 未访问的链接状态,必须给a */
2.a:visited{color: green;} /* 已访问的链接状态,必须给a */
3.a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给 */
4.a:active {color: yellow;} /* 鼠标按下去时的状态,必须给a */
5.注意
- 动态伪类选择器使用的时候顺序不能乱
- 只需要记住一个hover即可
6.说明
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同，只有鼠标划过变化颜色
六.hover的常见用法
hover的常见用法:表示鼠标移入悬停时候触发的效果
1.改变自己的状态 自身选择器:hover{}
2.通过父级改变子级的状态 父级选择器:hover 子级选择器{}
3.通过兄弟改变后面一个兄弟元素的状态 兄弟选择器:hover +相邻一个兄弟选择器{}
4.通过兄弟改变后面所有兄弟元素的状态 兄弟选择器:hover ~相邻所有兄弟选择器{}
七.问题:图片会默认向下撑开3~6px的间距
解决：
- 转换为块级元素
- 基线对齐 vertical-align:top
八.表示ul li 下的第一个孩子
九.垂直对齐 vertical-align
只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性
| 个数 | 属性 | 说明 |
|---|---|---|
| 1 | vertical-align：baseline； | 默认值 baseline基线 |
| 2 | vertical-align：middle； | 垂直在line-height范围居中对齐 |
| 3 | vertical-align：top； | 垂直方向上在line-height的顶端对齐 |
| 4 | vertical-align：bottom； | 垂直方向上在line-height的底端对齐 |
| 5 | vertical-align：text-top； | 垂直方向上在文字的顶线对齐 |
| 6 | vertical-align：text-bottom； | 垂直方向上在文字的底线对齐 |
2022年7月13日 定位&锚点
一.昨日回顾
1.元素类型的分类:块、行内、行内块
2.元素类型的转换:
3.垂直居中:
4.文本溢出属性
5.清除默认样式的属性设置
6.css的引入方式
二.今日大纲
1.定位属性
2.锚点属性
3.透明属性(兼容)
三.定位属性
1.定位的作用:控制元素在浏览器中的位置
2.生活中的案例
- 把大象放进冰箱需要几步:打开、放进去、关闭
3.定位需要的条件
- 大象:需要移动位置的对象
- 冰箱:参照物
- 方向:前端方向
4.定位的属性:position 定位、位置
5.定位的属性值
- static 默认值 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- sticky 粘性定位
四.相对定位属性的使用
1.属性:position
2.属性值:relative
3.相对定位属性的特点
- 相对定位的参照物是元素初始位置
- 不会脱离文档流,初始布局不会被破坏
4.之前学习的移动元素方法
- margin外边距:需要和父级包含框相接触
- 定位没有方向上的限制
5.作用:为了给绝对定位提供参照物的(工具人)
五.绝对定位属性的使用
1.属性:position
2.属性值:absolute
3.绝对定位属性的特点
- 绝对定位的参照物(父相子绝)（把东西钉上去）
- 当父级元素有定位属性的时候就会相对于父级元素进行移动(eg:当父元素的定位方式是 relative或absolute或fixed，子元素定位方式是absolute，bottom是0,表示子元素的底边与父元素的底边距离为0。)
- 当父级元素没有定位属性的时候,就会往上级查找,直至找到浏览器
- 绝对定位会脱离文档流,破坏了正常的网页布局
个人总结：不一定要父相子绝，其实只要父元素存在非static的属性，即子元素的absolute就会相对父元素计算(解释：absolute是元素脱离常规文档流，偏移属性参照的是离自身最近的非static定位祖先元素，如果没有非static定位的祖先元素，则一直回溯到body元素)
六.拓展布局中"流"的概念
1.普通流:文档流、文档层 表示网页的正常布局
2.浮动流:浮动层 浮动在网页的上方
3.定位流:定位层 在浮动层的上面
4.定位>浮动>文档
七.固定定位属性的使用
1.属性:position
2.属性值:fixed
3.固定定位使用的特点
- 是相对于浏览器进行位置偏移
- 脱离文档流,初始位置不存在
4.用法:广告弹窗、聊天窗口
八.粘性定位属性的使用
CSS新增的一种定位方式:粘性定位(http://www.alloyteam.com/nav/)
1.属性:position
2.属性值:sticky
3.粘性定位的特点
- 结合了相对定位和固定定位的共同特点
- 相对定位中不脱离文档流
- 固定定位中相对于浏览器
- document.documentElement.scrollTop （获取滚动条位置）js方法
九.定位属性的总结
1.定位的作用:控制元素在浏览器中的位置
2.定位的属性:position
3.定位的属性值
- 相对定位 raletive:不脱离文档流、相对于初始位置移动
- 绝对定位 absolute:脱离文档流、父级有定位属性就相对于父级,没有就会往上级查找 找到浏览器
- 固定定位 fixed:脱离文档流、相对于浏览器位置移动
- 粘性定位 sticky:不脱离文档流(相对) 、 相对于浏览器(固定定位)
十.层叠属性的设置
层叠属性:控制元素在定位层上的显示优先级(在后面加载的元素会在最上面显示)
1.属性:z-index
2.属性值:auto 数字(数字可正可负) 数字越大层级越高
十一.拓展-面试题-定位居中
1.已知宽高（先固定定位，然后top和left设置50%，最后再margin-top和margin-left 设置盒子一半的长度和宽度）
2.未知宽高:强制性居中（先固定，设置上下左右都为0，然后margin：auto）
拓展:css3中的计算属性 calc(计算公式)
eg:calc(50% - 150px); 加减需要在符号中加空格
max-width 定义元素的最大宽度（一般给body加）
不给a标签中的herf设置属性，点击以后会默认刷新页面。
十二.锚点的应用
命名锚点链接(锚点):控制在同一个页面中进行跳转
1.跳转到的地方:<div id="box"></div>
2.点击按钮:<a href="#box">点击回到顶部</a>
3.注意
- 锚点只能用a标签控制
- 跳转的地方只能用id
4.作用:回到顶部、楼层效果、轮播图
十三.透明属性的表达形式
1.rgb/rgba() 常用 参数a为透明度，类似opacity属性，取值范围在0.0~1.0之间，不可为负值
2.opacity
十四.拓展（解决透明度兼容问题）
filter: alpha(opacity=value） value取值为0~100
十五.拓展：如何让一个元素变成块级和快捷检查方式
1.第一种就是直接对元素类型进行干预，使用display:block属性把元素变成块级。
2.第二种方式直接使用浮动，来间接改变元素的属性，使用float:left左浮动(其他浮动属性也可以)，使元素类型改变成块级元素。不过要注意清除浮动，避免高度塌陷。
3.第三种方式使用定位，来改变元素的属性，position:absolute/fixed,使用绝对定位和固定定位都可以，但注意相对定位不起作用。
4.第四种，直接使用弹性盒display:flex,来改变元素的属性。
5.第五种，直接使用网格布局。在推荐一一个快速检查元素，是否为块级元素的方式
2022年7月14日 表单&表格
一.昨日回顾
1.定位属性
2.锚点链接
3.透明属性
二.今日大纲
1.表格
2.表单
3.BFC
三.表格的创建
表格的创建:之前表格是用来布局的,现在只用来展示数据
表格中的计算属性:像生活中的安检在每个单元格中进行检索内容,内容较多就会分配更多的空间给到当前单元格
一:表格创建的标签
1.table 表示表格
2.tr 表示表格中的行
3.td 表示表格中的列(单元格)
二:表格中的HTML属性
1.width/height/border
2.bordercolor/bgcolor
3.设置对齐方式
- 水平方向对齐 align:left、right、center
- table、tr、td都可以控制水平对齐方式
- 垂直方向对齐 valign:top、bottom、middle
- table设置没有效果、tr、td控制行和列的垂直方向
4.设置单元格的间距显示(父级)
- cellspacing 单元格与单元格之间的间距
- cellpadding 单元格与内容之间的间距
5.表格中的行列合并(重点、难点)
- 列合并 colspan
- 行合并 rowspan
- span属性:表示选择几个 属性值需要设置数字
四.表格的HTML标签
1.表格的标题 caption 要写在table的里面
2.表格的列标题 th(作用和td是一样的) 默认加粗和居中显示
3.表格的列分组:可以选择到几列分为一组进行设置宽度
- 第一种可以使用单标签 <col span width>
- 第二种可以使用双标签 <colgroup span width></colgroup>
- 注意:表格列分组的时候只能使用span和width属性
4.表格的行分组
- thead 表格的头部
- tbody 表格的主体
- tfoot 表格的底部
- tbody默认有一个,设置无数个,thead和tfoot只能有一个并且是成对出现
5.分割线 rules="groups/rows/cols/all/none"
- all 表示所有的线都有
- groups 表示根据行列分组
| 个数 | 用法 | 意义 | 说明 |
|---|---|---|---|
| 1 | 表格标题 | ||
| 2 | 表格列分组 | A. | |
| A.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组 B.span属性显示指定相邻几列组成一组，span属性值默认为1 | |||
| 3 | 表格行分组 | A. | |
| 4 | 添加组分隔线 | rules=“groups/rows/cols/all/none” | 必须给table标签添加属性 |
五.表格中CSS的相关属性
1.单元格与单元格之间的间距(cellspacing)
- 属性:border-spacing
- 属性值:数值加单位(0可以不用设置单位)
2.合并相邻单元格的边框
- 属性:border-collapse(合并)
- 属性值:collapse(常用)/separate(分开)
3.单元格无内容时候显示方式
- 属性:empty-cells
- 属性值:show(显示)/hide(隐藏)
4.表格中的计算属性
- 属性:table-layout
- 属性值:auto(自动)/fixed(固定 没有计算属性)
| 个数 | 用法 | 意义 | 说明 |
|---|---|---|---|
| 1 | border-spacing:20px; | 单元格间距 | 单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值 |
| 2 | border-collapse:separate/collapse; | 合并相邻单元格边框 | 合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并) |
| 3 | empty-cells:show/hide; | 无内容时单元格的设置 | 定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏； |
| 4 | table-layout:auto/fixed; | 是否固定单元格的宽度 | fixed：固定宽，没有定义时则宽度会平均分配，高度则会随内容变化 |
六.高级表单的应用
回顾：表单的作用：用来收集用户的信息的;
表单的组成：表单域： <form name="" method="get/post" action=""</form>
表单控件 ： <input type="text" value=""/>提示信息
| 个数 | 标签和属性 | 说明 |
|---|---|---|
| 1 | fieldset表单字段集，相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象 | |
| 2 | 字段级标题 | |
| 3 | label 提示信息标签 for=“绑定控件id名” | |
| 4 | 上传文件框 multiple=“multiple” multiple属性可实现多选 | |
| 5 | 隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改 | |
| 6 | type="radio"单选按钮 单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。 | |
| 7 | <input type=“checkbox” name=“like” disabled=“disabled” checked=“checked”/> | type=“checkbox” 多选按钮 name可加可不加 checked=“checked”(选中) disabled="disabled"禁用 |
| 8 | 北京 上海 | 下拉菜单 |
| 9 | 文本域 | 文本域 cols=“字符宽度” rows=“行数” |
七.BFC的概念
BFC 即 Block Formatting Contexts (块级格式化上下文)
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
- 只针对于块级元素,主要为了规范约束布局方式
- 重要:BFC区域是一个独立的区域,内部的布局和外面的毫不相干
- BFC只是一个概念并不是具体的属性属性值
八.BFC的触发条件
1.根元素 html默认就是一个BFC
2.float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
3.overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
4.display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
5.position的值为absolute或fixed
九.BFC的特点
1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
解释:盒模型中的外边距margin的使用需要遵循BFC布局规则
2.BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
解释:常见的后台布局(两栏布局)
3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
解释:宽高自适应 => 高度塌陷
4.BFC内部的Box会在垂直方向，一个接一个的放置。
解释:块级元素的特点
5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
解释:设置margin的时候必须要和父级的边框有接触
6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
2022年7月15日 宽高自适应
一.昨日回顾
1.表格的创建
2.表格的HTML标签和属性
3.表格的CSS属性
4.表单的使用
5.BFC的概念及应用
二.今日大纲
1.宽度自适应
2.高度自适应
3.高度塌陷的bug
4.常见的oa后台
三.宽度自适应的应用
1.属性:width
2.属性值:px/%
3.宽度自适应的特点
- HTML,BODY表示浏览器,默认是块级元素,宽度是100%
- 当块级元素不设置宽度或者设置100%的时候,宽度会沾满全屏(通栏效果)
- 子级是块级元素,不设置宽度的时候会和父级等宽
- 宽度是没有继承性,只是块级元素的布局规范而已
- 【重要】当块级元素脱离文档流的时候,宽度由内容决定 => 设置浮动和定位的盒子一定记得要加宽高大小！！！
四.高度自适应的应用
1.属性:height
2.属性值:px/%
3.高度自适应的特点
- 浏览器的高度默认是0,html,body{height:100%}
- 设置元素高度为0,盒子的高度就不会显示,添加文本会超出容器范围不会撑大盒子
- 设置好元素高度为auto或者不写的时候可以做到自适应(高度自适应)
- 高度设置为100的常见情况
- html,body{height:100%} 浏览器的默认宽高设置为100% 沾满全屏
- img{width:100%;height:100%} 百分比是相对单位,相对于父级元素进行计算
4.需求:有三个盒子
- 第一个盒子宽度100%,高度100px
- 第二个盒子
- 当盒子中无内容的时候保持一个最小高度
- 当盒子中内容较多的时候可以撑开盒子的高度做到适应
- 第三个盒子宽度100%,高度100px
5.最小高度的概念:min-height（低版本为_height:300px；）
- 第一个作用:height:value作用一样 可以有固定高度
- 第二个作用:height:auto作用一样 可以做到自适应
6.最小高度的兼容问题(浏览器历史)
- 第一款浏览器网景公司(网景领航者NN)
- 第二次浏览器大战 IE9(及以后)
- 最小高度不可以在低版本中使用
- 解决低版本属性解析:_属性:属性值表示只能在低版本中解析
- height高度在低版本浏览器中是有两个作用 和最小高度的效果是一样的
五.最大值最小值的拓展
- 最大值
- 最大宽度 max-width:1920px 约束用户屏幕自适应的最大值
- 最大高度 max-height 判断用户的评论达到一定的高度时候可以实现翻页功能
最小值
- 最小宽度 min-width 约束盒子不会往下掉
- 最小高度 min-height 自适应
重点:最小宽度和最大宽度(响应式布局-媒体查询)
六.高度塌陷/高度坍塌
一.造成原因:父级没有设置高度,子级元素脱离了文档流
二.解决方法(10多种)
1.解决方法:给父级元素添加overflow:hidden
- 原理:设置overflow:hidden触发BFC,BFC中有一条布局规则:浮动元素也会参与高度计算
2.解决方法:在最后一个子级元素下面添加任意标签(div) 设置样式clear:both
- 解释:clear清除浮动 left/right/both
- 原理:清除上方预留出来的所有浮动
- 优缺点:优点比较方便、缺点增加了无用的标签、代码冗余
3.万能清除法(不要求理解要求会用)
- 代码
.clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
解释：当碰上高度塌陷时候，有个不成文的规定，将标签取名为clear-fix。（当一个标签有多个别名时，空格隔开就行）（after选择器可以解决高度塌陷，before不行，必须结合content使用）
七.伪对象选择器/伪元素选择器（记得与伪类选择器进行区分），伪对象（伪元素）选择器的权重是1
1.选择器::after{content:''} 表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容
2.选择器::before{content:''} 表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容
| 个数 | 选择器 | 语法 | 说明 |
|---|---|---|---|
| 1 | ::after | div::after{content:”文字”} div:after{content:url();} | 与content属性一起使用，定义在对象后的内容 |
| 2 | :::before | div::before{content:”文字”} div::before{content:url();} | 与content属性一起使用，定义在对象前的内容 |
| 3 | ::first-letter | div::first-letter div:first-letter | 定义对象内第一个字符的样式，注：该伪元素只能用于块元素 |
| 4 | ::first-line | div::first-line div:first-line | 定义对象内第一行的样式，注：该伪元素只能用于块元素 |
| 5 | ::selection | div::selection | 选中之后的样式 只支持这background color属性 |
八.关于隐藏的几种用法
1.display:none 删除元素的显示和结构
2.visibility:hidden 删除显示方式但是位置还存在
九.伪对象和伪类之间的区别是什么?
1.写法上区别:在css2中伪类和伪对象都是一个冒号,在css3中为了区分规定伪对象需要写两个冒号
2.作用上区别:伪类改变是元素的状态,伪对象不仅可以改变元素状态还可以添加结构(虚拟)
2022年7月18日 HTML5基础
一.昨日回顾
1.宽度自适应:
2.高度自适应
3.最小高度
4.高度塌陷/坍塌
二.今日大纲
1.HTML5新增的标签
2.HTML5新增的属性
三.HTML5中新增的语义化标签
1.section表示内容块和div的作用一样
2.6个常用的语义化标签默认都是块级元素
3.nav相当于ul和li，可以直接用nav>a写导航
4.内容块：<section></section>
5.头部：<header></header>
6.导航：<nav></nav>
7.文章：<article></article>
8.辅助信息：<aside></aside>
以下为拓展
| 个数 | 含义 | 语法书写 | 解释 |
|---|---|---|---|
| 7 | 独立内容块 |
| 类似dl dt dd |
| 8 | 高亮显示文字 | 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词 | |
| 9 | 标题组 | 标签被用来对标题元素进行分组 | |
| 10 | 对话框 | 这是打开的对话窗口 | 目前只有 Chrome 和 Safari 6 支持 标签 |
| 11 | 定义图形 | 只是图形容器，必须使用脚本来绘制图形。 |
四.音视频标签的使用
一:音频标签 audio
二:视频标签 video
三:音视频标签共有的属性
1.src 路径地址
2.controls 控件(显示)
3.autoplay 自动播放
4.loop 循环
5.muted 静音
6.preload 如果出现该属性。则音频在页面加做时进行加就。并预备播放。如果使用autoplay，则忽略该属性。
四:不同属性的使用(视频标签独有的属性)
1.poster 视频未加载首屏图片
五:不同的浏览器对于音视频的后缀名要求不一样
1.source 引入资源
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8RWrVwh-1659443126122)(H:\Typora\data\TyporaPages\image-20220728143001019.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1NFb2KYY-1659443126123)(H:\Typora\data\TyporaPages\image-20220728143011322.png)]
Video的标签支持的格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lqrlrBbV-1659443126124)(H:\Typora\data\TyporaPages\image-20220728143102251.png)]
五.HTML5中表单中type的属性值使用
1.智能表单需要在form表单框中使用
2.需要有提交按钮
3.智能表单只能检测当前输入的内容是否符合格式,为空的时候是可以提交的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlI2aPXE-1659443126125)(H:\Typora\data\TyporaPages\image-20220728143520431.png)]
六.改变input标签中的placeholder字体颜色
input::-webkit-input-placeholder{
color: red;
}
七.改变input标签中的字体大小（与6做好对比）
input{
font-size: 12px;
}
……………………………………………………………………………………………………………………
2022年7月19日 CSS3基础
一.昨日回顾
1.H5的新增语义化标签
2.H5的新增的智能表单
3.H5的新增的时间表单
4.H5的新增的表单属性
二. 今日大纲
1.CSS3的选择器
2.CSS3的文本属性、背景属性、列表属性、边框属性
3.阿里巴巴矢量图标库
三.CSS3中的属性选择器
1.E[attr] 表示选择标签和标签中的属性
2.E[attr="value"] 表示选择标签和标签的属性属性值
3.E[attr^="value"] 表示选择标签和标签的属性属性值,并且以xx开头
4.E[attr$="value"] 表示选择标签和标签的属性属性值,并且以xx结束
四.CSS3中的结构伪类选择器:表示将很多的标签放在一起通过选择第几个进行修饰
一:当所有的标签名称是一样的时候:将所有相同的标签组成一个集合,再从集合下面进行选择第几个
1.集合名称:first-child 表示选择集合下面的第一个
2.集合名称:last-child 表示选择集合下面的最后一个
3.集合名称:nth-child(n) 表示选择到集合下面的第几个(从前往后)
4.集合名称:nth-last-child(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数
二:当所有的标签名称不一样的时候:将标签=进行筛选相同标签组成一个集合,再从集合下面挑选第几个
1.集合名称:first-of-type 表示选择集合下面的第一个
2.集合名称:last-of-type 表示选择集合下面的最后一个
3.集合名称:nth-of-type(n) 表示选择到集合下面的第几个(从前往后)
4.集合名称:nth-last-of-type(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数
五.UI状态伪类选择器
input:enabled {可用状态下的样式}
input:disabled {禁用状态下的样式}
input:checked {选中状态下的样式}
六.否定伪类选择器
:not(否定的条件) 除了什么什么 可以让你定位不匹配该选择器的元素
七.目标伪类选择器 (哪个元素改变状态就给哪个元素设置目标选择器)
:target 选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
八.浏览器前缀的认识
项目的开发思想:渐进增强、优雅降级
1.渐进增强:先保证低版本的正常使用再在高版本中做效果
2.优雅降级:先实现高版本的效果,再考虑低版本浏览器的适配
市场上五大浏览器:谷歌、火狐、IE、欧朋、safari
市场上常见的弟弟浏览器:UC、百度、360、搜狐、qq、王牌2345、夸克
为什么要有浏览器前缀?由于浏览器的制作厂商不一样源码不一样(浏览器内核解析html和css)
由于CSS3是新版本,增加了新的属性,在部分浏览器上解析的时候会出现问题,为了支持这些属性 每个浏览器都有自己的前缀
1.-webkit- safari 谷歌浏览器
2.-ms- IE浏览器
3.-moz- 火狐浏览器
4.-o- 欧朋浏览器 遗弃
5.-blink- 欧朋浏览器和谷歌浏览器
八.CSS中的新增属性
一:文本阴影（水平和垂直可以给负值，多个阴影之间用逗号隔开）
1.属性:text-shadow
2.属性值:常用的属性值有4个
- 第一个属性值表示水平方向
- 第二个属性值表示垂直方向
- 第三个属性值表示模糊程度
- 第四个属性值表示颜色
二:盒子阴影(在盒子内部显示)
1.属性:box-shadow
2.属性值:常见的属性值有4个
- 第一个属性值表示水平方向
- 第二个属性值表示垂直方向
- 第三个属性值表示模糊程度
- 第四个属性值表示颜色
- 第五个属性值表示inset 规定盒子阴影在内部显示
三.边框圆角属性的使用
1.属性:border-radius(半径)
2.属性值
- 一个属性值:设置宽高一半/50%~100% 形成圆
- 两个属性值:左上角右下角 右上角左下角
- 三个属性值:左上角 右上角左下角 右下角
- 四个属性值:左上 右上 右下 左下
- 八个属性值:左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y（如果没有“/”，则元素圆角的水平和垂直方向的半径值相等）
四.背景尺寸大小的设置
1.属性:background-size
2.属性值:
- 第一种:设置固定的宽高大小 100px 200px
- 第二种:100% 100% 表示百分比相对于父级元素计算会沾满父级盒子
- 第三种:100% auto
- 第四种:cover 覆盖(不会让图片变形但是图片超出去的时候会裁剪。把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
)
- 第五种:contain 覆盖(表示某一侧碰到父级包含框就会停止变化,不会变形也不会被裁剪，保持背景图像本身的宽高比例不变进行缩放。)
……………………………………………………………………………………………………………………
2022年7月20日 CSS3基础 & CSS过渡&动画
一.昨日回顾
1.选择器
- 属性选择器 标签名称[attr="value"]
- 结构选择器 标签名称一样/标签名称不一样的
- UI选择器
- 否定选择器
- 目标选择器
2.属性
- 文本属性
- 边框属性
- 背景属性
二.今日大纲
1.渐变属性
2.阿里巴巴矢量图标库
3.过渡属性
4.动画属性
三. CSS3中的线性渐变
CSS3中的线性渐变:表示从一个边到另外一个边（
一.属性:background
二.属性值:linear-gradient(参数)
三:参数的使用
1.参数1:表示方向值
2.参数2:表示颜色值
3.参数3:表示颜色值
四.注意点
1.在线性渐变的参数中多个参数之间需要用逗号隔开
2.默认的方向是从上到下的，也可从左到右，从对角到对角
五.关于线性渐变中参数以及兼容写法
标准写法 兼容写法
属性 background background
属性值 linear-gradient -浏览器前缀-linear-gradient
方向1 to 结束的方向值 不加to 开始的方向值
方向2 to 结束的对角 不加to 开始的对角
方向3 deg 90-标准写法的角度值
四.CSS3中径向渐变的使用
一.属性:background
二.属性值:radial-gradient(起点位置,渐变的形状,渐变的大小,颜色值1,颜色值2,...)
三.径向渐变中的参数使用
1.起点位置
- 默认在盒子的中心点(center center)
- 法定属性值:left、right、top、bottom、center
- 常规属性值:坐标值(x y)
2.渐变的形状
- 默认的形状是椭圆 ellipse
- 设置成圆形 circle
3.渐变的大小
- closest-side farthest-side closest-corner farthest-corner
四:使用的注意点
1.径向渐变只有兼容写法,需要加浏览器前缀
五.CSS3中重复渐变的使用
CSS的重复渐变
线性渐变和径向渐变都属于CSS背景属性中的背景图片（background-image）属性。有时候希望创建在一个元素的背景上重复的渐变“模式”。在没有重复渐变的属性之前，主要通过重复背景图像（使用background-repeat）创建线性重复渐变，但是没有创建重复的径向渐变的类似方式。幸运的是，CSS3通过repeating-linear-gradient和repeating-radial-gradient语法提供了补救方法，可以直接实现重复的渐变效果。
A、重复的线性渐变 repeating-linear-gradient() 函数用于重复线性渐变：
B、重复的径向渐变 repeating-radial-gradient函数用于重复径向渐变：
<style>
div{
width: 300px;
height: 300px;
margin: 200px auto;
border-radius: 50%;
/* 重复线性渐变 */
/* background:repeating-linear-gradient(#000 5%,#fff 10%) */
/* 重复径向渐变 */
background: repeating-radial-gradient(#000 5%,#fff 10%);
transition: 100s
}
/* 2d中的旋转属性 transform:rotate() */
div:hover{
transform: rotate(360000000deg)
}
</style>
六.CSS3的字体图标书写
@font-face：字体语法 在网页上显示服务端字体
font-family： 规定字体的名称。
src:url 定义字体文件的 URL。
注：在IE中使用时，只能使用微软自带的Embedded OpenType字体文件，扩展名为.eot
七.CSS3中过渡属性的使用（谁改变给谁加）
过渡属性的使用:表示元素从一种状态改变到另外一种状态(display:none/block不可以)。
一:参加过渡的属性(哪些属性需要进行改变)
1.属性:transition-property
2.属性值:
- 可以写多个参与过渡的属性,之间用空格隔开就可
- 写一个all表示所有,或者不写（默认为all）
二:过渡使用的时间
1.属性:transition-duration
2.属性值:用户的最佳体验时间0.8s
三:过渡延迟时间再执行
1.属性:transition-delay
2.属性值:s、ms
四:过渡的运动方式
1.属性:transition-timing-function
2.属性值:
五:复合写法/简写方式
1.属性:transition
2.属性值:
- all 0.8s 1s linear 所有的属性在延迟一秒后匀速运动0.8s
- 0.8s linear
注意：在实现过渡时，一定要设置好初始值，特别是宽度和高度变化最好设置初始值(不要让宽度100%和height:auto),这样才能更好的实现过渡方式。
| 个数 | 属性 | 说明 |
|---|---|---|
| 1 | transition-property | 需要过渡的样式 ，默认是 all |
| 2 | transition-duration | 运动时间 默认是 0 s |
| 3 | transition-delay | 延迟时间 默认是 0 s |
| 4 | transition-timing-function | 运动形式 默认是 ease A.ease：（慢速开始，然后变快，然后慢速结束） B. linear：（匀速） ease-in：(加速) C.ease-out：（减速） D.ease-in-out：（先加速后减速） E.cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）http:cubic-bezier.com F.steps（） 实现一个关键逐帧动画的功能 |
八.动画属性的使用
一.帧动画的概念:表示控制元素在浏览器中进行运动
二.帧动画的解释:是一个工具,工具需要购买和使用的,动画需要定义和执行
1.动画的定义/声明方式
- 要在css样式表中使用
关键字 @keyframes 自定义动画的名字{动画的运动方式:单次/多次}
- 单次 from...to
2.动画的执行/调用方式
- 动画使用哪个元素需要运动就给哪个元素添加即可
控制元素能运动给元素设置动画属性即可
- 注意点
- 动画控制元素的位置,位置的偏移需要根据大盒子进行移动
- 设置方向的值一定要相同才会有运动的过程
三:关于动画属性的使用(动画调用执行使用了名字和时间就可以了，为元素绑定一个动画的必备条件为动画名称和时长)
1.动画的名称
- 属性:animation-name
- 属性值:自定义动画的名字
2.动画的运动时间
- 属性:animation-duration
- 属性值:s
3.动画的延迟时间
- 属性:animation-delay
- 属性值:s
4.动画的运动方式
- 属性:animation-timing-function
- 属性值:linear
5.控制动画的运动次数
- 属性:animation-iteration-count
- 属性值:1/number/infinite 无限循环
6.动画的运动方向
- 属性:animation-direction
- 属性值:normal
7.动画属性的简写方式
- 属性:animation
- 属性值:名字 0.8s linear infinite
/* 动画只要开始和结束状态 不要过程 */
8./* 表示动画分为多少步实现 帧动画有多少帧 一个数字 */
animation: pMove 3s steps(40) infinite;
| 个数 | 属性 | 说明 |
|---|---|---|
| 1 | animation-name:mymove; | 是用来定义一个动画的名称,mymove是由Keyframes创建的动画名 mymove要和Keyframes中的mymove一致 |
| 2 | animation-duration | 运动时间 默认是 0 s |
| 3 | animation-delay | 延迟时间 默认是 0 s |
| 4 | animation-timing-function | 动画的播放方式，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier，steps（)； |
| 5 | animation-iteration-count | 是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。 |
| 6 | animation-direction | 定义是否应该轮流反向播放动画。 如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放 |
九.animation和transition的区别？
相同点：都是随着时间改变元素的属性值。
不同点：
transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。
2022年7月21日 CSS3 2D&3D
一.昨日回顾
1.渐变属性
2.过渡属性
二.今日大纲
1.2D属性
2.3D属性
三.CSS3中的2D位移属性
位移属性的使用(移动元素的位置)
1.属性:transform 变形/转换
2.属性值:
- translate(x,y) 沿着X和Y轴进行移动,当只有一个属性值的时候只会沿着X轴进行移动
- translateX() 沿着X进行移动（注意：X指的类似坐标点，不是坐标长度）
- translateY() 沿着Y进行移动（注意：Y指的类似坐标点，不是坐标长度）
3.拓展:位移的相关使用总结
- 盒模型、定位可以结合过渡使用
- 浮动属性不可以
- 位移不会让元素脱离文档流
- 位移可以设置负值
- 盒模型和位移作用相同
四.CSS3中的缩放属性
1.属性:transform
2.属性值:
- scale(x,y) 改变元素的宽高,当x和y的参数相同时候可以简写成一个
- scaleX() 宽度
- scaleY() 高度
3.关于属性值中的参数使用
- 小于0的时候 先缩小再放大(旋转180deg)
- 等于0的时候 隐藏
- 小于1的时候 缩小
- 等于1的时候 不变化 显示
- 大于1的时候 放大
五.旋转和倾斜
一.旋转属性的使用
1.属性:transform
2.属性值:rotate(参数)
- rotate(一个参数) 默认为Z轴
- rotateX() 单杠运动
- rotateY() 钢管舞
3.注意旋转的观察角度
- 观察的时候永远都是站在当前这个轴的正值方向观察(正值方向看向负值方向)
- 设置正值永远都是顺时针,负值都是逆时针
4.引出景深效果(远小近大-视距) 有两种表达形式
- 在父级元素上设置 perspective:1200px
- 在子级元素上设置 transform:perspective(1200px)
二:倾斜属性的使用（倾斜无Z轴。3D中官方规定，Z轴单独用，无效果，必须配合X和Y使用）
1.属性:transform
2.属性值:
- skew(x,y)
- skewX()
- skewY()
六.CSS3中的3D属性设置
一:形成3D空间,浏览器只是多了一条Z轴可以进行操作,浏览器不会有任何的变化
1.属性:transform-style
2.属性值
- flat 默认值2D空间
- peserve-3d 形成3D空间多了Z轴
二.位移属性
1.transform:translateZ(200px)
2.transform:translate3d(10px,20px,30px)
三:缩放属性
1.transform:scaleZ(2) 默认是Z轴,单独写没有效果
2.transform:scale3d(2,3,4) 需要配合x和y使用
四:旋转属性（旋转可以只用Z轴，默认为Z轴）
1.transform:rotateZ(30deg)
2.transform:rotate3d(0,0,1,30deg) 前三个参数表示xyz轴开关(1\0)
七.注意点:位移和旋转对于位置的影响
1.当一个元素有多个相同的变形属性值要使用的时候可以把属性值写在一起,之间用空格隔开
2.当位移和其他属性同时出现的时候,先写位移,后写其他属性值
2022年7月25日 弹性盒布局
一.弹性盒属性的使用
1.概念:在父级元素设置设置弹性盒属性(容器),所有的子级元素会在父级容器的轴向上排列(项目)
2.作用:控制所有的子级元素在父级元素上的排列位置
3.如何形成弹性盒
- 属性:display(显示方式)
- 属性值:flex(弹性布局)
4.形成弹性盒之后的特点(主轴和侧轴)
- 父级容器设置了弹性盒,会有两个轴向X和Y轴,默认是X轴为主轴,所有子级的元素都会沿着X轴进行排列
- 主轴和侧轴是相对的关系
- 当X轴是主轴的时候,Y轴对应就是侧轴
- 当Y轴是主轴的时候,X轴对应就是侧轴
- 在弹性盒中不考虑元素类型,所有的子级元素都可以直接设置宽高大小
- 设置图片居中:给图片设置margin:auto
5.弹性盒的使用注意点
- 弹性盒兼容只能在高版本浏览器中使用
- 弹性盒不会脱离文档流,不会破坏网页布局,不存在高度塌陷的问题
- 盒模型和定位属性是可以正常使用的,但是浮动不可以用(暂且忘记)
- 弹性盒中，img也得设置宽高
二.设置在父级元素上的属性
可以设置在父级元素上的属性(控制所有的子级元素的位置)
一:改变主轴的排列方向(默认主轴是X轴方向)
1.属性:flex-direction
2.属性值
- row 水平方向X轴,侧轴Y轴
- column 垂直方向Y轴,侧轴X轴
二:设置主轴的对齐方式
1.属性:justify-content
2.属性值
- flex-start 主轴开始位置排列
- flex-end 主轴结束位置排列
- center 主轴的居中位置
- space-between 两端对齐,其余空间自动分配
- space-around 元素的左右空间分配是相等的
- space-evenly 所有的空间都是自动分配的
三:设置侧轴的对齐方式
1.属性:align-items
2.属性值
- flex-start 侧轴的开始位置排列
- flex-end 侧轴的结束位置排列
- center 居中位置显示
- baseline 基线对齐 默认和flex-start的效果是一样的(了解)
- stretch 拉伸(了解)
四:控制子级元素换行显示(弹性盒子级超出父级的宽度默认是进行挤压的不会往下掉)
1.属性:flex-wrap
2.属性值
- no-wrap 默认值 不换行 默认进行挤压的
- wrap 换行
五:控制行与行之间的间距
1.属性:align-content
2.属性值
- flex-start 主轴开始位置排列(常用)
- flex-end 主轴结束位置排列
- center 主轴的居中位置
- space-between 两端对齐,其余空间自动分配
- space-around 元素的左右空间分配是相等的
- space-evenly 所有的空间都是自动分配的
三.设置在子级元素上的属性
设置在子级元素上的属性(控制单个子级在弹性盒中的位置)
一:控制元素的显示顺序
1.属性:order
2.属性值:默认为0 数字越大越往后显示
二:控制单个元素在侧轴上的对齐方式
1.属性:align-self
2.属性值
- flex-start/end/center 开始/结束/中间
- baseline/stretch 基线对齐/拉伸
四.flex为1的情况（属性都是给子级添加的，父级必须设置display：flex）
设置flex为1的情况，可以实现主体内容需要根据用户的屏幕进行改变。
一:flex作为属性出现的时候表示占据主轴上剩下的空间,由以下三个属性复合而成
1.相对于其他元素进行扩展的量
- 属性:flex-grow
- 属性值:
- 0 空间是默认的
- 1 表示占据主轴上剩下的空间
2.相对于其他元素进行收缩的量
- 属性:flex-shrink
- 属性值
- 0 改变主轴的宽高不会被挤压
- 1 改变主轴的宽高会被挤压
3.项目的宽度(width作用一样)
- 属性:flex-basis
- 属性值:0~100%/auto
4.三个属性推算出flex:1的效果
- 默认值:0 1 auto
- 常用值:1 1 0% => 简写成flex:1
2022年7月26日 移动端布局
一.昨日回顾
1.弹性盒的概念
- display:flex 轴向排列
- 子级元素都可以直接设置宽高大小
- 定位和盒模型可以用,浮动用不了
2.父级元素上的属性
- 改变轴向 flex-direction
- 主轴对齐方式 justify-content
- 侧轴对齐方式 align-items
- 子级换行 flex-wrap
- 行与行之间间距 align-content
3.子级元素上的属性
- order 顺序 数字越大越往后显示
- align-self 侧轴对齐
- flex:1 占据主轴上剩下的空间
4.多列布局 column-count
二.媒体查询的使用
媒体查询的使用:媒体查询只是一个概念,可以用来检测设备的特性从而设置不同的css样式而适配多个终端(用户的设备)
媒体查询的写法:@media 设备的类型 操作符号 (判断条件/设备的特性){相对应的css样式}
- @media 表示引入的是媒体查询公式
- 设备的类型 screen(屏幕) all(电脑、平板电脑、手机、打印设备)
- 操作符号 and
- 判断的条件 min-width/max-width
- css样式
媒体查询的公式写法:@media all and (min-width:320px) and (max-width:1024px){ css }
- 需要写在css样式表中并且建议写在样式表的最下方
- 书写媒体查询的时候每个英文单词之间都需要空格
- 有多个判断条件就在后面书写多个and即可
- 由于市面上的电脑制作厂商较多,使用媒体查询会出现一些误差,可以进行微调
三.基本结构的解释
head>
<meta charset="UTF-8">
<!-- 视口标签:可视范围 控制pc端和移动端的显示比例 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no">
<!-- 文档的渲染模式 以最新的浏览器edge渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
四.移动端布局单位rem的认识
一:之前有使用的单位:px、em、%、pt、deg
二:移动端中非常重要的单位:rem 相对单位,相对于根元素html的font-size进行计算的
三:移动端布局思路的推算
1.rem单位是相对于html的font-size计算的
2.每个移动端的宽高大小都是不一样的,字体的大小应该也要设置成不一样
3.盒子大小和字体大小就不能再使用px单位,可以考虑使用rem
4.可以使用媒体查询改变不同的html的font-size的值即可
四:移动端的第一种计算方法(媒体查询结合rem实现)
1.关于移动端中常用公式:DPR = 物理像素 / 逻辑像素
- DPR:设备像素比
- 物理像素:UI设计图提供的大小
- 逻辑像素:CSS样式
=> 逻辑像素 = 物理像素/DPR
- 如果有设计图宽度是640px,在设计图里面导航的高度是88px,问导航应该设置为多少?
- 88px/2=44px 这个导航就是44px
- 导航的44px是一个绝对值单位,不能在多个终端中进行改变
- 可不可以考虑让44px单位变成可以自动计算的单位呢?
- 44px转换为多少rem? 在浏览器中默认html的font-size大小是16px
- 44px/16px = 2.75rem
2.常见的DPR(设备像素比)
- 第一种情况:当UI设计图的宽度是640px,在浏览器中需要使用320px的终端设备测试 DPR=640/320=2
- 第二种情况:当UI设计图的宽度是750px,在浏览器中需要使用375px的终端设备测试 DPR=750/375=2
- 第三种情况:当UI设计图的宽度是1080px,在浏览器中需要使用414px的终端设备测试 DPR=1080/414约等于3
五:关于第一种媒体查询结合rem单位实现移动端布局的总结
1.计算公式: 逻辑像素 = 物理像素/DPR
2.带入计算出来的值是px单位,直接把px单位除以相对应的设置font-size得知即可
3.案例:640px/88px => 88px/2/相对应的font-size的值
4.html{font-size}需要使用媒体查询设置
- 小屏手机320px font-size:12px
- 中屏手机375px font-size:14px
- 大屏手机414px font-size:16px
五.通过媒体查询设置不同的值（演示代码如下）
六.第一种移动端布局方式
第一种移动端布局方式:媒体查询+rem方式
1.媒体查询可以改变html下面的font-size的值
2.rem可以相对于根元素进行计算
3.设置不同的终端下面的font-size的值
4.通过公式DPR计算得出常见的是2
5.计算:物理像素/2/相对应的font-size的值
优点:好理解、做到大部分的移动端适配
缺点:计算有误差、适配所有的需要写很多的媒体查询比较麻烦
2022年7月27日 第二种移动端布局&网格布局
一.昨日回顾
1.移动端布局
2.媒体查询的使用:检测设备的特性
3.rem单位的使用:相对于html{font-size}
4.计算公式:DPR=物理/逻辑
二.今日大纲
1.移动端的第二种第三种布局方式
2.移动端案例
3.网格布局(特殊)
三.第二种移动端布局：vw
一.vw单位是什么:viewport width 视口宽度
二.vw换算方式:1vw=视口宽度的百分之一/100vw=视口的100%
三.vw和%单位之间的区别
1.vw单位是视口单位,看到多少vw就会显示多少
2.百分比单位是是浏览器单位
3.滚动条在pc端是占位置,在移动端不占位置(vw建议在移动端使用)
四.关于vw单位计算移动端布局的推算思路(了解)
1.在浏览器中100vw和浏览器的宽度是一样的,ui设计图也可以看成是和浏览器大小是一样(dpr比例)
2.可以得到100vw/ui设计图的大小=在浏览器中所占的每一份的大小
3.量取设计图中每一个元素的大小*上面的到的每一份大小
五.由于移动端设计图需要考虑dpr设备像素比
1.第一种情况:当设计图的宽度是640px,dpr是2
- 100vw = 640px/2
- 100vw = 320px
- 1vw = 3.2px
- 1px = 0.3125vw
- 表示当前1px占据浏览器的0.3125vw,那么在设计图量取出来的px直接乘以当前一份的大小
2.第二种情况:当设计图的宽度是750px,dpr是2
- 100vw = 750px/2
- 100vw = 375px
- 1vw = 3.75px
- 1px = 0.2667vw
- 表示当前1px占据浏览器的0.2667vw,那么在设计图量取出来的px直接乘以当前一份的大小
六:关于vw实现移动端的总结
1.在工作中标准的ui设计图宽度都是750px,考虑dpr是2
2.导航的高度是88px,高度如何设置呢 88/2=44px * 0.2667vw
3.底部的高度是90px,高度如何设置呢 90/2=45px * 0.2667vw
4.由于每次的量取的设计图大小都要乘以0.2667vw很麻烦 考虑可不可以让量取出来大小自己去计算呢?
5.考虑将得到的44px/45px,直接改写为44rem/45rem
6.将根元素html{font-size:0.2667vw}
四.关于vw的计算（例子）
<style>
*{
margin: 0;padding: 0
}
html{
font-size: 0.2667vw;
}
div{
/* 物理像素/dpr=44px */
/* 如何做到适配 在750px的设计图中1px=0.2667vw */
height: 44rem;
background: pink
}
五.HTML中的框架标签
六.网格布局的使用
网格布局（Grid）它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局
七 .网格布局的相关概念
1.采用网格布局的区域，称为"容器"（container）。
2.容器内部采用网格定位的子元素，称为"项目"（item）。
3.注意：项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。
八.网格布局的相关属性
1、display：grid； display：inline-grid；指定一个容器采用网格布局
2、grid-template-columns 属性 设置每列的列宽,参数的个数决定是几列
3、grid-template-rows属性 定义每一行的行 高
A、grid-template-columns: 100px 100px 100px;
B、grid-template-columns: repeat(1, 33.33% 200px 300px);
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
C、grid-template-columns: 1fr 1fr 1fr; fr关键字（fraction 的缩写，意为"片段"）
4、grid-template-areas 属性 网格布局允许指定"区域"（area）
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
'a b c'
'd e f'
'g h i';
}
5、grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距
九.网格布局的代码例子
<style>
section{
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 100px auto;
/* 形成网格布局属性 */
display: grid;
/* 宽高属性:有几个属性值就会有几行几列 */
/* 宽度 */
grid-template-columns:1fr 1fr 1fr ;
/* 高度 */
grid-template-rows:1fr 1fr 1fr ;
/* 区域划分:给所有的子级元素取别名 */
grid-template-areas:
"a1 a2 a3"
"a4 a4 a6"
"a7 a8 a9"
}
div{
border: 1px solid #000000;
}
.box{
background: pink;
/* 和父级相对应的 */
grid-area: a4
}
</style>
962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
