一、CSS介绍
- CSS指层叠样式表,其作用是给HTML提供了一种样式描述,定义了其中元素的显示方式。
- CSS使用最广泛是2.1版本,CSS3之后是2.1各模块的升级版
二、CSS语法
选择器 {
属性名:属性值;属性名:属性值;
/*注释*/
}
注意事项
- 所有符号都是英文符号,如果写错了,浏览器会警告
- 区分大小写,a 和 A 是不同的东西
- 没有 // 注释
- 最后一个分号可以省略,但建议不要省略
- 任何地方写错了,都不会报错,浏览器会直接忽略
三、调试方法
- W3C在线验证器
- VScode看代码颜色
- Webstorm看代码颜色
- 使用浏览器的开发者工具查看警告
- Border调试法(最重要,做法是在某元素后添加border,若边框没出现,说明选择器错了或者语法错了
四、文档流
文档流就是文档流动方向
1、流动方向
- inline 元素从左到右,到达最右边才会换行
- block 元素从上到下,每个都另起一行
- inline-block 也是从左到右,每个元素成块在一行
2、宽度
- inline 宽度为内部inline元素的和,不能用width指定
- block 默认自动计算宽度,可用width指定
- inline-block 结合前两者特点,可用width指定
3、高度
- inline 高度由line-height间接决定,与height无关
- blokc 高度由内部文档流元素决定,可以设置height(脱离文档流后不算高度,float 与 position:absolut/fixed可以让元素脱离文档流)
- inline-block 跟block类似,可以设置height
4、文档流特殊情况:对block 内容超出 height 的高度,可以使用overflow弥补
overflow:hidden /*隐藏超出内容*/
overflow:visible /*直接显示溢出内容*/
overflow:scroll /*有滚轮,但不超出时都有滚轮*/
overflow:auto /*scroll的升级版*/
五、盒模型(box-sizing)
1、类型
- context-box 内容盒模型-内容就是盒子的边界
- border-box 边框盒模型-边框才是盒子的边界
2、宽度
- context-box width=内容宽度
- border-box width=内容宽度+padding+border
3、推荐
border-box更好用,因为可以同时指定内容、padding、border的宽度
5、小知识
margin合并
- 父子上下margin会合并
- 兄弟margin会合并
阻止合并的方法
- 父子合并用padding/border、overflow:hidden、display:flex挡住
- 兄弟合并用inline-block消除
六、CSS布局
1、float布局
步骤:
子元素css里加上float:left和width
在父元素添加clearfix类
.clearfix{
context:' ';
display:block;
clear:both;
}
经验:
- 设计时会流一些空间或者最后一个不设置width
- 不需要做响应式,这个时专门为IE准备
- IE 6/7有双倍margin bug(解决:IE 6/7把margin减半或加上display:inline-block)
2、flex布局
/*重点记住*/
/*父元素变成flex容器*/
.container{
display: flex;/*or inline-flex*/
}
/*改变容器里item流动方向*/
.contant{
flex-direction:row|column; /*item row横排、column竖排*/
}
/*item换行*/
.contant{
flex-wrap:wrap;
}
/*item 横排对齐方式*/
.item{
justify-content:center/space-between;/*横排 居中对齐 左右对齐*/
}
/*item 竖排对齐方式*/
.item{
align-items:center;/*竖排居中对齐*/
}
3、grid布局
/*重点记住*/
/*父元素变成grid容器*/
.container{
display: grid;/*or inline-flex*/
}
/*行列设置*/
.container{
grid-template-columns:40px 50px auto 50px 50px;/*列宽40px 50px 自动 50px 40px*/
grid-template-rows:25% 100px auto;/*行宽25% 100px 自动*/
/*还可以用fr 一份一份代替 1fr 50px 25% auto*/
}
/*单元格的间隙*/
.container{
grid-gap:12px /*每个格上下左右之间间隙12px*/
grid-row-gap:12px /*每个格左右之间间隙12px*/
grid-column-gap:12px /*每个格上下之间间隙12px*/
}
/*快速布局 grid-template-areas*/
.container{
grid-template-areas:
"A A B"
"C C B"
"D D D";
}
.item1/2/3/4{
grid-area:A/B/C/D; /*例子 分item1 item2 item3 item4 类,grid-area属性为 A B C D*/
}
七、CSS定位
1、div的分层(从最底层到最顶层)
z-index:-1>background>border>块级子元素>浮动元素>内联子元素>z-index:1;
2、position
- position:relative 相对定位,一般给absolute元素做爸爸,配合z-index(层叠)
- positio:absolute 绝对定位,脱离原来位置另其一层(关闭按钮),鼠标提示,配合z-index,要善用left:100%、left:50%加负margin;
- position:fixed 悬浮框,烦人广告、回到顶层按钮,不要用到手机上
更多查阅
层叠上下文developer.mozilla.org八、CSS动画
1、浏览器渲染过程
- 根据HTML构建HTML树
- 根据CSS构建CSS树
- 将两棵树合并成一颗渲染树
- Layout布局
- Paint绘制
- Compose合成
2、CSS 动画的两种做法
a.transform 图形变换(先介绍)
/*位移 translate*/
transform:translateX(50px); /*X方向右移动50px*/
transform:translateY(50px); /*Y方向上移动50px*/
transform:translateZ(50px); /*Z方向上移动50px*/
/*z轴要添加视点,perspective:1000px */
transform:translate(x,y);
transform:translate3d(x,y,z);
/*缩放 scale*/
transform:scale(1.5); /*放大1.5倍*/
transform:scale(1.5,0.5); /*X方向放大1.5倍,Y方向放大0.5倍*/
transform:scaleX(1.5); /*X方向放大1.5倍*/
transform:scaleY(1.5); /*Y方向放大1.5倍*/
/*旋转 rotate*/
transform:rotate(360deg);/*顺时针旋转360度*/
transform:rotateX(60deg);/*按X轴顺时针旋转60度*/
transform:rotateY(60deg);/*按Y轴顺时针旋转60度*/
b.transition 过渡
- 作用:补充中间帧
- 语法:transition:属性 时长 过度方式 延迟
- dispaly:none=>block 无法过渡 改成visibility:hidden=>visible
c.animation
animation 与 @keyframes 配合
animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
语法:
animation: 1.5s infinite forwards xxx;
@keyframes xxx{
0% {
transform:none;
}
66% {
transform:tranlateY(200px);
}
100%{
transform:translateX(200px);
}
本篇文章版权归本人和饥人谷所有,转载请注明出处