1，absolute与relative的组合
可以相对于其他元素定位
1、参照定位的元素必须是相对定位元素的前辈元素：
.div1 {
position: relative;
background: url(../img/im.jpg);
width: 180px;
height: 280px;
top: 100px;
left: 100px
}
2、参照定位的元素必须加入position:relative;
.div2 {
position: absolute;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
.div2 {
border: 1px solid red;
width: 99%;
top: 90px
}
运行效果：
2，盒模型代码简写（3种）
2-1、top、right、bottom、left的值相同：
margin: 10px 10px 10px 10px;
可缩写为：
margin: 10px;
2-2、top和bottom值相同、left和 right的值相同：
margin: 10px 20px 10px 20px;
可缩写为：
margin: 10px 20px;
2-3、left和right的值相同：
margin: 10px 20px 30px 20px;
可缩写为：
margin: 10px 20px 30px;
padding的缩写方法和margin是一致的。
3，border的缩写方法
3-1，边框缩写方法
border-color: #000;
border-style: solid;
border-width: 1px
可缩写为：
border: 1px solid #000
3-2，四边都有边框简写方法
四边相同样式简写：
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000
可缩写为：
border: 1px solid #000
3-3、三边有边框，一边无边框简写方法
上、下、左相同边框样式，右边无边框
border-left: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
可缩写为：
border: 1px solid #000;border-bottom:0
若无其他边框，方法同上
4，字体缩写
网页设置字体的代码：
body{
font-size: 12px;
line-height: 1.5em;
font-family: "宋体",sans-serif;
}
可缩写为：
body{
font: 12px/1.5em "宋体",sans-serif;
}
注：
1、使用这一简写方式至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
5，颜色值
5-1，英文命令颜色
h1 {color: red;}
5-2，rbg颜色
由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
h1 {color: rgb(123,121,234);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
h1 {color: rgb(2%,36%,55%);}
5-3，十六位进制颜色
原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
h1 {color: #00ffff;}
可缩写为：
h1 {color: #0ff;}
6，长度值
6-1，,像素(px)
p {font-size: 30px}
6-2，em
p {
font-size: 30px;
text-indent: 2em
}
font-size: Xpx 1em=Xpx 例:
font-size: 20px 1em=20px
6-3，百分比(%)
p {
font-size: 20px;
text-indent: 2em;
line-height: 200%
}
行间距为字体的200%：
20px * 200% = 40px （行间距为40px）
.p {font-size: 20px}
.q1 {font-size: 150%}/*20px * 150% = 30px*/
.q2 {font-size: 0.8em}/*20px * 0.8 = 16px*/
运行效果：
<p>夏季有着深沉的秉性，平时淡定若然，<span>一个猝不及防就会狂风暴雨大作好好的威风一次。这也是他的个性，<q>抑或是某些不顺意的事情让他如此咆哮不堪</q>，或许这是一次成功信号的狂欢之举</span>，只不过声势震撼了一些。</p>
css:
p { font-size: 20px;}/*20px*/
span {font-size: 150%;}/*20px * 150% = 30px*/
q {font-size: 0.8em;}/*20px * 150% * 0.8 = 24px*/
运行效果:
网友评论