注释:/* */
CSS reset (去除默认样式)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,ol {
list-style:none;
}
img {
max-width: 100%;
}
CSS排错

当border占用空间时,可以改为outline
草图工具

推荐网站
- MDN
- 张鑫旭的博客
文档流
每个元素都有一个默认类型,但是都可以通过display:inline/block/inline-block
改变
代表 | 特性 | |
---|---|---|
内联元素(inline) | span | 宽度:有内部内联元素总和决定的,不能自定义 实际高度:由line-height决定与height无关 可视化高度:可以通过增加padding来改变 |
块级元素(block) | block | 宽度:默认auto,不是100%,可自定义 高度:由内部文档流元素决定,可以设height |
内联-块级元素 | 宽度:有内部内联元素总和决定的,可自定义 高度:和block类似 |

overflow

盒模型
box-sizing:content-box box-sizing:border-box



CSS布局
float布局
总结:当元素为“内联-块级”元素时,半脱离文档流,仍占据原来位置
步骤:
- 子元素上加float:left和right
- 在父元素上加.clearfix,父元素一般不设height
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/`
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;将元素隐藏,但是在网页中该占的位置还是占着。
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
flow布局

.container属性(容器)

主轴流动方向

.container {
flex-direction:row|row-reverse|column|column-reverse
}
是否折行(默认不折行)

.container {
flex-wrap:nowrap|wrap|wrap-reverse
}
主轴对齐方式

次轴对齐方式

默认:stretch
多行对齐方式

.item属性
-
order
用于控制弹性元素的位置,默认为
order:0
数值越小越在前面,可以负数或整数。

-
flex-grow
分配多余的空间
flex-grow:1

一般写导航栏的时候
.loge {
flex:0;/*0可以省略*/
}
.nav {
flex:1;
}
.touxiang {
flex:0;
}

-
flex-shrink
控制 当宽度不够时,按分配比例缩小

- align-slef

grid布局
.container属性
-
成为container
.container{ diplay:grid|inline-grid; }
-
行和列

CSS定位
div分层

属性
- position:relative

总结:不脱离文档流,还占据原来的位置(移动的时候)
- position:absolute

鼠标提示

总结:1.脱离文档流 2.相对于祖先元素中第一个position不是static的元素定位
-
position:fixed
相对于视口定位

总结:不要和transform一起用
-
position:static
粘滞点位
层叠上下文


CSS渲染动画
浏览器渲染过程

transform(变形)

-
translate(偏移)
#demo:hover { transform: translateX(50px); transform: translateY(50px); transform: translate(50px,50px);/*缩写*/ } transform:translateZ(50px); /*Z轴在三维上,需要在父级上加一个视点*/ .container { perspective:1000px;/*这个视点在容器中心往后1000px*/ }
利于translate实现垂直居中
#demo {
left:50%;
top:50%;
transform:translate ( -50%, -50%);
}
- scale(缩放)

- rotate(旋转)

- skew(倾斜)

添加动画
transition(过渡)


animation

1.声明关键字
1. @keyframes xxx {
0% {
transform: none;
}
66.66% {
transform: translateX(200px);
}
100% {
transform: translateX(200px);
transform: translateY(100px);
}
}
2.@keyframes xxx {
from {
transform: none;
}
to {
transform: translateX(100%);
}
}
2.添加动画
#demo.start {
animation: xxx 1.5s forwards(停在最后一帧);
}
3.加js
button.onclick = ()=>{
demo.classList.add('start')
}