Day7-CSS5：CSS特性，flex布局

昨日回顾-定位

伪元素 ​ CSS模拟出来的标签效果 ​ 用于页面中的非主体内容 ​ ::before ​ ::after ​ 注意 ​ 必须要有content属性 ​ 默认是行内元素 ​ 浮动 ​ 一种布局方式，通过元素漂浮，实现块元素水平排布 ​ float+方位词 ​ none ​ 特点 ​ 脱标 ​ 优先级比标准流高，可以覆盖标准流 ​ 下一个浮动元素会在上一个浮动元素左右排布 ​ 会受上面元素边界的影响 ​ 对于行级元素，浮动后可以设置宽高，相当于变成块级 ​ 清除浮动 ​ 子元素浮动后，无法撑开标准流的父元素高度 ​ 解决 ​ 父元素设置高度 ​ 额外标签法 ​ 单伪元素清除法 ​ 双伪元素清除法 ​ 定位 ​ 布局方式，解决盒子层叠问题和固定显示问题 ​ 使用 ​ 设置定位方式 ​ 设置偏移值 ​ 分类 ​ 相对定位 ​ 相对于他之前的位置（不脱标 ​ 原点：他在标准流的左上角 ​ 绝对定位 ​ 相对于最近有定位的祖先元素 ​ 如果都没有，相对于body ​ 原点：最近有定位的祖先元素 ​ 固定定位 ​ 相对于body ​ 原点：相对于body的左上角 ​ 字体图标 ​ 本质就是字体 ​ 展示方式 ​ iconfont ​ font-awesome ​ 使用 ​ 引入 ​ 调用相应类名展示

1.CSS其他属性

vertical-align

基线：

图片和文字混排，会发现基线下面还有文字的部分

vertical-align 属性设置一个元素的垂直对齐方式。

作用

可以解决行内块元素/行内元素的垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。

1——出现的问题：图片和文字底部没对齐

原因：图片和文字默认以基线方式排版

解决：vertical-align:bottom 设置元素的垂直对齐方式

2——出现的问题：div高度由内容撑开，图片和div的下边有间隙

原因：div是块元素，独占一行，图片默认是以这一行的基线排布，基线和底线有一定间隙。

解决：vertical-align: bottom;让图片和底线对齐

3——问题：设置lh=内容高度的时候，文字居中了，图片没有，仍然沿着基线对齐

解决：vertical-align: middle;把元素放在父元素中部

实战：伪元素设置文字图标的时候，对图标vertical-align: middle;进行以父元素为标准居中对齐，排版好看

vertical-align:后面也可以直接加像素，通过像素大小调整高低。

溢出效果-overflow

overflow属性指定如果内容溢出一个元素的框，会发生什么——控制溢出部分的显示效果

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

隐藏效果

visibility属性指定一个元素是否是可见的。即使不可见的元素也会占据页面上的空间。（不常用

使用 "display" 属性来创建不占据页面空间的不可见元素。（常用

2.CSS新特性

过渡-transition

让元素的样式慢慢发生改变，通常和hover配合使用

使用——transition：属性名 过渡持续的时间；

注意：all表示所有属性都有过渡效果，并且过渡效果是写在元素本身上

位移-Transform

Transform属性应用于元素的2D或3D转换。这个属性可以让元素沿着x轴或者y轴移动，也允许你将元素旋转，缩放，移动，倾斜等。

使用：

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

取值：像素值或百分比，百分比是相对于自身

连写伪元素（某些浏览器可能没效果

.box:hover {
            .left {
                transform: translateX(-100%);
            }
​
            .right {
                transform: translateX(100%);
            }
        }

连写伪元素和效果（中间不能有空格

.box:hover::before {
     transform: translateX(-100%);
}
.box:hover::after {
     transform: translateX(100%);
}

旋转

语法：transform:rotate（旋转）

rotate(angle)	定义 2D 旋转，在参数中规定角度。

transform:rotate

正数：顺时针 ​ 负数：逆时针 ​ 2D 旋转，在参数中规定角度

