1,弹性盒子(更详细请点我头像看我发布的弹性盒子详细版)
1、弹性盒子:display: flex;
给父盒子加,如果是pc端页面布局,还是采用传统方式,如果是移动端或者是不考虑兼容的pc则采用flex
pc端浏览器支持情况比较差,IE11或更低版本不支持flex或仅支持部分
2、弹性盒子父项常见属性:
(1)flex-direction:设置主轴的方向;属性:
row 默认从左到右(常用)
row-reverse 从右到左
column 从上到下(常用)
column-reverse 从下到上
(2)justify-content:设置主轴上的子元素排列方式;属性:
flex-start 默认值从头开始如果主轴X轴,则从左到右(常用)
flex-end 从尾部开始排序
center 在主轴居中对齐(如果主轴是X轴则水平居中)(常用)
space-around 平分剩余空间(常用)
space-between 现两边贴边在平分剩余空间(重要)(常用)
(3)flex-wrap:设置子元素是否换行;属性:
nowrap 不换行
wrap 换行
(4)align-content:设置侧轴上的子元素的排列方式(多行);属性:
flex-start 默认值在侧轴的头部开始排序(常用)
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示(常用)
space-around 子项在侧轴平分剩余空间(常用)
space-between 子项在侧轴现分布在两头,在平分剩余空间(常用)
stretch 设置子项元素高度平分父元素高度 (常用)
(5)align-items:设置侧轴上的子元素排列方式(单行);属性:
(该属性是控制子项在侧轴(默认是y轴)上的排列方式 在子项为单项(单行)的时候使用)
flex-start 从头部开始
flex-end 从尾部开始
center 居中显示 (最常用)
stretch 拉伸 (拉伸时子元素不能给高度)
(6)flex-flow:复合属性;属性:
flex-flow:row wrap; 相当于同时设置了 flex-direction 和 flex-wrap
3、弹性盒子子项常见属性:
(1)flex子项目占的份数
flex: 2; flex 属性定义子项目分配剩余空间,用flex来表示占多少份数
(2)align-self控制子项自己在侧轴的排列方式 (属性直接写 align-items的)
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。
默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
(3)order属性定义子项的排列顺序(前后顺序)
order: -1; 数值越小,排列越靠前,默认为0。
2、定位(更详细请点我头像看我发布的定位详细版)
## 省略号 ##
white-space:nowrap;强制一行
overflow:hidden;溢出隐藏
text-overflow:ellipsis;省略号
## overflow溢出 ##
* overflow: hidden;溢出隐藏
* overflow: visible;溢出可见(默认)
* overflow: auto;自动:如果有溢出的内容,盒子会显示滚动条
* overflow: scroll;内容被修剪,超出的内容可以通过滚动条查看
* overflow-x: auto;内容超过指定宽度的时候显示滚动条(要加上强制一行才会有效果white-space: nowrap;)
* overflow-y: auto;内容超过指定高度的时候显示滚动条
## visibility设置可见 ##
* visibility: hidden;隐藏内容,但是占用空间
* display: none;隐藏内容,但是不占用空间
## 相对定位 ##
position:relative;相对于它自己原来的位置来说
注意:要与top、bottom、left、right联合使用
## 绝对定位 ##
position:absolute;相对于浏览器来说
注意:要与top、bottom、left、right联合使用
## 静态定位 ##
position:static;默认
## 固定定位 ##
position:fixed;生成固定定位的元素,相对于浏览器窗口进行定位
注意:可与top、bottom、left、right联合使用
html:盒子、浮动、定位
父相子绝:父元素用相对定位,子元素用绝对定位
## 层叠顺序 ##
z-index: 数值(不要加单位);
* 数值为整数(负整数、0、正整数)
* 数值越大,层叠级别越高
3、动画和3D动画(更详细请点我头像看我发布的2D动画和3的动画详细版)
1、动画
(1)标签transition的属性:多个简写的方式为transition:动画名称1 1s, 动画名称2 2s,用逗号隔开
同时使用多个转换,其格式为 `transform: translate() rotate() scale()`
transition-property: all 时间s; 要过渡的属性(all代表所有属性,还可以是宽或高) [ˈprɒpəti] 所有的
transition-duration: 1s; 过度花费的时间
transition-delay: 1s; 动画延时的时间
transition-timing-function: ease; 动画速度曲线属性有ease由快到慢(默认),linear匀速,ease-in由慢到快,ease-in-out慢快慢,ease-in-out动画以底速度开始到结束,steps()指定了时间函数中的间隔数量(步数)
(2)标签transform的属性:
transform: rotate(度数); 旋转,单位是:deg,角度为正时,顺时针,角度为负时,逆时针
transform-origin: x y; 设置元素旋转中心点, x 和 y 用空格隔开还可以给 x y ,设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center` 或 50px 50px)
transform: scale(n, m); 按比例缩放,可以设置转换中心点缩放默认以中心点缩放,而且不影响其他盒子
transform: translate(x, y); 移动,x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔
(3)标签animation的属性:
animation-name: 动画名称; 调用动画
animation-duration: 0.5s; 动画花费时长
animation-timing-function: ease; 动画速度曲线属性有ease由快到慢(默认),linear匀速,ease-in由慢到快,ease-in-out慢快慢,ease-in-out动画以底速度开始到结束,steps()指定了时间函数中的间隔数量(步数)
animation-delay: 2s; 动画等待多长时间执行
animation-timing-function: steps(num); num:代表动画执行的步数
animation-iteration-count: infinite; 规定动画播放次数 infinite: 无限循环 默认1 可以是数值
animation-direction: alternate; 是否逆行播放 要搭配播放次数
animation-fill-mode: forwards; 盒子动画结束后,停在结束位置
animation-play-state: paused`; 暂停动画,规定动画是否暂停或者播放 ,经常和鼠标经过等其他配合,使用简写属性里面不包含
简写方式:1、animation: 动画名称 2s linear; /* 前面2个属性:动画名称 持续时间 一定要写 */
简写方式:2、animation: 动画名称 duration timing-function delay iteration-count direction fill-mode animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 起始与结束状态
简写方式:3、animation: move 2s ease 1s infinite ; animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 ;
(4)定义语法@keyframes格式:(只有这个可以让它动起来,里面可以加属性)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
- 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间,或用 `from` 和 `to`,等同于 0% 和 100%
2、3D (动画属性是通用的也可以简写)(3D一般都用定位写的)(3D是在动画的基础加上新加移动的属性)
(1)开启3D必须加下面的属性,这属性基本上都是给父元素加的
transform-style: flat; 代表子元素不开启 3D 立体空间,默认的不开启,代码写给父级,但是影响的是子盒子
transform-style: preserve-3d; 子元素开启3D立体空间,代码写给父级,但是影响的是子盒子
perspective:"500px" 透视(单位px),如果想要网页产生 `3D` 效果需要透视(理解成 `3D` 物体投影的 `2D` 平面上),透视也称为视距,所谓的视距就是人的眼睛到屏幕的距离**透视需要写在被视察元素的父盒子上面**
(2)标签transform的属性:
transform: translateX(100px); 仅仅是在 x 轴上移动
transform: translateY(100px): 仅仅是在 y 轴上移动
transform: translateZ(100px): 仅仅是在 z 轴上移动
transform: translate3d(x, y, z): 其中x、y、z 分别指要移动的轴的方向的距离,注意:x, y, z 对应的值不能省略,不需要填写用 0 进行填充
transform: rotateX(45deg); 沿着 x 轴正方向旋转 45 度(X正数是往右走,负数是往左)
transform: rotateY(45deg); 沿着 y 轴正方向旋转 45 度(Y正数是往下走,负数是往上)
transform: rotateZ(45deg)` 沿着 z 轴正方向旋转 45 度(Z正数是往前走,负数是往后)
transform: rotate3d(1, 1, 1, 45deg)` 沿着自定义(x, y, z, deg)轴旋转 45 deg 为角度
(3)维坐标系
- x 轴:水平向右 -- **注意:x 轴右边是正值,左边是负值**
- y 轴:垂直向下 -- **注意:y 轴下面是正值,上面是负值**
- z 轴:垂直屏幕 -- **注意:往外边的是正值,往里面的是负值**