学习总结（第八周）

最新推荐文章于 2024-09-14 21:53:48 发布

多多米1005

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量1.7k

点赞数 45

文章标签：学习前端

本文链接：https://blog.csdn.net/2302_80244686/article/details/134902168

版权

文章目录

学习总结
考试总结
下周计划
生活碎片

学习总结

一.边框

border-radius 边框圆角

border-radius: 10px 5px 20px 15px;
左上右上右下左下

box-shadow 阴影

border-image 指定图片作为边框

outline 外轮廓

outline 复合属性
outline-width 宽度
outline-color 颜色
outline-style 样式（solid实线，dotted点状，dashed虚线，double双线轮廓）
outline-offset 设置外轮廓与边框的距离，正负值都可以（不是outline的子属性，是一个独立的属性）

二、文本属性

文本阴影text-shadow

text-shadow：10px 10px 10px red；
水平阴影垂直阴影模糊距离阴影颜色

文本换行

white-space
常用值：
normal 文本超出边界自动换行，文本中的换行被浏览器识别为空格（默认值）
pre 原样输出与pre标签的效果相同
pre-wrap 在pre的效果基础上，超出元素边界自动换行
pre-line 在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
nowrap强制不换行
文本溢出
text-overflow
clip当内敛内容溢出时，将溢出部分裁切掉。（默认值）
ellipsis当内敛内容溢出块容器时，将溢出部分替换为…。
注意：要使得text-overflow生效，块容器必须显示定义overflow为非visible值（eg：hidden），white-space为nowrap值

文本修饰

text-decoration属性，让其变成了复合属性
子属性及其含义：
none：指定文字无装饰（默认值）
underline：指定文字的装饰是下划线
overline：指定文字装饰线是上划线
line-through：指定文字的装饰是贯穿线
text-decoration-style文本装饰线条的形状
solid：实线（默认）
double：双线
dotted：点状线条
dashed：虚线
wavy：波浪线
text-decoration-color文本装饰线条的颜色

文本描边

注意：文字描边功能仅webkit内核浏览器支持
-webkit-text-stroke-width：设置文字描边的宽度，写长度值。
-webkit-text-stroke-color：设置文字描边的颜色，写颜色值。
-webkit-text-stroke：复合属性，设置文字描边宽度和颜色。

三、背景

background-origin

作用：设置背景图的原点
语法：
padding-box：从padding区域开始显示背景图像（默认值）
border-box：从border区域开始显示背景图像
content-box：从content区域开始显示背景图像

background-clip

作用：设置背景图的向外裁剪的区域
语法：
border-box：从border区域开始向外裁剪背景。（默认）
padding-box：从padding区域开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：背景图只呈现在文字上
注：若值为text，那么background-clip要加上-webkit-前缀

background-size

作用：设置背景图
语法:
1.用长度值指定背景图片大小,不允许负值。
background-size: 300px 200px;
2. 用百分比指定背景图片大小,不允许负值。
background-size: 100% 100%;
3.auto：背景图片的真实大小。 – 默认值
4.contain：将背景图片等比缩放,使背景图片的宽或高,与容器的宽或高相等,再将完整背景图片包含
在容器内,但要注意:可能会造成容器里部分区域没有背景图片。
background-size: contain;
5.cover：将背景图片等比缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要注意:背景
图片有可能显示不完整。 – 相对比较好的选择
background-size: cover;

background复合属性

语法：
background:color url repeat position / size origin clip
注意：
1.origin和clip的值如果一样，如果只写一个值，则origin和clip都设置；如果设置了两个值前面的是origin，后面的clip。
2.size的值必须写在position值后面，并且用/分开。

四、渐变

线性渐变

1.从上到下线性渐变
#grad {
background-image: linear-gradient(#e66465, #9198e5);
}
2.从左到右线性渐变
#grad {
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
3.从左上到右下
#grad {
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
4.带有多个颜色节点的从上到下的渐变
#grad {
background-image: linear-gradient(red, yellow, green);
}
6.带有指定的角度的线性渐变
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}

