媒介查询
- 媒介查询:监听对象的宽度或者高度,并设置一个阈值,当到达临界值时,触发媒介查询的条件,执行条件内的样式代码,调整网页布局.
- 语法:@media 监听对象的设备类型 and (设置的阈值) {}
- 监听对象的设备类型:
- 1. only screen 手机, 电脑, 平板的浏览器或者屏幕2. print 打印机3. speech 读音设备
伪元素
- 伪元素: 1. 伪元素与伪类选择器不是一个东西.2. :after和::after都是伪元素,一个冒号的是css2的语法,而两个冒号的是css3的最新语法
- 最常用的伪元素有两个: ::after::before
- content样式,用于给伪元素添加内容.注意:哪怕伪元素里没有内容,content样式必须写,值给""即可
nth-child选择器和nth-of-type选择器 这两个选择器的用法一样
- 1. 选择器E:nth-child(大于0的整数) {} 找到E选择器表示的元素的父级里第number个子元素,且保证是E选择器类型的
- 2. 选择器E:nth-child(n) {} 找到E选择器表示的元素的父级里所有的子元素,且保证是E选择器类型的
- 3. 选择器E:nth-child(2n+1) {}或者 选择器E:nth-child(odd) {}找到E选择器表示的元素的父级里所有序号是奇数的子元素,且保证是E选择器类型的
- 4. 选择器E:nth-child(2n) {}或者选择器E:nth-child(even) {} 找到E选择器表示的元素的父级里所有序号是偶数的子元素,且保证是E选择器类型的
- 5. 选择器E:nth-child(n+number) {} 找到E选择器表示的元素的父级里序号为number之后的子元素(包含第number个),且保证是E选择器类型的
- 6. 选择器E:nth-child(-n+number) {}找到E选择器表示的元素的父级里序号为number之前的子元素(包含第number个),且保证是E选择器类型的
- li:nth-child(n+3):nth-child(-n+8) {}找到第三个到第八个li标签
- nth-child和nth-of-type的区别:
- nth-child查找元素时是从所有子元素里按照序号查找.
- nth-of-type查找元素时先把非E选择器类型的元素过滤掉,过滤之后再按照序号进行查找.
盒阴影和文字阴影
盒阴影:box-shadow
文字阴影
- box-shadow: 1. x轴的偏移量2. y轴的偏移量3. 阴影的发散度4. 阴影的宽度5. 阴影的颜色6. 内阴影
- 合写形式:box-shadow: h-shadow v-shadow blur spread color inset;
- 注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
- h-shadow:必需。水平阴影的位置。允许负值。
- v-shadow:必需。垂直阴影的位置。允许负值。
- blur:可选。模糊距离。
- spread:可选。阴影的尺寸。
- color:可选。阴影的颜色。请参阅 CSS 颜色值。
- inset:可选。将外部阴影 (outset) 改为内部阴影。
- text-shadow: h-shadow v-shadow blur color;
- h-shadow:必需。水平阴影的位置。允许负值。
- v-shadow:必需。垂直阴影的位置。允许负值。
- blur:可选。模糊的距离。
- color:可选。阴影的颜色。
过渡动画
- css动画都是针对元素的css样式实现的动画效果.
- 过渡动画:transition
- 1. 要进行动画的css样式(transition-property) 2. 动画执行的时间 (transition-duration) 单位秒:s
- 3. 动画的运动速率(transition-timing-function)
- a. ease 开始结束慢,中间快 b. ease-in 开始慢,之后快 c. ease-out 结束时慢 d. ease-in-out 开始和结束慢 e. linear 匀速 f. cubic-bezier(n,n,n,n) 通过四个参数,可以模拟出以上所有的运动效果
- 4. 动画的延迟时间(transition-delay) 单位秒:s
- 触发过渡动画的时机
- 1. :hover伪类--能找到鼠标在其上面的元素2. :focus伪类--能找到聚焦的元素(一般用于表单控件元素)3. :checked伪类4. 媒介查询5. JS
- 并不是所有的css样式都可以做过渡动画. 要满足样式的变化过程是数值变化的过程.
- 合写形式:transition: property duration timing-function delay;
- property:规定设置过渡效果的 CSS 属性的名称。
- duration:规定完成过渡效果需要多少秒或毫秒。
- timing-function:规定速度效果的速度曲线。
- delay:定义过渡效果何时开始。
关键帧动画
- 当我们需要在一段时间内同时让多个css样式动画一同触发,建议使用过渡动画,但是如果想要在一段时间内让多个css样式动画依次分布执行,建议使用关键帧动画
- 关键帧动画: animation
- 在一定时间内,按步骤依次执行的动画效果
- 1. 动画的执行名字:animation-name,配合@keyframes使用
- 2. 动画的执行时间:animation-duration 单位秒:s
- 3. 动画重复的次数 animation-iteration-count 无数次 infinite
- 4. 动画的延迟时间 animation-delay
- 5. 动画的运动方向 animation-direction
- a. normal:默认值 b. reverse:反向c. alternate:奇数次正向,偶数次反向d. alternate-reverse:奇数次反正向,偶数次正向
- 6. 动画的播放状态 animation-play-state
- a. running:播放 b. paused:暂停
- 合写形式:animation: name duration timing-function delay iteration-count direction;
- name:规定需要绑定到选择器的 keyframe 名称。
- duration:规定完成动画所花费的时间,以秒或毫秒计。
- timing-function:规定动画的速度曲线。
- delay:规定在动画开始之前的延迟。
- iteration-count:规定动画应该播放的次数。
- direction:规定是否应该轮流反向播放动画。
2D变换
- 默认情况下,HTML的3d视觉效果是关闭的,需要手动设置开启. 给形成3d立体效果的图像的父级座做设置.transform-style: preserve-3d;
- 元素变换:transform 1. 平移:translate2. 缩放:scale3. 倾斜:skew4. 旋转:rotate
- 2D变换参考的坐标轴是平面坐标轴(X轴和Y轴)
- 注意:
- 1. 在元素变换的概念里, 每个元素都有一个自己的坐标轴,对当前元素做的所有的设置影响的只是当前元素自己的坐标轴,不会对其他元素造成影响
- 2. 系统在读取transform值时,是按照书写顺序依次读取,在读取过程中,只要某个值影响了坐标轴的单为常度,以后的所有值在计算时,都是在已经影响过后的坐标轴里进行计算的.
- 1. 平移 translateX():沿x轴平移translateY():沿y轴平移translate(x,y):沿x,y轴平移
- 2. 缩放 scaleX():沿x轴缩放scaleY():沿y轴缩放scale(x,y):沿x,y轴缩放
- 缩放的值填写的是需要缩放的倍数缩放的基准点是元素的中心点,扩大时左右上下同时放大
- 3. 倾斜 skewX():沿x轴倾斜skewY():沿y轴倾斜skew(x,y):沿x,y轴倾斜单位度: deg
- 倾斜里,水平是y轴,竖直是x轴 x轴给正值,逆时针旋转;负值,顺时针旋转y轴给正值,顺时针旋转;负值,逆时针旋转
- 4. 旋转 rotateX():绕x轴旋转rotateY():绕y轴旋转rotate():绕z轴旋转
- x轴旋转,从左往右看,正值逆时针,负值顺时针 y轴旋转,从上往下看,正值逆时针,负值顺时针
3D变换
- 3D与2D的区别,3D多了一条Z轴 3D里只讨论平移和旋转
- z轴方向的旋转 正值:顺时针旋转; 负值:逆时针旋转
- 修改图片的形变的基准点,默认基准点是元素的中心点:transform-origin: center top;
渐变
线性渐变
径向渐变
- 1. 线性渐变 2. 径向渐变
- 渐变是对一个元素的背景图片做的设置渐变至少要有两种颜色渐变是一个值, 不是一个样式
- 写法1:-webkit-linear-gradient(颜色1,颜色2,...)
- 线性渐变默认的方向是从上到至下,每种颜色所占的区域相同
- 写法2:-webkit-linear-gradient(渐变开始的方向,颜色1,颜色2,...)
- 渐变的方向:left, right, top, bottom
- 写法3:-webkit-linear-gradient(渐变开始的方向,颜色1 百分比,颜色2 百分比,...)
- 百分比表示的是当前颜色开始出现渐变的位置
- 呈圆形的渐变方式 radial-gradient(半径 形状 at 圆心,颜色1 百分比,颜色2 百分比,...)
- 半径:1. 直接用px2. 使用边或者角的位置表示半径
- 最远边: farthest-side最近边: closest-side最远角: farthest-corner最近角: closest-corner
- 形状: 1. 圆形: circle 2. 椭圆: ellipse(如果要实现椭圆, 需要提供两条半径)
- 圆心: 1. px数值,第一个数表示x方向,第二个数表示y方向2. 使用方位单词:left right top bottom center
- 注意: 如果圆心的位置设置到了某条边或者某个角上,那么半径不允许设置成最近边或者最近角, 如果设置, 半径为0, 没有渐变效果
弹性布局
布局方式: 1. 盒模型布局2. 浮动布局3. 定位布局4. 流式布局, 媒介查询5. 多列布局6. 弹性布局
一. 与容器有关的样式:
二. 弹性子元素的样式
flex-basis和width的区别:
- 容器: 设置了display:flex/inline-flex的元素 弹性子元素: 容器里的元素
- 主轴: 默认情况下,弹性子元素会从主轴的起点开始一直排列到主轴的终点 侧轴: 与主轴垂直的轴
- 主轴和侧轴并不是真实存在的,其目的只是方便我们明确弹性子元素的排布方向的顺序.
- 1. 将元素设置成为容器 display:flex/inline-flex
- 2. 主轴的方向:flex-direction
- a. row:默认值 水平方向, 从左往右b. row-reverse:水平方向, 从右往左 c. column:竖直方向, 从上至下d. column-reverse:竖直方向, 从下至上
- 3. 换行方式:flex-wrap
- a. nowrap:默认值,不换行 b. wrap:换行 c. wrap-reverse:反向换行
- 4. 弹性子元素在主轴上的对齐方式:justify-content
- a. flex-start:主轴方向起点对齐 b. flex-end:主轴方向终点对齐 c. center:居中 d. space-between:两边的元素靠边, 其余元素左右等距 e. space-around:所有元素左右等距
- 5. 单行弹性子元素在侧轴上的对齐方式:align-items
- a. flex-start:侧轴开始位置对齐b. flex-end:侧轴结束位置对齐c. center:侧轴居中d. baseline:基线对齐e. stretch:默认值, 规定弹性子元素在侧轴上的默认高度 如果不设置高度,默认高度填满整个侧轴
- 6. 多行弹性子元素在侧轴上的对齐方式:align-content
- a. flex-start:侧轴开始位置对齐 b. flex-end:侧轴结束位置对齐 c. center:侧轴居中d. stretch:默认值, 规定弹性子元素在侧轴上的默认高度 如果不设置高度,默认高度填满整个侧轴 e. space-between:两边的元素靠边, 其余元素左右等距 f. space-around:所有元素左右等距
- 1. order:顺序数值, 决定元素的排布先后顺序,默认值都是0,值越小,越靠前,值相同时,写的越早越靠前
- 2. align-self:单独设置弹性子元素在侧轴上的对齐方式,值与align-items相同
- 3. flex-grow:多余空间的分配比例, 默认值是0,表示不分配
- 4. flex-shrink:空间不足时的收缩比例,默认值是1, 设置成0表示不收缩
- 计算公式: 第一步: 计算权重 所有 元素的宽*收缩比例 的和 第二步: 计算每个元素 的具体收缩值 元素的宽*缩放比例/权重*溢出量
- 5. flex-basis:规定弹性子元素的基础宽度
- 1. flex-basis的优先级要高于width
- 2. flex-basis只对flex元素起作用, 不是flex元素只能用width
- 3. flex-basis只在主轴的方向为row时起作用,如果主轴的方向设置为column,flex-basis不起作用
- 4. flex-basis对绝对定位的元素不起作用
- 合写: flex是flex-grow,flex-shrink和flex-basis的合写形式
- flex的默认值: 0, 1, auto
- 设置值为auto:相当于 1, 1, auto
- 设置成none:相当于0, 0, auto
多列布局
- 多列布局:column
- 1. column-count:最大列数 2. column-width:最小列宽度 3. columns:上面两个样式的合写4. column-gap:列间距5. column-rule:分割线6. column-span:1/all
元素的居中方式
行元素:
块元素:
- 水平居中: 给父级添加text-align:center
- 垂直居中:
- a. 单行文本垂直居中给line-height等于父级的height
- b. 图片近似居中,给父级设置line-height等于height,给图片设置vertical-align:middle
- c. 图片完全居中, 在图片近似居中的基础上给父级加font-size:0
- d. 多行文本垂直居中, 新增一个行级块元素, 且要求需要居中的元素的宽度小于父级的宽度保证其与新增的元素处在同一行下, 最后给两个元素都添加vertical-align:middle
- 水平居中: width定值, 左右margin:auto
- 垂直居中: 元素绝对定位, top, bottom给0,上下margin: auto