target伪类
选择器:target{}
若该选择器被超链接设置锚点,则触发超链接时,改变样式。
色彩模式
RGB(A):rgb(0~255,0~255,0~255(,0~1))
HSL(A):hsl(颜色(0~360),饱和度(0%~100%),明度(0%~180%),(0~1))
H5中,明度默认是50%
文字阴影
text-shadow:2px 2px 2px gray;
前两个参数 表示阴影方向(x,y) ++右下 --左上 +-右上 -+左下
第3个参数,表示阴影的模糊程度,越大越模糊
第4个参数,表示阴影的颜色
(添加多个阴影,用逗号分隔)
盒子阴影
box-shadow:h v blur spread color inset
-
h
:水平方向的偏移值 -
v
:垂直方向的偏移值 -
blur
:模糊--可选,默认0 -
spread
:阴影的尺寸,扩展和收缩阴影的大小--可选默认0 -
color
:颜色--可选,默认黑色 -
inset
:内阴影--可选
盒模型
给元素添加的宽高都是给内容区的,所以当设置padding
和border
时,整个元素的宽高会变大,影响其他元素。
可以使用box-sizing
来指定盒模型
-
content-box
:对象的实际宽度等于设置的width
值和border
、padding
之和 -
border-box
:对象的实际宽度就等于设置的width
值,即使定义有border
和padding
也不会改变对象的实际宽度
边框圆角
border-radius
- 1个值:同时设置四个角
- 2个值:左上&右下,右上&左下
- 3个值:左上,右上&左下,右下
- 4个值:左上,右上,右下,左下
添加/
是用来设置当前个不同方向的半径值。
水平x
方向/
垂直y
方向
border-radius: 100px 70px/70px 100px;
线性渐变
linear-gradient(方向,开始颜色 位置,颜色2 位置, 颜色3 位置...)
方向:
-
to top
:0deg -
to right
:90deg -
to bottom
:180deg——默认值 -
to left
:270deg
background: linear-gradient(to right,red 50%,blue 50%);
径向渐变
radial-gradient(形状 大小 坐标)
形状:
circle
:圆形形渐变色ellipse
:适配当前的形状 默认
坐标:
- 默认在正中心,可以赋值坐标,也可以赋值关键字
at Xpx Ypx
- 以元素左上角为原点
at [ left center right top bottom ]
- 可选择任意水平关键字和任意垂直关键字组合
大小:
closest-side
:最近边farthest-side
:最远边closest-corner
:最近角farthest-corner
:最远角- 默认是最远的角
farthest-corner
background:radial-gradient(circle farthest-side at 50px 50px,red,blue);
重复渐变
径向
background:repeating-radial-gradient(circle closest-side at center center,
white 0%,white 10%, //通过位置渐变
black 10%,black 20%);
线性
background:repeating-linear-gradient(45deg,
white 0%,white 10%,
black 10%,black 20%);
背景
- 设置背景平铺
background-repeat:space;
round
:会将图片进行缩放之后再平铺space
:图片不会缩放平铺,只是会在图片之间产生相同的间距值
- 设置在滚动容器的背景的行为:跟随滚动/固定
background-attachment:scroll;
fixed
:背景图片的位置固定不变scroll
:当滚动容器的时候,背景图片也会跟随滚动local
和scroll
的区别:前提是滚动当前容器的内容local
:背景图片会跟随内容一起滚动scroll
:背景图片不会跟随内容一起滚动
- 设置背景坐标的原点
background-origin:content-box;
border-box
:从border的位置开始填充背景,会与border重叠padding-box
:从padding的位置开始填充背景,会与padding重叠content-box
:从内容的位置开始填充背景
- 设置内容的裁切:设置的是裁切,控制的是显示
background-clip:content-box;
border-box
:其实是显示border及以内的内容padding-box
:其实是显示padding及以内的内容content-box
:其实是显示content及以内的内容
边框图片
border-image-source:url(背景图片路径)
- 会将背景图片分成一个九宫格,1-左上,3-右上,7-左下,9-右下
border-image-slice: 25 fill;
25
表示四个角的裁剪尺寸25*25px
,剩下的部分为成为上下左右边框的背景图片,若不设置border-image-repeat
则会被拉伸值边框长度fill
表示背景图片中心5
,是否显示
border-image-outset:1px;
- 扩展边框
border-image-repeat:round/repeat;
repeat
:直接重复平铺round
:将内容缩放进行完整的重复平铺stretch
:将内容拉伸,不会平铺
border-image-width:27px;
- 边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
- 细节:
- 边框图片的本质是背景,并不会影响元素内容的放置
- 内容只会被容器的
border
和padding
影响
- 缩写:
border-image:source slice / width/outset repeat;
border-image: url(QQ截图20190808154303.png) 56/*无px*/ fill /27px /0 round;
过渡效果
添加过渡效果:过渡效果执行完毕之后,默认会还原到原始状态。
transition-property
- 添加过渡效果的样式属性名称
transition-property:left;
transition-duration
- 过渡效果的耗时以秒做为单位
transition-duration:2s;
transition-timing-function
- 设置时间函数--控制运动的速度
transition-timing-function:linear;
transition-delay
- 过渡效果的延迟
transition-delay:2s;
- 简写:
transition
- 属性名称 过渡时间 时间函数 延迟
transition:left 2s linear 0s;
- 为多个样式同时添加过渡效果
transition:left 2s linear 0s,background-color 5s linear 0s;
transform 2D
-
使用translate实现元素的移动
- 移动是参照元素的左上角
- 执行完毕之后会恢复到原始状态
- 如果只有一个参数就代表×方向
transform:translate(100px);
- 如果有两个参数就代表x/y方向
transform:translate(400px,500px);
- 添加水平或者垂直方向的移动
transform:translateX(300px);
transform:translateY(300px);
- 可以使用百分比,百分比为元素自身的宽高
-
使用scale实现元素的缩放
- 实现缩放
1
指不缩放,>1.01
放大<0.99
缩小- 参照元素的几何中心
- 如果只有一个参数,就代表x和y方向都进行相等比例的缩放
transform:scale(2);
- 如果有两个参数,就代表x/y方向
transform:scale(2,1);
- 缩放指定的方向
transform:scaleX(0.5);.
transform:scaleX(0.5);
- 实现缩放
-
使用rotate实现元素的旋转
- 以元素中心为轴,顺时针按照角度旋转
rotate(角度deg);
-
使用skew实现元素的斜切
skew(角度deg)
等价于skewX(角度deg)
- 上边框行为:角度
>0
向左倾斜 , 角度<0
向右倾斜
- 上边框行为:角度
skewY(角度deg)
- 左边框行为:角度
>0
向上倾斜 , 角度<0
向下倾斜
- 左边框行为:角度
skew(x角度deg,y角度deg)
-
使用transform-origin改变旋转中心
- 默认旋转中心为元素的正中心
transform-origin:left top;
- 改变旋转中心为左上角
- 同时添加多个
transform
属性值transform:属性值1 属性值2...;
使用空格分开- 注意:旋转时,元素坐标轴会随着旋转改变,所以一般先移动,再旋转
-
使用transform实现居中效果
- 给父元素开启相对定位
- 给需居中元素开启绝对定位
left:50%; top:50%;
- 给需居中元素添加
transform
属性transform:translate(-50%,-50%)
transform 3D
-
使用translate3d实现元素的移动
translate3d(X,Y,Z);
- 只填一个参数无效
- 默认Z轴垂直于屏幕,看不出效果
-
使用scale3d实现元素的缩放
scale3d(X,Y,Z);
- 默认Z轴垂直于屏幕,看不出效果
-
使用rotate3d实现元素的旋转
rotate3d(X,Y,Z,deg);
- 其中
XYZ
表示向量,旋转轴向量=X+Y+Z
在变换和过渡时,最后会还原,导致看不出效果,需要给父元素添加
transform-style
属性transform-style: preserve-3d;
保留3D变换效果
-
通过perspective景深透视效果
perspective:500px;
- 数值表示距离z=0(屏幕)平面的距离
-
通过perspective-origin改变观察角度
perspective-origin:Xpx Ypx;
动画
创建动画
@keyframes 动画名{
0%{
/*动画起始*/
}
n%{
/*动画中途,可多个可不加*/
}
100%{
/*动画结束*/
}
}
使用动画
animation-name
:指定动画名称animation-name:动画名;
- 设置动画的总耗时
animation-duration:2s;
- 设置动画的播放次数,默认为1次可以指定具体的数值,也可以指定infinite(无限次)
animation-iteration-count:1;
- 设置交替动画
alternate
:来回交替animation-direction:alternate;
- 设置动画的延迟
animation-delay:2s;
- 设置动画结束时的状态:默认情况下,动画执行完毕之后,会回到原始状态
forwards
- 会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
backwards
- 不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
both
- 会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态
- 动画的时间函数
animation-timing-function: linear;
linear
匀速ease
慢快慢step(n)
分为n
步——该属性与其他属性冲突
- 设置动画的播放状态
animation-play-state: paused;
paused
:暂停running
:播放
web字体
第一步:使用font-face声明字体
lefont-face{
font-family:'webfont';src:url)'webfont.eot);/*IE9*/
arc:url)'webfont.eot?#iefix')format)'embedded-opentype'),/*TE6-TE8*/
url)'webfont.woff')format)'woff"),/*chrome、firefox*/
url)'webfont.ttf")format)'truetype'),/*chrome、firefox,opera、safari,Android,ios 4.2+*/
url)"webfont.svqtwebfont")format('avg");/*ios 4.l-w/
}
第二步:定义使用webfont的样式
.web-font{
font-family:"webfont" !important;
font-size:l6px;font-style:normal;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width:0.2px;
-moz-oax-font-smoothing:grayscale;
}
第三步:为文字加上对应的样式
<i class="web-font">
开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体
</i>
- 得自定义想生成对应字体文件的内容
- 使用网络资源生成web字体
- 使用
- 定义自定义字体
- 定义样式使用自定义字体
- 指定样式,调用样式
字体图标
在网络平台将图标变为字体
- 放大不会失真
- 较少请求
- 便于维护
//开发时,一般使用伪元素
.smile::before{
//原本为%#xe640 只用写%#x后内容
//若写在innerHTML中 则需要写全部 但不直观不利于开发
content:"\e641";
color:red; font-size:50px;
}
盒子伸缩
设置父容器为盒子,会使每一个子元素自动变成伸缩项。当子元素的宽度和大于父容器宽度的时候,子元素会自动平均收缩。
-
display:flex;
——添加给父元素 -
justify-content:space-around;
——添加给父元素- 设置子元素在主轴(默认
row
横)的排列方式 flex-start
:让子元素从父容器的起始位置开始排列(左->右)flex-end
:让子元素从父容器的结束位置开始排列(右->左)center
:让子元素从父容器的中间位置开始排列space-between
:左右对齐父容器的开始和结束,中间平均分布,产生相同的间距space-around
:将多余的空间平均的分布在每一个子元素的两边,类似margin:0 auto.
造成中间盒子的间距是左右两边盒子间距的两倍
- 设置子元素在主轴(默认
-
align-items
——添加给父元素- 设置子元素在侧轴(默认
column
竖)的排列方式flex-start
:让子元素从父容器的起始位置开始排列(左->右)flex-end
:让子元素从父容器的结束位置开始排列(右->左)center
:让子元素从父容器的中间位置开始排列stretch
:拉伸,让子元素在侧轴方向上进行拉伸,填充满整个侧轴方问>>默认值baseline
:文本基线
- 设置子元素在侧轴(默认
-
align-self
——添加给子元素- 与
align-items
相同,但是align-items
设置父元素中所有子元素的排列方式,align-self
可以只设置给某个子元素,属性值相同
- 与
-
flex-flow
——添加给父元素- 是
flex-wrap
和flex-direction
的综合 flex-wrap
:控制子元素是否换行显示,默认不换行nowrap
:不换行--则收缩wrap
:换行wrap-reverse
:翻转,原来是从上到下,翻转后就是从下到上来排列
- f
lex-direction
:设置子元素的排列方向:就是用来主轴方向,默认主轴方向是row
(水平方向)row
:水平排列方向,从左到右column
:垂直排列方向,从上到下column-reverse
:垂直排列方向,从下到上
flex-flow
从以上两个属性的属性值中分别选择一个
- 是
-
flex-grow
——添加给子元素- 可以来扩展子元素的宽度,设置当前元素应该占据剩余空间的比例值
- 比例值计算
当前空间的flex-grow ÷ 所有兄弟元素flex-grow和
flex-grow
的默认值是0
-
flex-shrink
——添加给子元素- 可以来缩小子元素的宽度,设置当前元素应该占据超出空间的比例值
- 比例值计算
当前空间的flex-shrink÷所有兄弟元素的flex-shrink的和
flex-shrink
的默认值为1
-
flex
——添加给子元素flex:[flex-grow][flex-shrink][flex-basis];
- 当使用
flex
缩写时,大多数情况下没必要使用这种语法 flex:[number]
:这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例flex:auto
:属性值被设为auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间