学习HTML的第四天

一、2D变形

1、transform 变形样式
2、rotate: 旋转变形 正直顺时针 负值逆时针
3、rotateY y轴旋转 ；rotateX x轴旋转 ；rotateZ z轴旋转
4、变形原点 默认中心点 50% 50%，平移 缩放 旋转都可以。
5、 translate 平移变形 x轴平移长度 y轴平移长度 相对于标签原本的位置移动
6、scale() 一个值表示宽高等比例缩放 缩放 默认1原始大小，大于1就是放大 小于1就是缩小
7、 两个 scale(宽缩放比例,高缩放比例)，多种变形效果可以同时使用 。

二、css选择器优先级

1、 不同的选择器具有不同的优先级，页面中元素最终的样式是优先级最高的选择器样式。
2、!important>行内样式>id选择器>class选择器(属性选择器)>标签选择器
3、多个选择器连用时，优先级会相加

三、emmet语法

1、emmet输入法可以快速输入批量的html和css
2、p 按Tab
3、p.c1.c2 生成包含属性和值的标签
4、p#p1.box
5、img[src=bg.jpg]
6、p{文本内容}
7、ul>li*5 父子关系 父标签>字标签
8、ul>li{第$行}*5 $表示序号
9、兄弟关系 div+section+p
10、()表示一组标签 div.box>(section.item>img+p)*5

四、隐藏标签

1、display: none 设置元素为隐藏，标签在文档流中不占位置
2、visibility:hidden; 隐藏元素 但是文档流中位置还在
3、opacity 设置标签的透明度 范围0~1 0表示完全透明 1表示完全不透明
4、通过rgb 可以设置透明度

五、flex布局（弹性布局）

1、 display:flex;让该标签作为容器开启弹性布局，容器开启弹性布局后，默认容器中所有的项目(容器的子标签)都是在行内展示的。
2、flex-direction: row 默认主轴方向为row row指横轴(x轴)。row-reverse 主轴方向依然是横轴 默认项目从右向左进行排列， column 设置主轴方向为竖轴(y轴) 默认从上向下进行排列。
3、justify-content: flex-start：justify-content 项目在主轴方向的对齐方式 默认为 flex-start 主轴开始位置进行布局， flex-end 项目从左往右依次排列，整体右对齐，center 项目从左往右依次排列，整体居中对齐，space-around 项目从左往右依次排列，整体两端有留白(项目间隔的一半)，每个项目之间的间隔相同，space-between 项目从左往右依次排列,整体两端对齐，没有留白，项目间隔相同。
4、align-items: center交叉轴 垂直于主轴的轴， align-items 设置项目在交叉轴的对齐方式，flex-start 交叉轴的开始位置布局 默认值，flex-end 交叉轴的结束位置布局，center 交叉轴方向居中显示！stretch 如果项目未设置高度，则拉伸为容器同等高度，baseline 项目基线对齐。
5、默认nowrap情况下，一行之内放不下所有的项目，会将项目进行压缩，不会自动换行。
6、wrap 换行 从flex-start向flex-end进行换行，多出来的行放在下面。
7、wrap-reverse 从flex-end向flex-start进行换行，多出来的行放在上面
8、display: inline-block：块元素在行内展示。
9、order: 0：单个项目在主轴方向的排序，默认值0 值越小越靠前。
10、lex-grow 设置项目放大比例，默认值0，表示即使存在剩余空间，也不放大。
11、flex-shrink 默认1 当容器没有设置换行并且一行内显示不下标签，项目默认会被压缩
12、flex-shrink: 0：值为0表示项目不允许被压缩
13、align-self 单独设置某个项目的交叉轴对齐方式，这个值可以覆盖容器中的align-items