CSS属性[背景,定位,浮动],flex布局,HTML5和CSS3理解,vertical-align深入理解
CSS属性-背景
- background-image
- background-image设置元素的背景图片(会盖[不是覆盖]在背景颜色的上面)
- 如果设置论文多张图片
- 设置的第一张图片显示在最上面,其他的按照顺序叠加在最下面
- ps:如果设置了图片背景,元素没有具体的宽高,图片不会显示出来
- 背景图片大于背景时只显示背景图片的部分内容,其与部分不显示(不存在溢出不溢出的情况)
- background-repeat
- 设置背景图片时否要平铺
- 常见值
- no-repeat:不平铺
- repeat:平铺(默认方式)
- repeat-x:只在水平方向平铺
- repeat-y:只在垂直方向平铺
- background-size
- size用于设置背景图片的大小
- auto:以背景图片本身的大小显示
- cover:缩放背景图,已完全覆盖铺满
- contain:缩放背景图,高度或者宽度铺满,但是图片保持宽高逼
:百分比,相对于背景区域(只设置一个,保持默认的背景图片宽高比) - length:具体大小(可设置1-2个值x,y)(只设置一个保持默认的宽高比)
- size用于设置背景图片的大小
- background-position
- 设置背景图片在水平处置方向的具体位置
- 可设置的值
- length:x,y
- 水平方向设置left,center,right
- 垂直方向设置top,center,bottom
- 如果只按照一个方向另外一个默认为center
- background-position:80===background-position:80 center
- CSS sprite
- CSS概念
- 是一种CSS合称技术.由各种小图片合并到一张图片上,然后利用CSS的背景定位显示对应的图片部分
- 又称CSS雪碧,CSS精灵
- 优点
- 减少网页http请求的数量,加快网页请求的速度,减轻服务区的压力
- 减少图片总大小
- 解决了图片命名的困扰
- CSS雪碧图制作
- photoshop
- CSS雪碧图制作网站
- background-attachment
- scroll背景图片跟随元素一起滚动(相对于浏览器)(默认属性)
- local:背景图片跟随元素及内容一起滚动
- fixed背景图片相对于浏览器窗口固定
- CSS概念
- background是一系列背景相关属性的简写属性,常用格式:
1
2
3
4
5image,position/size repeat attachment color
1 background-size可以省略,如果 不省略,background-size必须跟在background-position
2 其他属性都可以省略
eg:
background:url() center center/cover repeat local #f00 - ==background-color会覆盖背景,backgroung-image不会覆盖背景色==
- background-image和img的区别
1 | img | background-image |
---|---|---|
性质 | HTML元素 | CSS样式 |
图片是否占用空间 | 是 | 否 |
浏览器右键直接查看地址 | 是 | 否 |
支持CSS sprite | 否 | 是 |
更有可能被搜索引起搜索 | 是 | 否 |
加载顺序 | 优先加载 | 等加载完HTML元素后在加载 |
- img,作为网页内容的重要组成部分,比如广告图片、LOGO图片、文章配图、产品图片
- background-image,可有可无。有,能让网页更加美观。无,也不影响用户获取完整的网页内容信息
- cursor可以设置鼠标指针(光标)在元素上面时的显示样式
- auto:浏览器上下文决定指针显示的样式,比如根据文本和非文本切换指针的样式
- default由操作系统决定,一般就是小箭头
- pointer:一只小手,鼠标指针挪动到链接上默认样式
- text一条竖线,鼠标指针挪动到文本框上上默认显示的样式
- none:没有任何指针显示在元素上面
CSS属性-定位
标准流(Normal Flow)
- 默认情况下,元素都是按照nprmal flow(标准流,常规流,正常流,文档流[document flow])进行排布
- ==从左到右,从上到下按照顺序摆放好==
- ==默认情况下,互相之间不存在层叠现象==
- 默认情况下,元素都是按照nprmal flow(标准流,常规流,正常流,文档流[document flow])进行排布
margin,padding定位
- 在标准流中,可以设置margin,padding对元素进行定位
- 在margin中还可以设置负数
- 比较明显的缺点是:
- 设置一个元素的margin和padding通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
- 在标准流中,可以设置margin,padding对元素进行定位
position
- static:静态定位(默认状态
- 元素按照标准流normal flow进行布局
- left,right,top,bottom没有任何作用
- relative:相对定位(相对于原来的位置)可以设置层叠
- ==元素按照normal flow 布局==
- 可以通过left,right,top,bottom用来设置元素的具体位置
- ==相对定位的应用场景:在不影响整体布局的前提下,对当前元素位置进行微调==
- absolute:绝对定位(相对于非静态的父元素,直到浏览器视口)
- 元素脱离normal flow(标准流 )
- 可以通过left,right,top,bottom进行定位
- 定位参考对象是最邻近的定位祖先元素
- 弱不存在这样的元素,参照对象是视口
- 定位元素(positioned element)
- position元素不为static
- position的值为relative,absolute,fixed
- ==子绝父相==(一般的设置是:子元素是绝对定位,父元素是相对定位)
- 如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案:
- 父元素设置position:relative(让父元素成为定位元素,而且父元素不脱离标准流)
- 子元素设置position:absolute
- 简称:子绝父相
- ==子元素设置为绝对定位的过程中,若设置子元素居中显示:left和right设置相等的值(一般为0),在设置margin:0 auto==
- 如果希望子元素相对于父元素进行定位,又不希望父元素脱标,常用解决方案:
- fixed:固定定位(相对于浏览器页面)
- static:静态定位(默认状态
绝对定位元素技巧:
- 绝对定位元素(absolutely positioned element)
- position值为absolute或者fixed元素
- 对于绝对定位的元素来说
- 定位参照物的宽度=left+right+margin-left+margin-right+绝对定位元素的实际占用宽度
- 定位参照物对象的高度=top+bottom+margin-top+margin-bottom+绝对定位元素的实际占用高度
- 如果希望绝对定位元素的宽高和定位参照对象一样,可以给绝对定位元素设置以下属性
- left:0,right:0,top:0,bottom:0,margin:0
- 如果希望绝对定位元素在参照物中 居中显示,可以给绝对定位元素设置以下属性
- left:0,right:0,top:0,bottom:0,margin:0 auto
- 另外还的设置定位元素具体的宽高值(且小于定位参照对象的高度)
- 绝对定位元素(absolutely positioned element)
sub元素:下标
sup元素:上标
设置图片自适应居中的两种方式:
- 设置相对位置:通过设置img的position以及计算图片左移图片长度的一半,在right:父元素窗口的一半[==希望图片向左移动的距离:
= 图片宽度0.5 – div宽度0.5
= 960px – div宽度*0.5==
] - 设置背景色,并未其设置高度,同时将background-position设置为center,0
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相对位置:
.box {
/* 将多余的图片裁剪掉 */
overflow: hidden;
min-width: 1000px;
}
img {
/* 设置图片居中计算公式 ,先将图片左移图片一半距离
在向右移动父元素(.box)一半的距离
*/
position: relative;
/* left: ; 设置图片的一半*/
/* 设置图片自身的一半 */
transform: translate(-50%);
/* 设置父元素的一半 */
margin-left: 50%;
}
设置背景图片居中:
div {
/* 缺点:必须设置高度, 否则不显示图片*/
height: 400px;
background-image: url(..\img\mhxy.jpg);
/* 1.设置背景图片自适应水平居中 */
background-position: center -81px;
/* 2.设置相对位置(后面) */
}
- 设置相对位置:通过设置img的position以及计算图片左移图片长度的一半,在right:父元素窗口的一半[==希望图片向左移动的距离:
画布和视口
- 视口(Vierport)
- 文档的可是区域
- 画布(canvas)
- 用于渲染文档的区域
- 文档内容超出视口范围,可以通过滚动查看
- 宽高对比
- 画布>视口
- 视口(Vierport)
脱标元素的特点(position:absolute,fixed,float,)
- 可以随意设置宽高
- 宽高默认有内容决定
- 不支持标准流的约束
- 不在严格按照从上到下,从左到右排布
- 不在严格区分块级,行内级,行内块级的很多特性都会消失
- 不在给父元素汇报宽高数据
- 脱标元素内部默认还是按照标准流布局
position总结
空 | 脱离标准流|定位元素|绝对定位元素|定位参照对象
—|—|—|—|—|—
static静态定位|x|x|x|x
relative相对定位 | x|是|x|相对于元素原来的位置定位
absolute绝对定位|是|是|是|最邻近的定位祖先元素(找不到参照视口)
fixed固定定位|是|是|是|视口
- 元素的层叠
父子关系 | header 2 | 子元素会层叠在父元素上 |
---|---|---|
非父子关系 | 都是非定位元素 | 在标准流中一般不存在层叠现象 |
一个是定位元素,一个是非定位元素 | 定位元素会层叠在非定位元素上面 | |
非父子关系 | 都是定位元素 | 使用CSS属性z-index来控制层叠顺序 |
==ps:z-index针对的是定位元素设置层叠顺序==
- z-index
- z-index属性用来设置定位元素的层叠顺序(==仅对定位元素有效)==
- 取值可以是正整数、负整数、0,默认为auto
- 比较原则
- 如果是兄弟关系
- z-index越大,层叠在越上面
- z-index相等,写在后面的那个元素层叠在上面
- 如果不是兄弟关系
- 各自从元素自己以及祖先元素中,找出最邻近的2个定位元素进行比较
- 而且这2个定位元素必须有设置z-index的具体数值
- ==脱离标准流的元素: position: fixed/absolute, float和display有什么关系?==无
- ==定位元素float以后,就会脱离标准流,自动变成block元素,所以没有必要在单独设置display属性(会报警告),脱离标准流以后的block元素会包裹内容而不是占据整行==
- ==绝对定位和相对定位设置居中的比较:==
- 定位方案
- CSS中有三种常用的方法对元素进行定位布局
- normal flow
- absolute:标准流 positioning:绝对定位
- float:浮动
- 绝对定位,浮动都会让元素脱离标准流,已达到灵活布局的效果
- CSS中有三种常用的方法对元素进行定位布局
- float
- none:不浮动
- left
- right
- 浮动规则
- ==规则一==:元素一旦浮动后
- 脱离标准流
- 朝着向右或者想左的方向移动,知道自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面
- ==规则二==:浮动元素不能与行内级元素层叠,行内级元素会被浮动元素推出
- 比如行内级元素,inline-block,==块级元素的文字内容==
- 利用此特性可以实现图文环绕
- 规则三:行内级元素,inline-block浮动后,其顶部与所在行对齐
- 规则四:如果元素左右浮动,浮动元素不能超过左右包含块的元素
- 规则五:浮动元素之间不能层叠
- 如果一个元素浮动,另一个浮动元素已经在哪个位置了,后浮动的元素将紧贴前一个浮动元素(左浮找左浮,右浮找右浮)
- 如果水平方向剩余空间不够现实浮动元素,浮动元素向下移动,知道有充足的空间为止
- 浮动元素不能超过包含块的顶端,也不能超过之前所有浮动元素的顶端
- ==规则一==:元素一旦浮动后
- display:inline-blick的缺陷:
在设置过程中,vertical-align会设置垂直方向内容出现格式混乱 - 浮动的应用
- 浮动常用的场景(解决行内级元素,inline-block元素的水平间隙,布局)
- ==最后一个元素的margin解决方案==:
- 通过伪类选择器进行设置最后一个元素去除margin-left(==会出现兼容性问题==)
- 通过设置最后一个元素设置class单独进行设置
- 根据块级元素的计算公式:根据margin-left设置-10px,宽度会大于包含块的宽度,从而达到效果,将两边多出去的内容hideen起来了,父元素设置的是auto
1
2
3
4width=auto时
width=content-width+margin-left+margin-right+padding-left+padding-right+border-left+border-right 若padding-width=0.border-width=0
上式依然成立
此时可以给auto的元素[父元素]设置matgin-left(反之对应)设置一个负值
- ==浮动中解决边框重叠问题==:增加边框后计算增加的像素(border增加的长度)设置整体边框增加相同的负像素值,使边框重叠
- ==浮动存在的问题(高度塌陷)==
- 由于浮动脱离了标准流,所以不再向父元素汇报高度
- 父元素计算总高度时,就不计算浮动子元素的高度,导致高度塌陷的问题
- 解决父元素高度塌陷的问题一般叫做清浮动(清理浮动,清除浮动)
- ==清浮动的目的==:让父元素计算高度时,把浮动元素的高度也计算进去
- ==清除浮动的解决方案==
- 给父元素设置固定的高度(扩展性不要)
- 在父元素的最后增加一个空的块级元素,并让它设置clear:both
- 会增加很多无意义的标签,维护麻烦
- 会违反结构与央视分离的原则
- 在父元素最后增加一个br标签:
- 会增加很多无意义的空标签,维护麻烦
- 违反了结构与样式分离的原则(不推荐)
- 给父元素增加::after微伪元素(是行内元素需要将其设置为块)
- 纯CSS样式解决,结构样式分离(推荐)
1
2
3
4
5
6
7
8
9
10
11.clear-fix::after {
content: "";
<!--伪元素是行内元素-->
display: block;
clear: both;
height: 0;/*兼容浏览器*/
visibility: hidden;/*兼容旧浏览器*/
}
.clear-fix {
*zoom: 1;/*兼容IE6-7浏览,设置缩放器*/
}
- 纯CSS样式解决,结构样式分离(推荐)
- 定位方案对比
定位元素 | 应用场景 | ||
---|---|---|---|
normal flow | 垂直布局 | ||
absolute positioning | 层叠布局 | ||
float | 水平布局 | ||
#### CSS补充知识点 | |||
- transform | |||
- CSS transform属性允许你旋转,缩放,倾斜,评平移给定元素 | |||
- transform是形变 | |||
- 常见的函数: | |||
- 平移:translate(x,y) | |||
- 一个值设置水平方向 | |||
- 2个值设置水平和垂直方向 | |||
- 可设置的类型有:百分比和数值)(==百分比是相对于自身的length进行设置的==) | |||
- 缩放:scale(x,y) | |||
- 一个值:表示x,y缩放相同的倍数 | |||
- 2个值表示x,y分别缩放倍数 | |||
- 值类型:数字(1:保持不变,2放大一倍,0.5缩小一半),不支持百分比 | |||
- 旋转:rotate(deg) | |||
- 一个值表示旋转的角度 | |||
- 值类型 | |||
- deg:旋转角度,单位 | |||
- 正数为顺时针 | |||
- 负数为逆时针 | |||
- 旋转的原点手transform-origin的影响 | |||
- 倾斜:skew(deg,deg) | |||
- 一个值表示x轴上的倾斜 | |||
- 两个值表示x.y上的倾斜 | |||
- 值类型: | |||
- deg 旋转的角度 | |||
- 正数为顺时针 | |||
- 负数为逆时针 | |||
- 注意:旋转的原点受transform-origin的影响 | |||
- 通过上面的函数,可以对某个元素进行形变 | |||
- transform-origin属性 | |||
- 变形的原点和transform:scale一起使用 | |||
- 值类型 | |||
- 一个值x轴的原点 | |||
- 两个值x,y的原点 | |||
- ==必须是 |
|||
- 过渡动画-transition css属性(放在属性本身css样式中) | |||
- transition-property指定应用过渡属性的名称(==有些属性不能做过渡动画==) | |||
- 可以写all表示所有可动画的属性 | |||
- 属性是否支持动画查看文档 | |||
- transition-duration指定过渡所需的时间 | |||
- 单位::秒s,毫秒ms | |||
- transition-timing-function:指定动画的变化曲线 | |||
- [查看文档值](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function | |||
)ease(默认),ease-in,ease-out,ease-in-out,linear,cubic-bezier(0.1, 0.7, 1.0, 0.1),step-start,step-end,steps(4, end), | |||
- transition-delay 指定过渡执行之前的等待时间 | |||
|
|||
#### vertical-align深入理解 | |||
- vertical-align ==会影响行内级元素在一个行盒中垂直方向的位置== | |||
- 一个div没有设置高度的时候,没有内容,没有高度;有内容,内容撑起来高度 | |||
- 内容撑起来高度的本质是内容有行高(ine-height)撑起了div的高度 | |||
- 行高之所以能撑起div的高度: | |||
- 因为line-bix(行盒)的存在,并且line-box有一个特性,包裹每行的inline level | |||
- 二其中的文字是有行高,必须将整个行高包裹进来,才算包裹整个inline-level | |||
- 如果div元素中有图片文字,inline-block设置了margin 属性都算在行盒中 | |||
- line-boxes一定会想办法包裹住当前行中所有的内容。 | |||
- ==vertical-align的对齐方式默认是baseline==(常用的对齐方式如下) | |||
- ==文本的baseline是字母x的下方== | |||
- ==Inline-block默认的baseline是margin-bottom的底部(没有,就是盒子的底部)== | |||
- ==Inline-block有文本时,baseline是最后一行文本的x的下方== | |||
- vertical-align不同取值 | |||
- baseline(默认值):基线对齐 | |||
- top:把行内级盒子的顶部跟line-box顶部对齐 | |||
- middle:行内级盒子的中心点和父盒基线加上x-height一半的线对齐 | |||
- bottom:把行内级盒子的底部跟line-box底部对齐 | |||
- |
|||
- |
==ps:vertical-align设置为baseline时,行内级元素下面会空出1像素是由于基线对齐的原因(设置为bottom,middle就会消失)==
- ==两种设置图片在行盒中垂直居中的方式==(图片始终和文字的x的中间点对齐的,所以文字不居中,图片永远不会居中.如果强行让图片居中有两种设置方式):
- 通过vertical-align设置:父元素中设置line-height,fobt-size:0,img元素中设置verticle-align:middle(这样图片中间才会对齐,不会收字体格式x位置的影响)
1
2
3
4
5
6
7
8
9
10
11.box {
height: auto;
line-height: 400px;
/* 如果要设置图片居中,设置字体为0,图片就会居中 */
font-size: 0;
}
img {
/* 去除img底部的是像素,通过bottom等,不是基线对齐,图片下方便不会有多出的像素 */
vertical-align: middle;
} - 通过绝对定位设置:img元素设置相对定位,设置top:50%(元素本身高度的一半),在向上移动图片元素自身的50%==ps: margin-top:设置百分比参考的是元素的宽度设置的==
1
2
3
4
5
6
7
8img {
position: relative;
/* top设置百分比相对高度设置 */
top: 50%;
transform: translate(0,-50%);
}
- 通过vertical-align设置:父元素中设置line-height,fobt-size:0,img元素中设置verticle-align:middle(这样图片中间才会对齐,不会收字体格式x位置的影响)
HTML5和CSS3理解
根据元素的显示类型分为两大类:
- HTML5是定义HTML标准的最新版本
- 狭义的HTML说的是HTML新的元素和属性
- 广义的html5说的是HTML5的新的标准包括:HTML元素+CSS新特性+JavaScript
- CSS3目前并不存在真正意义上的CSS3,只是对某些Module level3的统称
- 关于level3是否已经成为标准,查阅文档
- 可以通过兼容性查询网站caniuse
- HTML5是定义HTML标准的最新版本
语义化元素
- html5之前网站常用的分布层级通常包括:header,nav,main,footer
- html5新增的语义化语义化元素
1
2
3
4
5
6
7- <header>:头部元素
- <nav>:导航元素
- <section>:定义文档某个区域的元素
- <article>:内容元素
- <aside>:侧边元素
- <footer>:尾部元素
全部都是块级块元素
媒体元素
- video:html5增加了对媒体类型的支持(5之前通过flash插件和其他插件实现)
- video 元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放
- 元素常见属性:
- src:媒体来源
- controls:增加控制工具栏
- autoplay:自动播放当存在兼容性问题
- muted静音播放
- loop:循环播放
- source元素
- 如果存兼容性问题,可以将多个视频的数据源放到source元素中
- src:通过src指定数据来源
- audio:音频元素
- 和video类似
- video:html5增加了对媒体类型的支持(5之前通过flash插件和其他插件实现)
input元素的扩展
- HTML5对input也进行了扩展,在之前我们已经学习过的其中几个属性也是HTML5的特性:
- placeholder:输入框的占位文字(还有伪元素)
- multiple多个值(select)
- autofocus:最多输入的内容
- input元素的type值的扩展
- data
- time
- number
- tel
- color:颜色选择器
- email等
- HTML5对input也进行了扩展,在之前我们已经学习过的其中几个属性也是HTML5的特性:
网络字体
- @font-face可以让网页支持网络字体(Web Font),不再局限于系统自带的字体
- 常见的字体类型
- TrueType字体:拓展名是 .ttf
- OpenType字体:拓展名是 .ttf、.otf,建立在TrueType字体之上
- Embedded OpenType字体:拓展名是 .eot,OpenType字体的压缩版
- SVG字体:拓展名是 .svg、 .svgz
- web开放字体:拓展名是 .woff,建立在TrueType字体之上
- 并不是所有浏览器都支持以上字体,使用时要多加测试
- 字体下载地址
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>
@font-face {
font-family: "ftt";
/*这里只能写一种字体的不同不同格式,多种字体就要分开写*/
src: url("./font/ZhiMangXing-Regular.ttf"),
url(""./font/ZhiMangXing-Regular.otf")
}
@font-face {
font-family: "test" ;
src: url("./font/叶根友微典.ttf");
}
p {
font-family: "ftt";
font-size: 30px;
}
strong {
font-family: "test";
/* font-weight: 600px; */
}
span {
font-family: "test";
font-size: 70px;
}
</style>
字体图标
- 两种用法
- 直接使用最元素的方式引入到html文件中的style,在家字体图标的编码写在html文件中
- 使用已经编辑好的css文件,引入到html文件中,在style中设置font-family,将css中对应的类添加到元素的类标签中
- 伪元素在添加类标签过程写法:\e6be
- 正常添加类标签:
- ==既然是字体图标就有字体的基本属性可以对其进行设置==
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
341.直接引入的方式
@font-face {
font-family: "iconfont";
src: url("./font/iconfont.svg"),
url("./font/iconfont.ttf"),
url("./font/iconfont.woff"),
url("./font/iconfont.woff2"),
url("./font/iconfont.eot");
}
span {
/* 既然是字体图标就有字体的基本属性可以对其进行设置 */
font-family: "iconfont";
color: red;
font-size: 40px;
}
2.通过css引入方式
<link rel="stylesheet" href="./font/iconfont.css">
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
2.1通过css中的伪元素引入的方式
.icon-Arrowdown:before {
content: "\e6be";
}
<span class="icon-Arrowdown"></span>
3.注意这里不用再写图标字体的编码
4.这里如果要对引入的iconfont进行字体等的重新设置可以:
span.iconfont {
/* 既然是字体图标就有字体的基本属性可以对其进行设置 */
font-family: "iconfont";
color: red;
font-size: 40px;
}
- 字体图标好处
- 放大不会失真
- 可以任意切换颜色
- 用到很多图标时,文件相对图片较小
- 字体图标的使用:
- 登录阿里icons(https://www.iconfont.cn/)
- 选择自己要用的图标,添加到项目
- 下载代码,并且拷贝到项目中
- 通过link引入iconfont.css文件
- 两种用法
transform的多个属性值
- transform中的设置多个属性值之间通过空格进行链接
==正则表达式中的语法格式==
- ==在语法格式中:
+中的+符号表示通过空格进行连接== - ==
#的#符号表示通过逗号进行连接== 1
2transform: translate(200px, 0) scale(2);
box-shadow: 10px 5px 5px black,2px 2px 2px 1px rgba(0, 0, 0, 0.2);
- ==在语法格式中:
动画补充aimation
关键帧动画
- 之前我们学习如果我们希望可以有更多状态的变化,可以直接使用关键了transition来进行过渡动画,但是过渡动画只能控制首尾两个值:
- 从关键帧动画的角度相当于只是定义了两帧的状态:第一帧和最后一帧。
- 帧动画。
- 关键帧动画使用@keyframes来定义多个变化状态,并且使用animation-name来声明匹配:
- 使用 @keyframes创建一个规则
- @keyframes中使用百分比定义各个阶段的样式
- 通过animation将动画添加到属性上
- 另外,也可以使用from和to关键字
- from相当于0%
- to相当于100%
- 之前我们学习如果我们希望可以有更多状态的变化,可以直接使用关键了transition来进行过渡动画,但是过渡动画只能控制首尾两个值:
animation属性
- CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式
- animation-name:指定执行哪一个关键帧动画
- animation-duration:指定动画的持续时间
- animation-timing-function:指定动画的变化曲线
- animation-delay:指定延迟执行的时间
- animation-iteration-count:指定动画执行的次数,执行infinite表示无限动画
- animation-direction:指定方向,常用值normal和reverse
- animation-fill-mode:执行动画最后保留哪一个值
- none:回到没有执行动画的位置
- forwards:动画最后一帧的位置
- backwards:动画第一帧的位置
- animation-play-state:指定动画运行或者暂停(在JavaScript中使用,用于暂停动画)
ps:==animation后面是可以跟多个动画,查看web mdn(
- 3D动画的实现
- css实现3D动画:
- 在父元素中设置视距:
- 在元素自身设置3d动画的时候,不许用transform开启3d动画
- three.js实现动画
- 网址:three.js网址
1
2
3
4
5
6
7开启视距
body {
/* 设置视距 */
perspective: 1000px;
}
开启3d动画:
transform-style: preserve-3d;
- 网址:three.js网址
- css实现3D动画:
- 浏览器私有前缀
- 有时候会看到css属性前带有:-o-,-xv-,-ms-,mso-,moz,-webkit-
- 上述前缀叫做浏览器私有前缀,只有对应的浏览器才能解析使用
- -o-、-xv-:Opera等
- -ms-、mso-:IE等\
- -moz-:Firefox等
- -webkit-:Safari、Chrome等
- 官方文档给出的专业术语叫做:vendor-specific extensions(供应商特定扩展)(==不需要手动添加,后面学习了模块化打包工具会自动添加浏览器前缀==
)
- CSS属性-text-overflow(用于处理文字显示省略的问题)
- white-space用于设置空白处理和换行规则
- normal:合并所有连续的空白,允许单词超屏时自动换行
- nowrap:合并所有连续的空白,不允许单词超屏时自动换行
- text-overflow通常用来设置文字溢出时的行为处理(处理不可见的内容)
- clip:溢出的内容直接裁剪掉
- elipsis:溢出哪行的结尾处省略号表示
- text-overflow生效的前提是overflow不为visible
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15* 让有固定高度的元素永远只显示一行元素
height: 100px;/*必须要有固定高度*/
/*文字在一行显示 */
/* 文字超出后是否自动换行 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
* 没有固定高度的元素在两行显示
/* 文字在两行显示 */
height: auto;/*高度为auto或者不写*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
- white-space用于设置空白处理和换行规则
- 移动端的适配问题
- 视口大小:viewport
1
2
3
4<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta常用来设置移动端适配问题,主要的属性name和content
- name="viewport"
- content中的width表示移动端的视口大小;initial-scale表示初始大小是否缩放,一般不会缩放默认设置为1 - 移动端默认视口大小为980px,所有元素在移动端没有设置视口的情况下都会被缩小
- width:设置视口的大小
- initial-scale:设置缩放的比例
- rem适配
- 设置内容大小的方式:
- 单位px:设置为固定的css像素
- 单位em:相对于父元素的字体
- 自己设置了font-size相对于自己进行设置
- 自己没有设置,em相对于父元素进行设置
- 单位rem相对于根元素的字体大小
- 百分比:取决于应用的属性(比如字体的百分比相对于父元素的字体,宽度的百分比相对于父元素的宽度)
- ==移动端开发中我们经常使用rem来进行适配,设置html的font-size==
- 使用媒体查询
- 通过js动态加载(最优方案)目前会引入即可
1
2
3
4
5
6
7
8
9@media screen and (min-width: 375px){
html {
font-size: 10px;
}
}
@media screen and (min-width: 375px){
html {
font-size: 11px;
}
- 设置内容大小的方式:
- 动态计算rem的值
- 利用vscode的插件快速转换
- 插件:px to rem
- 快捷键:alt+z
- 利用postcss-pxtorem(最优方案)通过打包工具自动修改单位
- 利用less、sass、stylus的计算能力
- 利用vscode的插件快速转换
- 视口大小:viewport
- 认识布局是目前web开发最多的布局方案
- flex布局(flexible布局,弹性布局)
- 目前特别在一定端使用最多,pc端也越来越多
- 重要概念
- 开启了flex布局的元素叫做flex container
- flex container里面的直接子元素叫做flex items
- 设置display属性为flex或者inline-flex可以成为flex container
- flex’:flex container以block-level形式存在
- inline-flex:以inline0block的形式存在
- flex布局模型
- main axis主轴
- cross axis交叉轴
- main start,main end,cross start,cross end
- flex相关属性
- 应用在flexcontainer上的属性
- flex-flow
- flex-dirextion:
- flex-wrap
- justify-items
- align-content
- 应用在flex items上的属性
- flex
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- 应用在flexcontainer上的属性
应用在flex container上的属性
- flex-direction:flex-item默认都是沿着main axis(主轴)从main start开始往main end方向排布
- flex-direction决定了main axis的方向,有四个取值
- row(默认值)
- row-reverse
- column
- column-reverse
- flex-direction决定了main axis的方向,有四个取值
- justify-content决定了flex-items在main axis上的对齐方式
- flex-start(默认值):与main start对齐
- flex-end:与main end对齐
- center居中对齐
- space-between
- flex items之间的距离等距
- 与main start和main end两端对齐
- space-evenly:
- flex-items之间的距离相等
- flex items与main start,main end之间的距离等于flex items之间的距离
- sapce-around
- flex items之间的距离相等
- flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- align-items决定了flex-items在cross axis上的对齐方式
- normal:在弹性布局中和strech一样(==当items元素高度为auto时或者不设置则会下拉铺满cross axis==)
- stretch:flex items在cross axis方向的size为auto时,会自动拉升填充至flex container
- flex-start:与cross start对齐方式一样
- flex-end:与flex end对齐方式一致
- center:居中对齐
- baseline:与基线对齐
- flex-wrap:决定flex是单行还是多行
- normal:默认,单行
- wrap:多行
- wrap-reverse:多行(对比 wrap,cross start 与 cross end 相反)
- flex-flow是flex-dirextion||flex-wrap的缩写
- 可以省略,顺序任意
- align-content决定了多行flex items在cross axis上的对齐方式,用法与juestify-content类似
- order决定了flex items的排布顺序
- 可是设置任意整数(正整数,负整数.0),值越小就越排在前面
- 默认值为0
- align-self可以通过设置align-self覆盖flex container的设置的align-items
- auto(默认):遵从flex container的align-items
- stretch,、flex-start、flex-end、center、baseline,效果跟 align-items 一致
- flex-grow
- 决定了flex-item如何进行扩展
- ==可以设置任意非负数自(正整数,负整数,0)默认值为0==
- 当flex container在main axis上有剩余size时,flex-grow才有效果
- 如果所有 flex items 的 flex-grow 总和 sum 超过 1,每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
- 如果所有 flex items 的 flex-grow 总和 sum 超过 1,每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
- 如果所有 flex items 的 flex-grow 总和不超过 1,每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow
- flex items 扩展后的最终 size 不能超过 max-width\max-height
- 决定了flex-item如何进行扩展
- flex-shrink
- flex-shrink 决定了 flex items 如何收缩
- ==可以设置任意非负数字(正小数、正整数、0),默认值是 1==
- 当 flex items 在 main axis 方向上超过了 flex container 的 size,flex-shrink 属性才会有效
- 如果所有 flex items 的 flex-shrink 总和超过 1,每个 flex item 收缩的 size为
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
- 如果所有 flex items 的 flex-shrink 总和 sum 不超过 1,每个 flex item 收缩的 size为
- flex items 超出 flex container 的 size * sum * 收缩比例 / 所有 flex items 的收缩比例之和
- 收缩比例 = flex-shrink * flex item 的 base size
- base size 就是 flex item 放入 flex container 之前的 size
- flex items 收缩后的最终 size 不能小于 min-width\min-height
- flex-shrink 决定了 flex items 如何收缩
- flex
- flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个,2个或3个值。
- 单值语法: 值必须为以下其中之一
- 一个无单位数(
): 它会被当作 的值。 - 一个有效的宽度(width)值: 它会被当作
的值 - 关键字none,auto或initial
- 一个无单位数(
- 双值语法: 第一个值必须为一个无单位数,并且它会被当作
的值。 - 一个无单位数:它会被当作
的值。 - 一个有效的宽度值: 它会被当作
的值。
- 一个无单位数:它会被当作
- 三值语法
- 第一个值必须为一个无单位数,并且它会被当作
的值。 - 第二个值必须为一个无单位数,并且它会被当作
的值。 - 第三个值必须为一个有效的宽度值, 并且它会被当作
的值。
- 第一个值必须为一个无单位数,并且它会被当作
实践知识点总结:
- width ,height不会继承,line-height会继承
- margin-top设置相对于父元素的==宽度==设置的
- top,left设置相对于父元素设置的
- ==transform对行内元素无效==若要进行变换修改display为inline-block
- display
- display:none:隐藏而不占位
- inline:
- 行内元素,
- 不能设置宽高,margin-top,margin-bottom
- padding-top/bottom,border-top/bottom比较特殊不占用位置
- 会和其他元素在同一行显示
- inline-block
- 行内级元素
- 设置宽度高度,行内元素不能设置的都能设置
- 当为图片设置了z-index为负值时,会出现a元素中的img元素不会将a元素撑起来;z-index只用在定位元素中
- 给内容设置颜色字 体等属性尽量设置到行内元素自身
- 轮播图中设置按钮需要放在a元素里面,否则会出问题
- 用于隐藏的三种方式:
- display:hidden(不支持动画)
- visibility:none
- opacity:0(0:不显示,1:显示)支持动画
- ==设置不同元素的居中显示==
- 行内块级元素设置居中显示:在父元素中设置text-align:center
- 设置元素为绝对定位后,设置定位元素铺满背景,设置top,right,bottom,left为0;
- 设置absolute元素居中,设置,left/right为0.设置margin:auto,0;反之
- 设置relative元素的居中显示,根据计算left:50%,transform:translate(-50%,0)
- 清除浮动是在浮动元素的父元素中添加浮动
- 元素居中显示设置height=line-height
- transition动画对display不能使用,对opacity可以使用
- 渐变背景设置:background: linear-gradient(90deg,red,#ff3264);
- line-height可以使字体居中的原因:间距会自动等分
快捷键
- Alt+shift+F,代码格式化
- alt+shift+鼠标拖动(复制竖行元素,在alt+shifit+鼠标拖动粘贴)
- alt+下键,将内容下移
- 颜色设置中#666(相同的数字代表灰色)
- 颜色选择网址
- web前端资源网”学习网址”
- 网站模板
- CSS雪碧图制作网站
- 版本管理工具
- svn
- git
- 阿里图标库获取图标
- 兼容性查询网站
- 字体下载地址
- 3d动画网址
- 图标编辑网址
本文链接: https://sparkparis.github.io/2020/03/24/HTML-%E7%AC%94%E8%AE%B04/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!