背景图+盒子模型+浮动+变形

代码	功能
background-image：url（“ ”）	引入背景图
background-repeat: no-repeat	不平铺
background-repeat-x	横向平铺
background-repeat-y	纵向平铺
background-size：	可以加像素、百分比改变图片大小，容易拉伸
cover	让当前背景图恰好覆盖当前容器，图片不能拉伸，图片可能丢失一部分
contain	让当前容器恰好容纳当前背景图，图片不拉伸，容器可能会有空白
background-position：10px 10px	将背景图上下左右移动

有些代码可以合写成一个

<div></div>
<style>
    div{
        width: 100px;
        height: 100px;
        background: url("img") no-repeat 10px 10px;
        background-size: contain;
    }
</style>

#盒子模型

margin后像素代表的含义：

10px	上下左右
10px 10px 10px	上 左右 下
10px 10px 10px 10px	上 右 下 左

border 边框

Soiled	实线
Dashed	虚线
Double	双边框
border-radius	5px 10px 15px 20px/5px 10px 15px 20px（左上角 右上角 右下角 左下角 X/Y）

简单的动画效果

overflow: hidden	超出隐藏
cursor	pointer鼠标变手-+
hover	鼠标覆盖
transparent	颜色透明
dv:active{}	鼠标点击
background:fixed	固定值背景图
优先级Z-index：	默认0

鼠标放到div1上 div2会...
<style>
    #div1:hover #div2{}
</style>
<div id="div1">
    <div id="div2"></div>
</div>

浮动+清除浮动

标准流
非标准流

float：left	左浮动
float：right	右浮动
clear：left	清除左浮动
clear：both	全清除

清除浮动是增加兄弟节点，给兄弟节点加clear

用列表做页码
<style>
        li{
            list-style: none;
            float: left;
            background-color: lightgray;
            margin-left: 10px;
            font-size: 12px;
            padding:10px 15px ;
            border-radius: 5px;
            /*鼠标放上去变手*/
            cursor: pointer;
        }
        li:hover{
            background-color: orange;
            color: white;
        }
</style>
    
<ul>
    <li>首页</li>
    <li>上一页</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>下一页</li>
    <li>末页</li>
</ul>

定位

定位	position
相对定位	relative（相对于原来本身的位置定位，其所占的空间会保留）
绝对定位	absolute（相对于第一个采取定位的父元素来定位，其原来的位置不会保留）
固定位置	fixed（相对于浏览器屏幕）

transform 变形

translate

translateX()	沿x轴移动
translateY()	沿y轴移动
translate（100px,200px）	x轴100px y轴200px

scale 放大

scale(1.5)	放大1.5倍
scaleX	放大X轴
scaleY	放大Y轴

rotate 旋转

rotate(180deg)	旋转 默认z轴
单位	deg
rotateX	以X轴为中心旋转
rotateY	以Y轴为中心旋转
rotateZ	以Z轴为中心旋转
旋转点	transform-origin: 0px 0px;

Skew 斜切

Skew	斜切
单位	deg
skewX	沿X轴
skewY	沿Y轴

其他

perspective：150px	加给父元素使其下子元素带有3d效果
box-shadow：5px 5px 1px black	水平 垂直 模糊 颜色