transform: translateX(300px) rotate(270deg); ​ 位移+旋转270°

transform: skewY(25deg); 沿着y轴倾斜旋转25°

渐变

background-image 属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

#grad {
  background-image: linear-gradient(red, yellow, blue);
}
​
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

动画

使用

1. 定义动画 @keyframes mymove（动画名称） {
       0%{开始状态}
       100%{结束状态}
   }
   ​
   2.使用动画
   animation:动画名 动画时长 重复方式 间隔 次数 是否轮流反向播放动画；
   animation: name duration timing-function delay iteration-count;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。

animation-timing-function指定动画将如何完成一个周期。

速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

速度曲线用于使变化更为平滑。

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start|end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： start：表示直接开始。 end：默认值，表示戛然而止。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

缩放（自学

3.flex布局

一种弹性布局方式，使用它布局页面更加简单灵活，可以避免浮动脱标的影响，可以提高开发效率，

浮动属性写在子元素上，flex写在父元素上

使用flex布局:不会有脱标影响，父元素仍然有高度

 display: flex;

使用flex布局，只需要添加该属性，即可实现子元素间距等分

 justify-content: space-between;

属性	说明	CSS
flex	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。	3
flex-grow	设置或检索弹性盒的扩展比率。	3
flex-shrink	设置或检索弹性盒的收缩比率。	3
flex-basis	设置或检索弹性盒伸缩基准值。	3
flex-flow	复合属性。设置或检索弹性盒模型对象的子元素排列方式。	3
flex-direction	该属性通过定义 flex 容器的主轴方向来决定 flex 子项在 flex 容器中的位置。	3
flex-wrap	该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。	3
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。	3
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。	3
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。	3
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。	3
order	设置或检索弹性盒模型对象的子元素出现的順序。	3

组成

弹性容器（父元素）

弹性盒子（子元素/flex子项/弹性元素）

主轴（横轴），默认是在水平方向

flex-direction: column;

通过flex-direction: ;将主轴调整为垂直方向，子元素就会沿着垂直方向排布

这种情况下，主轴在垂直方向，侧轴在水平方向

元素默认按照主轴方向排布

侧轴（纵轴/交叉轴），默认是在垂直方向

CSS 语法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

值	描述
flex-start	默认值。从行首起始位置开始排列。
flex-end	从行尾位置开始排列。
center	居中排列。
space-between	均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。
space-evenly	均匀排列每个元素，每个元素之间的间隔相等。
space-around	均匀排列每个元素，每个元素周围分配相同的空间。
initial	设置该属性为它的默认值。请参阅 initial。

侧轴对齐方式

align-items 属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

值	描述
stretch	默认值。元素被拉伸以适应容器。 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center	元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start	元素位于容器的开头。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	元素位于容器的结尾。 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

align-items侧轴对齐方式，只能针对单行内容

侧轴上align-items有两个默认

1.元素默认在容器上面排布

2.元素默认有拉伸效果（前提是子元素没有设置高度，在侧轴上拉伸）

align-items: flex-start; /* 默认在父元素的上面排布 */

align-items: flex-end; /* 在父元素的下面排布 */

align-items: center; /* 在父元素的中间排布 */

align-items: stretch; /* 默认是一个拉伸效果，前提是子元素没有设置高度，在侧轴上拉伸 */

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

/* 如果去掉了子元素的宽度，子元素的宽度就由内容来决定 */

/* width: 100px; */

/* 如果去掉了子元素的高度，则会由内容决定。如果设了align-self: stretch;就会拉伸到和父类一样高 */

/* height: 100px; */

子项空间动态分配

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

使用——flex:数值（占据父元素剩余尺寸的份数）

/* 需求：将子元素的宽度按照1:2:3的方式均分 */
        .son:nth-child(1) {
            flex: 1; /* 占父级元素剩余尺寸的份数 */
        }
        .son:nth-child(2) {
            flex: 2;
        }
        .son:nth-child(3) {
            flex: 3;
        }