前端学习第4天
一、CSS选择器
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style>
/* 标签选择器 */
h1{
color: red;
}
/* id选择器 */
#p1{
color: blue;
}
/* class选择器 */
.p2{
color: orange;
}
/* 多个选择器可以连写 */
.p3,.p4{
color: #0000FF;
}
/* 父子选择器 */
.box>span{
color: purple;
}
/* 后代选择器 找到所有后代标签*/
.box span{
color: yellow;
}
/* 选择器可以混写 找到一个id为p1并且class包含p3的标签 */
#p1.p3{
color: red;
}
#list a{
text-decoration: none;
}
/* 在一个父元素中，找到第一个标签 */
/* nth-child 找到找到#list下的第一个标签，并且这个标签必须是li标签*/
#list p:nth-child(1){
font-size: 20px;
color: cyan;
}
/* 在一个父元素中，满足冒号前选择器元素中的第N个元素 */
#list li:nth-of-type(1){
font-size: 25px;
}
/* nth-last-of-type 倒数第N个 */
#list li:nth-last-of-type(3){
font-size: 30px;
}
/* 查找奇数个和偶数个 */
#list li:nth-of-type(2n+1)>a{
color: red;
}
/* 属性选择器 */
/* 选择标签中包含customattr属性的元素 */
[customattr]{
color: red;
}
/* 选择页面标签att属性值为val的元素 */
p[att=val]{
color: blue;
}
</style>
</head>
<body>
<h1 att="val">css选择器</h1>
<p id="p1" class="p3">id选择器使用#id名表示</p>
<p class="p2">class选择使用.class值表示</p>
<p class="p2">class选择使用.class值表示</p>
<p class="p3">两个p标签中的样式相同</p>
<p class="p4">两个p标签中的样式相同</p>
<div class="box">
<span>我是div中span标签</span>
<p>
<span>我是div下的p标签下的span标签</span>
</p>
</div>
<span>我是div外部的span标签</span>
<ul id="list">
<p>我是p标签</p>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
<p customattr att="test">html标签的属性可以html属性也可以是自定义属性</p>
<p att="val">属性选择器</p>
</body>
二、CSS选择器的优先级
1、!important>行内样式>id选择器>class选择器(属性选择器)>标签选择器
（不同的选择器具有不同的优先级，页面中元素最终的样式是优先级最高的选择器样式 ）
2、多个选择器连用时，优先级会相加
三、emmet语法
emmet语法（emmet输入法可以快速输入批量的html和css）
例如：
1.p.c1.c2 生成包含属性和值的标签
2. p#p1.box
3. 父子关系 父标签>字标签
4.ul>li{第$行}*5 $表示序号
5.兄弟关系 div+section+p
4. div>img[src=bg.jpg]+p{图片1}+p{这是一张图片}
四、flex布局基础
1.flex布局 display:flex;让该标签作为容器开启弹性布局
2.容器开启弹性布局后，默认容器中所有的项目(容器的子标签)都是在行内展示的
3.默认主轴方向为row row指横轴(x轴)
display: flex;
4.flex-direction 设置主轴方向 默认为row 默认项目从左向右进行排列
5.row-reverse 主轴方向依然是横轴 默认项目从右向左进行排列
6.column 设置主轴方向为竖轴(y轴) 默认从上向下进行排列
7.column-reverse 设置主轴方向为竖轴(y轴) 默认从下往上进行排列
flex-direction: row;
8.justify-content 项目在主轴方向的对齐方式 默认为 flex-start 主轴开始位置进行布局
9.flex-end 项目从左往右依次排列，整体右对齐
10.center 项目从左往右依次排列，整体居中对齐
11.space-around 项目从左往右依次排列，整体两端有留白(项目间隔的一半)，每个项目之间的间隔相同
12. space-between 项目从左往右依次排列,整体两端对齐，没有留白，项目间隔相同
justify-content: flex-start;
1.align-items 设置项目在交叉轴的对齐方式
2.flex-start 交叉轴的开始位置布局 默认值
3.flex-end 交叉轴的结束位置布局
4.center 交叉轴方向居中显示
5.stretch 如果项目未设置高度，则拉伸为容器同等高度
6.baseline 项目基线对齐
align-items: center;
1.默认nowrap情况下，一行之内放不下所有的项目，会将项目进行压缩，不会自动换行
2.wrap 换行 从flex-start向flex-end进行换行，多出来的行放在下面
3. wrap-reverse 从flex-end向flex-start进行换行，多出来的行放在上面
4. 单个项目在主轴方向的排序，默认值0 值越小越靠前
5. flex-grow 设置项目放大比例，默认值0，表示即使存在剩余空间，也不放大
6. flex-shrink 默认1 当容器没有设置换行并且一行内显示不下标签，项目默认会被压缩，值为0表示项目不允许被压缩
7. align-self 单独设置某个项目的交叉轴对齐方式，这个值可以覆盖容器中的align-items
小结：
1.display：flxed；（开启弹性布局）
2.设置主轴方向对齐方式：justify-content:space-between;(例)
五、2D变形
1.transform 变形样式
2.rotate() 旋转变形 值是旋转角度 正值顺时针 负值逆时针
3.rotateY y轴旋转、rotateX x轴旋转、rotateZ z轴旋转
4.变形原点 锚点 50% 50% 中心点默认值
5.translate 平移变形 x轴平移长度 y轴平移长度 相对于标签原本的位置移动
translateX() translateY()
6.scale() 一个值表示宽高等比例缩放 缩放 默认1原始大小，大于1就是放大 小于1就是缩小
7.两个 scale(宽缩放比例,高缩放比例)
8.多种变形效果可以同时使用
例如：transform: scale(0.5, 1.5) rotate(45deg) translate(100px, 0);
六、隐藏标签
1.display: none 设置元素为隐藏，标签在文档流中不占位置
2.visibility:hidden; 隐藏元素 但是文档流中位置还在
3.opacity 设置标签的透明度 范围0~1 0表示完全透明 1表示完全不透明
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