径向渐变

多颜色渐变默认从圆心四散（注：不一定是正圆，要看容器本身宽高比）
background-image：radial-gradient(red,yellow,green);
使用关键词调整渐变的圆心位置
background-image：radial-gradient(at right top,red,yellow,green);
使用像素值调整渐变的圆心位置
background-image：radial-gradient(at 100px 50px,red,yellow,green);
调整渐变形状为正圆
background-image：radial-gradient（circle，red，yellow，green）；
调整形状的半径
background-image：radial-gradient（100px 100px，red，yellow，green）；

五、transform变形

2D转换

translate移动

translatex( )：仅在水平方向移动
translatey( )：仅在竖直方向移动
translate(x，y)：同时移动

rotate旋转

rotate（度数）
正数顺时针
负数逆时针

scale缩放

scaleX（）
scaleY（）
scalex（）
大于1放大，小于1缩小

skew倾斜

实现元素的倾斜
skewX( )
skewY( )
skew( )

transform–origin

改变旋转的基点
如果设置两个值，第一个值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置

3D转换

translate移动

transform:translateX( ) 在X轴移动
transform:translateY( ) 在Y轴移动
transform:translateZ( ) 在Z轴移动
（往外是正值，并且值越大，物体越大；反之，数值越大，物体越小）
transform:translate3d(x,y,z)
perspective透视

rotate旋转

3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。
rotateX: 让元素围绕X轴转
rotateY:让元素围绕Y轴旋转
rotateZ: 让元素围绕Z轴旋转
rotate3d: 让元素围绕固定轴旋转不变形
旋转量由角度决定,角度为正则顺时针旋转,反之逆时针旋转

六、transition过渡

transition-property:指定过渡的CSS属性。
transition-duration:指定完成过渡所需的时间。默认是0。
transition-timing-function: 指定过渡调速函数。默认是“ease"。
transition-delay:指定过渡开始出现的延迟时间。默认是0。

transition-property属性

transition-property:规定应用过渡的css属性的名称.
允许取值:1、none:没有属性会获得过渡效果
2、all:默认值,所有属性都将获得过渡效果
3、property:定义应用过渡效果的CSS属性名称列表

transition-duration属性

transition-duration:定义过渡效果花费的时间。
允许取值:time值,它是以秒和毫秒计,默认是0,意味着没有效果。

transition-timing-function

transition-timing-function:规定过渡效果的时间曲线。主要包括下面几个属性值。
ease:默认值,元素样式从初始状态过渡到终止状态时速度由快到慢,逐渐变慢。
linear:元素样式从初始状态过渡到终止状态速度是恒速。(匀速)
ease-in:元素样式从初始状态过渡到终止状态时,速度越来越快,呈一种加速状态。这种效果称为渐显效果。(加速)
ease-out:元素样式从初始状态过渡到终止状态时,速度越来越慢,呈一种减速状态。这种效果称为渐隐效果。(减速)
ease-in-out:元素样式从初始状态到终止状态时,先加速再减速。这种效果称为渐显渐隐效果。

transition-delay

transition-delay:规定效果开始之前需要等待的时间
允许的值:time值,以毫秒和秒计,默认是0。
transition属性类似于border,font这些属性,可以简写,也可以单独来写。简写时,各函数之间用空格隔开,且需要按一定的顺序排列。另外,作用于多个过渡属性时,中间用逗号隔开。

animation动画

ananimation 属性

animation 属性是一个简写属性,用于设置六个动画属性:
animation-name:规定需要绑定到选择器的keyframe名称。换句话说此处的name要和keyframes中的name一致,如果不一致,将不能实现任何动画效果。
animation-duration:规定完成动画所花费的时间,以s秒或毫秒计。默认是0。
animation-timing-function:规定动画的速度曲线。默认是“ease"。
值描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始T
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
animation-delay:规定在动画开始之前的延迟。默认是0。
animation-iteration-count:规定动画应该播放的次数。默认是1。infinite为无限次数循环
animation-direction：规定是否应该轮流反向播放动画。其中有两个值,默认值为normal,如果设置为normal时,动画每次循环都是向前播放;另外一个值alternate:作用是动画播放在第偶次数时向前播放,第奇数次时向反方向播放。

