代码 |
功能 |
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 |
水平 垂直 模糊 颜色 |