1、调整透明度
.text{
background-color: rgba(0, 0, 0, 0.08);
}
解释：rgba（rgb三元素，透明度取值从0~1）
2、文字和图片对齐方式
长用于头像旁边的昵称居中显示
<img src="img/hua" alt="">华仔</img>
img {
/* 文字底部和图片对齐 */
vertical-align: bottom;
/* 文字中间和图片对齐 */
vertical-align: middle;
/* 文字顶部和图片对齐 */
vertical-align: top;
}
3、盒子
margin：上，右，下，左 //内边距
border:2px solid red //边框样式 2px 实线 红色
5、元素的显示与隐藏
div{
/* 隐藏元素，不保留位置 */
display: none;
/* 它既是块元素 也是显示元素 */
display: block;
/* 隐藏元素，保留位置 */
visibility: hidden;
/* 显示 */
visibility: visible;
/* 根据内容是否溢出显示滚动条 */
overflow: auto;
/* 始终显示滚动条 */
overflow: scroll;
}
4、布局
display:fiex; 让dev里面的子元素在一行显示
6、处理文本
font-weight:200;调节字体粗细
font-style:italic;斜体
/* 让我们的行高等于盒子的高度就可以水平居中文字了 */
line-height: 30px;
text-align对齐方式，属性 left左对齐、right右对齐、center居中
text-decoration装饰 属性 underline下划线、line-through删除线、none取消装饰
text-indent 首行缩进 属性 2em缩进 相对文字大小缩进2个字符
7、文字溢出
overflow: hidden;//如果内容超出边界，内容隐藏不可见
white-space: nowrap;//强制文本在一行内显示，禁止自动换行。
text-overflow: ellipsis;//若文本溢出盒子使用省略号代替
多行显示省略号
display：-webkit-box
-webkit-line-clamp:2;//限制文本行数
-webkit-box-orient:vertical;
处理图像
快速生成标签小技巧tab回车
div>p div包含p
p.aa p标签class属性名aa
p+p 生成两个兄弟p标签
p*3 生成三个p标签
p{你好} 生成p标签和内容
快速生成css样式tab回车
w100 生成高100px
ti2em 生成text-indent 2em 总结单词首字母加属性
8、背景
添加图片时尽量使用css编写易于调控
background：颜色 url no-repeat center regit fixed
解释 ：颜色、图片地址、是分开铺满 x轴 y轴 fixed 不随页面滚动 scroll随页面滚动
object-fit：cover；保持纵横比例放大图片适用于img、video等标签
background-size：cover；只适用于被url指定的背景图片，功能小
9、块元素、行内元素、行内块元素
块元素：可以指定宽高如div、p、h1~6、form、ui、hr、table、header
行内元素：在一行显示不能指定宽高如span、a
行内块元素：既有块元素的特点又有行内元素的特点，在一行显示可以指定宽高 如img
他们之转换，这样元素就具备了块的特征可以修改宽高独占一行，块就具备了元素的特征在一行显示
display: block;//转为块元素
display:flex;//块转为行内元素
display:inline-block//行内块元素
10、伪类选择器
监测鼠标、光标等特点
1、超链接伪类选择器
a {
text-decoration: none;
color:#000;
}
/* 伪类选择器，当鼠标经过的时候显示下划线并改变字体颜色 */
a:hover{
color: pink;
text-decoration:underline ;
}
2、输入框伪类选择器
监听输入框光标
input:focus{
color:blue;
}
11、权重叠加
权重叠加：如果是复合选择器，则会有权重叠加的，需要技术权重。
12、盒子内边距
padding 上右下左
注意：设置盒子固定大小后，若指定内边距会改变盒子设定的原始大小，为了解决这一点我们原始的宽高减去增加的内边距，这样才能保证盒子大小不变还能达到我们想要的效果。
第二种模式就是不指定宽度盒子就不会撑开。
13、盒子外边距
margin 上右下左
14、清除内外边距
通配符选择器
*{
margin:0;
padding:0;
}
15、圆角边框 盒子阴影 文字阴影
1、border-radius:50%;宽度的一半，相当于圆半径
2、圆角矩形设置高度的一半
hergit:100px;
border-radius:50px;
3、也可以设置4个值来改变每个方向的圆角
1、盒子阴影（阴影不占用空间）
.yining{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/*水平阴影位置、垂直阴影位置、阴影虚实(越大越模糊)、阴影大小、阴影颜色 */
box-shadow: 10px 10px 30px 100px rgba(0,0,0, 0.6);
//inset内部阴影，可以让盒子更有立体感
box-shadow:inset 10px 10px 30px 100px rgba(0,0,0, 0.6);
}
如果要添加多个阴影请用逗号隔开，否则只显示一个阴影
/* 上面阴影白 */ /* 下面阴影黑色 */
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.7), -8px -8px 8px rgba(255, 255, 255, 0.8);
2、文字阴影
text-shadow: 水平偏移、垂直偏移和模糊半径 阴影颜色
16、浮动
浮动常用于静态流布局的块元素里面，使里面的快元素能够水平排列
float：left 左浮动
清除浮动：父盒子无法确定高度或者影响下面元素布局我们就要清除浮动，复制以下代码在父盒子添加 clearfix类即可
clearfix:after{content:"";
display: block;height:0;
clear: both;
visibility:hidden;
}
.clearfix{/*IE6、7 专有*/
zoom:1;
}
17、定位
子绝父相
position:relative 相对定位，相对自身位置移动，占有页面位置
position:absolute 绝对定位，不占有位置后面的元素会顶上去所以需要父级定位的支撑
position:fixed 固定定位，不会随页面移动，不占有位置后面的元素会顶上去
z-index:1; 定位显示优先级 值也大优先显示(只能用于定位模块与定位模块
定位布局小技巧：
定位不支持margin：auto要实现定位中心要使用，left：50% margin-right：定位盒子宽度的一半，这样就能在中间显示了
第二章css高级篇
1、精灵图片
目的：为了减少服务器压力，请求一次服务器获取小图片放在一张大图片上。
有以下一张大图片
假如我们需要K字母，我们测量一下K字母的大小并创建盒子
.ran{
width: 90px;
height: 90px;
/* 放入图片 调整位置 */
background: url(../html/images/1750661829386.jpg) no-repeat;
//指定K字母在图片中的x轴和y轴位置，向上移动是负数
background-position: -123 -22;
}
2、字体图标
精灵图改变图标颜色大小太麻烦了，需要修改图片，那么字体图标非常灵活可以修改颜色、背景、大小等
阿里巴巴添加购物车，创建项目，选择unicode 根据教程引入css即可
3、三角形
div {
/* 高宽必须为0 */
width: 0;
height: 0;
/* 透明 */
border: 50px solid transparent;
border-left-color: red;
}
4、鼠标样式
cursor: pointer; //小手
cursor：text；文本
cursor：move；移动
cursor: not-allowed; 禁止
5、取消输入框自带样式
outline:none;
6、取消文本域缩放
resize:none;
这样我们就得到了一个固定大小的盒子可以在里面输入文字，注意文本域标签最好放在一行不要换行。
7、布局小技巧
1、如果有多个盒子加了浮动，每个盒子的右边框都会1+1=2的情况 可以用margin往左移动-1px解决这个问题，但是这样给边框添加颜色的时候就会发现第一个边框的右边被压住了，我们可以给他加上定位的z-index增加当前盒子的权重即可。
8、盒子模型设置
可以设置边框和padding是在盒子内部还是外部
/* 默认外增 */
box-sizing: border-box;
/* 内增 */
box-sizing: content-box;
9、过度
从一个状态慢慢的过度到另一个页面，谁做过度给谁加，不会占用页面位置
.ddd {
width: 200px;
height: 300px;
margin: 100px auto;
background-color: pink;
/* transition: 变化属性 花费时间 ; */
transition: height 1s, width 2s;
}
.ddd:hover {
height: 400px;
}
//如果需要所有ddd里面的属性都加过度可以使用 transition:all 2s
10、2D转换
让子盒子水平居中垂直居中
.pan ul li {
background-color: black;
transform: translate(50%, 50%)；x轴和y轴
}
旋转
/* 旋转45度 */
transform: rotate(45deg);
/* 调整旋转中心位置 */
transform-origin:left bottom ;
缩放
/* transform: scale(x,y); */
只写一个值代表x，y等比缩放，不影响其他盒子（图片经常用）
transform: scale(2);
11、动画
第一步定义动画，使用@keyframes 动画名称；
@keyframes donghua {
//0%相当于初始什么都不做
0% {
transform: translateX(0px);
}
//时间到达25%时y轴移动100px
25%{
transform: translateX(0px，100px);
}
//时间完成动画结束
100% {
transform: translateX(1000px);
}
}
第二步使用动画；在元素上指定调用动画的名称，指定持续时间，这样在页面加载时动画就会执行。
.pan {
width: 200px;
height: 200px;
background-color: aqua;
/* 调用动画 */
animation-name: donghua;
/* 持续时间 */
animation-duration: 2s;
}
统一写法：animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起司或结束状态
使用 animation: xiao 1s steps(8) ; steps可以控制步长，比如8个字 分8步走就能实现打字机效果
12、3D效果
x轴：右边是正值，左边是负值
y轴：下正 上负
z轴：外面是正 里面是负值
3d旋转
/* 3D旋转 */
transform: rotateX(90deg);
transform: rotate3d(x,y,z,多少度deg);
transform: rotate3d(100px,0,0,45deg);
3d移动
使用px像素进行移动
transform：translateX(40px)；
注意 /* 我们有移动先写移动再写旋转 */
transform:translateY(25px) rotateX(-90deg) ;
13、透视
给div的父级添加透视效果才能看到3d效果 就像3d电影院的3d眼睛。
值越小离我们眼睛越近，
当需要让 3D 变换的元素（如旋转、平移）产生真实的透视效果（近大远小）时使用。
perspective: 10px;
开启3D空间
添加在父上，允许子元素保留3D空间关系
transform-style: preserve-3d;
第三章
移动端布局之流式布局（百分比布局）
高度不变 宽度设置百分比，可设置页面大小限制
width: 50%;
height: 200px;
max-width: 1200px;
min-width: 780px;
flex布局父常用属性
align-items单行
/* 给父亲添加flex布局 */
display: flex;
/* 主轴默认为X轴，修改主轴为Y轴 */
flex-direction: column;
/* 延X轴水平居中 */
justify-content:center;
/* 延Y轴水平居中垂直居中 */
align-items: center;
align-content多行
/* 换行 */
flex-wrap: wrap;
/* 子项在侧轴平分剩余空间 */
align-content: space-around;
/* 子项在侧轴西安分部在两头再平分剩余空间 */
align-content: space-between;
flex-flow
flex-flow属性是flex-direction和flex-wrap属性的符合属性
flex-flow：row wrap；//设置主轴为Y轴并换行
flex子布局常用属性
div里面的每个盒子平均分配空间，值越大占比就越高
div span {
flex: 1;
//也可以使用% 父默认为100%
flex:20%;
}
渐变色
/* 开始方向，渐变颜色 */
background-color: -webkit-linear-gradent(left,red,yellow);
媒体查询
用于屏幕大小监测 跟动画差不多
/* 媒体监测 电脑或手机 */
@media screen and (max-width:800px){
body{
background-color: pink;
}}
sass敬请期待
/* 子项在侧轴西安分部在两头再平分剩余空间 */
align-content: space-between;
flex-flow
flex-flow属性是flex-direction和flex-wrap属性的符合属性
flex-flow：row wrap；//设置主轴为Y轴并换行
##### flex子布局常用属性
```css
div里面的每个盒子平均分配空间，值越大占比就越高
div span {
flex: 1;
//也可以使用% 父默认为100%
flex:20%;
}
渐变色
/* 开始方向，渐变颜色 */
background-color: -webkit-linear-gradent(left,red,yellow);
媒体查询
用于屏幕大小监测 跟动画差不多
/* 媒体监测 电脑或手机 */
@media screen and (max-width:800px){
body{
background-color: pink;
}}