@keyframes规则是创建动画

@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式
当在@keyframes创建动画，把它绑定到一个选择器上，否则动画不会有任何效果
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
在这里插入图片描述
描述
动画从头到尾的速度是相同的。

transition&animation区别

transition需要事件进行触发
animation不需要事件进行触发

七、按钮button

background-color设置颜色
可用font-size设置按钮大小
border-radius设置圆角
border设置边框 border：2px solid red;
:hover鼠标悬停样式
transition-duration属性来设置hover效果的速度
box-shadow属性来为按钮添加阴影
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
opacity属性为按钮添加透明度
cursor属性并设置为not-allowed来设置禁用的图片

水波纹按钮

在这里插入图片描述

八、弹性盒子

通过设置display的属性值为flex或inlin-flex将其设为弹性容器
弹性子元素通常在弹性盒子内一行显示，默认情况每个容器只有一行，从左到右
设置direction属性为rtl(right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变

flex-direction

● row：横向从左到右排列（左对齐），默认的排列方式。
● row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
● column：纵向排列。
● column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content

内容对齐，把弹性项沿着弹性容器的主轴线对齐
● flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
● flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
● center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
● space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
● space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

align-items

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
● flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
● flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
● center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
● baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
● stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
在这里插入图片描述

flex-wrap

用于指定弹性盒子的子元素换行方式
● nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
● wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
● wrap-reverse -反转 wrap 排列。

align-content

用于修改flex-wrap属性的行为，类似于align-items，但它不是设置弹性子元素的对齐，而是设置各个行的对齐
● stretch - 默认。各行将会伸展以占用剩余的空间。
● flex-start - 各行向弹性盒容器的起始位置堆叠。
● flex-end - 各行向弹性盒容器的结束位置堆叠。
● center -各行向弹性盒容器的中间位置堆叠。
● space-between -各行在弹性盒容器中平均分布。
● space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

弹性子元素属性

排序语法
order 属性设置弹性容器内弹性子元素的属性
integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
对齐
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。
完美居中
设置margin：auto；可以使得弹性子元素在两上轴方向上完全居中

align-self

用于设置弹性元素自身在侧轴(纵轴）方向上的对齐方式
● auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
● flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
● flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
● center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
● baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
● stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

flex

用于指定弹性子元素如何分配空间。
● auto: 计算值为 1 1 auto
● initial: 计算值为 0 1 auto
● none：计算值为 0 0 auto
● inherit：从父元素继承
● [ flex-grow ]：定义弹性盒子元素的扩展比率（放大比例）。
● [ flex-shrink ]：定义弹性盒子元素的收缩比率（缩小比例）。
● [ flex-basis ]：定义弹性盒子元素的默认基准值。设置子元素的宽度；如果同时设flex-basis和width,flex-basis会覆盖width

九、媒体查询

媒体查询可以检测的内容
viewport宽度和高度、设备的宽度和高度、设备的朝向、分辨率
引入方式:
1、在样式表中引入:
1)在style标签对中引入
2)使用link标签引入外部css文件一媒体查询写在css文件中
@media mediaType and(mediafeature){
选择器{ 属性 : 属性值 }
}
mediaType:
○ a11 所有多媒体设备
○ print 打印机或打印预览
○ screen 电脑屏幕、平板电脑、智能手机等
○ speech 屏幕阅读器等发声设备
media feature:
max-width 最大宽度 min-width 最小宽度
device-height 设备高 device-width 设备宽
max-device-width 最大设备宽 min-device-width 最小设备宽
orientation 浏览器朝向
aspect-ratio:1/2 可视区宽度和高度的比率 (max min)
device-aspect-ratio:1/1 输出设备的屏幕可视区宽度和高度的比率
2、通过link标签中的media属性实现：
link rel=“stylesheet” media=“mediaType and (mediaFeature)” href=“css文件路径”