D11
209.2(掌握)transform的介绍以及常见transform-function
-
CSS属性-transform(形变)
-
CSS transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等
-
并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变,比如对span,a元素无效）
-
-
transform的用法----transform-function(函数)
-
常见的函数transform-function有:
-
平移：translate(x, y)
-
缩放：scale(x, y)
-
旋转：rotate(deg)
-
倾斜：skew(deg, deg)
-
-
210(掌握)transform-translate的使用
-
位移:translate
-
平移:translate(x, y)
-
这个CSS 函数用于移动元素在平面上的位置。
-
translate:翻译;平移；
-
-
值个数
-
一个值时，设置x轴上的位移
-
二个值时，设置x轴和y轴上的位移
-
-
值类型
-
数字:100px
-
百分比:参照元素本身
-
-
-
translate的补充
-
translate是translateX和translateY函数的简写。
-
translate的百分比可以完成一个元素的水平和垂直居中：
-
-
1.水平居中的4种方式
(1)行内级元素:
* 设置父元素的text-align:center;
(2)块级元素:
* 设置当前块级元素(宽度)margin:0 auto;
(3)绝对定位
* 元素有宽度的情况下,设置left0/right0/margin:0 auto;
(4)flex
* justify-content:center
2.垂直居中的3种方式
(1))垂直居中:绝对定位
弊端:
a.必须使用定位(脱离标准流)
b.必须给元素设置高度
(2)垂直居中:flex布局
弊端:
a.当前flex布局中所有的元素都会被垂直居中
b.相对来说,兼容性差一点点
(3)垂直居中:top/translate
* 居中做两件事
a.让元素向下位移父元素的50%
b.让元素向上位移自身的50%
注意:margin-top的百分比是相对于包含块(父元素)的宽度
212(掌握)transform-scale的使用
-
缩放：scale(x, y)
-
scale() CSS 函数可改变元素的大小
-
scale函数时scaleX和scaleY的缩写：
-
-
值个数
-
一个值时，设置x轴上的缩放
-
二个值时，设置x轴和y轴上的缩放
-
-
值类型：
-
数字：
-
1：保持不变
-
2：放大一倍
-
0.5：缩小一半
-
-
百分比：百分比不常用
-
213(掌握)transform-rotate的使用
1.rotate旋转
-
旋转：rotate(<angle>)
-
值个数:一个值时，表示旋转的角度
-
值类型：
-
常用单位deg：旋转的角度（ degrees ）
-
正数为顺时针
-
负数为逆时针
rotate补充
-
2.rotate补充
-
rotate函数是rotateZ函数的简写写法
-
rotate的其他单位
-
度(degrees),百分度(gradians),弧度(radians)或圈数(turns)
-
213.1(掌握)transform-origin改形变圆点
-
transform-origin:形变的原点
-
比如在进行scale缩放或者rotate旋转时，都会有一个原点。
-
-
一个值：
-
设置x轴的原点
-
-
两个值：
-
设置x轴和y轴的原点
-
-
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个
-
left, center, right, top, bottom关键字
-
length：从左上角开始计算
-
百分比：参考元素本身大小
-
214(理解)transform-skew和transform设置多个值
-
倾斜：skew(x, y)
-
函数定义了一个元素在二维平面上的倾斜转换。
-
值个数
-
一个值时，表示x轴上的倾斜
-
二个值时，表示x轴和y轴上的倾斜
-
-
值类型：
-
deg：倾斜的角度
-
正数为顺时针
-
负数为逆时针
-
-
注意:倾斜的原点受transform-origin的影响
-
transform设置多个值
-
<transform-function>+
+:表示可以设置一个或多个属性,并且多个属性之间以空格分割
transform:scale() translate();
-
<box-shadow>#
#:一个或者多个,多个之间以,分割
box-shadow:1px 1px 1px #f00,
-
214.1(掌握)CSSTransition的介绍和可动画属性
-
什么是transition动画呢？
-
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
-
可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；
-
比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效；
-
但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；
-
-
通常将两个状态之间的过渡称为隐式过渡（**implicit transitions），因为开始与结束之间的状态由浏览器决定。**
-
CSS transitions 可以决定
-
哪些属性发生动画效果 (明确地列出这些属性)
-
何时开始 (设置 delay）
-
持续多久 (设置 duration)
-
如何动画 (定义timing function，比如匀速地或先快后慢)。
-
-
如何查看属性支不支持动画?
-
方法二: 阅读CSS属性的文档说明
214.2(掌握)CSSTransition的常见属性使用
-
transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
-
transition-property：指定应用过渡属性的名称
-
all：所有属性都执行动画；
-
none：所有属性都不执行动画；
-
CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；
-
-
transition-duration：指定过渡动画所需的时间
-
单位可以是秒（s）或毫秒（ms）
-
transition-timing-function：指定动画的变化曲线
-
transition-delay：指定过渡动画执行之前的等待时间
215(理解)transform-translate-transition区分
-
transform是形变：
-
一个CSS属性，该CSS属性用于设置形变；
-
后面的值是形变的函数，比如scale、rotate、translate；
-
-
translate是其中一个transform-function(范围最小)
-
用于对元素进行平移；
-
-
transition是过渡的意思(范围最广)
-
它本身也有转变的含义，但是更多表示的是过渡的过程；
-
216(理解)元素的宽度和高度变化问题
-
宽度变化时和transition没有关系
217(掌握)transition动画的缺点以及Animat
-
transition过渡动画有如下的缺点：
-
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
-
transition不能重复执行，除非一再触发动画；
-
transition需要在特定状态下会触发才能执行，比如某个属性被修改了
-
-
CSS Animation可以有更多状态的变化
-
CSS Animation的使用分成两个步骤：
-
步骤一：使用keyframes定义动画序列（每一帧动画如何执行）
-
步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
-
-
218(掌握)keyframes和animation的序列帧
1.@keyframes规则
-
可以使用@keyframes来定义多个变化状态,并使用animation-name来声明匹配
-
关键帧用percentage来制定动画发生的时间点
-
0%表示动画的第一时刻,100%表示动画的最终时刻;
-
也可以使用from和to分别表示0%和100%;
-
2.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中使用，用于暂停动画）
219(理解)块级元素中行盒的概念和作用
-
行盒:line box
-
作用:将当前行里面所有的内容全部包裹在一起,对齐方式就是baseline对齐
-
baseline都是谁?
-
文本的baseline是字母x的下方
-
Inline-block默认的baseline是margin-bottom的底部（没有，就是盒子的底部）
-
Inline-block有文本时，baseline是最后一行文本的x的下方(如果有多行文本的话,基线就变成最后一行文本的基线)
-
-
vertical-align的其他值
-
baseline(默认值)：基线对齐
-
top：把行内级盒子的顶部跟line boxes顶部对齐
-
middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
-
bottom：把行内级盒子的底部跟line box底部对齐
-
<percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0cm意味着同baseline一样
-
<length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
-
-
解决图片下边缘的间隙方法
-
方法一: 设置成top/middle/bottom
-
方法二: 将图片设置为block元素
-
221(理解)vertical-align的其他值和居中问题
-
行盒中默认baseline对齐;
-
如果行盒中的红色盒子设置了margin-bottom,那么行盒中的内容就以margin-bottom对齐;
-
如果红色盒子里面有文本,那么其他元素就会和红色盒子中的文本对齐;
-
line-height设置的是一行文本(一个行盒)的高度
-
行盒中有普通文本和图片时,图片设置vertical-align:middle时,图片还是无法居中的,因为middle的时候图片是和文本中x的中心点对齐的,但是x的中心店低于中线,导致图片无法居中对齐.
222(理解)行内块级元素的居中和分离现象
html-css>19vertical-align>08,09行内块级元素
223(掌握)CSS整体内容回顾
224(掌握)项目实战-代码规范说明
-
上课代码规范
-
参考凹凸实验室代码规范(无法打开)
225(掌握)项目实战-CSS编写顺序整理
1.先确定盒子本身是如何布局
-
position: absolute
-
float: left/right
-
display: flex
2.盒子的特性和可见性
-
display: block/inline-block/inline/none
-
visibility/opacity
3.盒子模型
-
width/height
-
box-sizing
-
margin/border/padding/content
-
box-shadow/text-shadow
4.内部的文本文字
-
font/text
5.background
background-image/size/position/color
6.其他
transform/transition/overflow/white-space
226(掌握)项目实战-组件化开发思想
-
先组件化开发最后合并
227(掌握)王者荣耀-top-整体布局完成
-
2种思路
-
思路1:html结构写完再写css的样式
-
思路2:写一个结构,写对的样式,再去写下一个结构,再写对应的样式
-
228(掌握)王者荣耀-top-top-left展示实现
-
可以放在公共部分的名字用_链接,该区域本身的名字用-链接
-
设置text-indent:-9999px是为了seo优化
229(掌握)王者荣耀-top-top-right展示实现
html-css>20HonorOfKing>01page_top
-
2种方式添加图标
230(掌握)王者荣耀-header整体布局实现
html-css>20HonorOfKing>02page_header
231(掌握)王者荣耀-header-logo展示实现
html-css>20HonorOfKing>02page_header
232(掌握)王者荣耀-header-导航展示实现
html-css>20HonorOfKing>02page_header
233(掌握)王者荣耀-搜索和登录展示实现
html-css>20HonorOfKing>02page_header
234(掌握)王者荣耀-main-news区域整体布局
html-css>20HonorOfKing>03page_main_news
235(掌握)王者荣耀-main-news下载区域实现
html-css>20HonorOfKing>04page_main_news
-
-webkit-line-clamp:把块容器中的内容限制为指定的行数,只有在设置display:-webkit-box或者-webkit-inline-box并设置box-orient:vertical时才有效果
-
a元素里面嵌套div时,最好把a元素改成display:block,这样嵌套就可以.
244(掌握)补充
-
meta元素
-
head中用于定义元数据,,比如标题title,样式style,link外部资源,当没有元素标签可以用来定义元数据时,就用meta来进行定义
-
-
meta元素定义的元数据类型包括:
-
如果设置了charset属性,meta元素是一个字符集声明,告诉文档使用哪种字符编码
-
如果设置了http:equiv属性,meta元素则是编译指令
-
如果设置name属性,meta提供的是文档级别的元数据,应用于整个页面
-
-
http:equiv属性:告知浏览器去模仿哪一个浏览器的行为
-
name属性
-
常用的name属性
-
robots:爬虫,协作搜寻器,对此页面的处理行为,应当遵守的规则
-
author:文档作者的名字
-
copyright:版权声明
-
description:一段简短而精确的对页面的描述,将其用作书签的默认描述
-
keywords:与页面内容相关的关键词,使用逗号分割,某些搜索引擎会进行收录
-
-
-
link图标
-
favicon是favorites icon的缩写,也被称为website icon(站点图标)和page icon(页面图标)
-
有多种写法
-
写法1:<link rel="icon" href="https://pvp.qq.com/favicon.ico">
-
写法2:<link rel="shortcut icon" href="https://pvp.qq.com/favicon.ico" type="image/x-icon">
-
-
-
CSS样式的字符编码
-
样式表中有多种方法去声明字符编码,浏览器会按照以下顺序尝试下边的方法(一旦找到就停止)
-
1.文件开头的Unicode byte-order(字节顺序标记)字符值
-
2.由Content-Type:HTTP header中的charset属性给出的值或用于提供样式表的协议中的等效值
-
3.CSS@规则 @charset
-
4.<link>元素的charset属性,不用了
-
5.假设文档是UTF-8
-
-
目录
209.2(掌握)transform的介绍以及常见transform-function
213.1(掌握)transform-origin改形变圆点
214(理解)transform-skew和transform设置多个值
214.1(掌握)CSSTransition的介绍和可动画属性
215(理解)transform-translate-transition区分
217(掌握)transition动画的缺点以及Animat
218(掌握)keyframes和animation的序列帧
221(理解)vertical-align的其他值和居中问题
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
