I AM MAO.YOUR FRIEND.WELCOME TO HERE.

每一个不曾起舞的日子都是对生命的辜负

HTML及CSS模拟报纸排版

点击我查看代码
点击我查看Demo

学习笔记:

1、
.div{width:158px;padding:20px;border:1px solid #ccc;margin:10px;}
在浏览器审查元素时显示的width=200px; 200=158+20x2+1x2=200 不计算外边距
2、
box-sizing属性:
box-sizing:border-box; //border和padding计算入width之内,上面的例子width就等于158px;
box-sizing:content-box; //border和padding不计算入width之内
box-sizing:padding-box; //padding计算入width之内
3、
outline:1px solid red;轮廓:绘制元素周围的一条线,与border相比,outline是不占空间的。
4、
css文本属性:line-height行高 letter-spacing 字符间距 word-spacing 字间距 text-indent 缩进
若文本本是在父元素中居中显示,使用letter-spacing:20px后,文本不居中了。则设置text-indent:20px;或者使用padding-left。
5、
font-variant:small-caps;把段落设置为小型大写字母字体。
font-style:italic;字体为斜体。
6、
z-index设置元素堆叠顺序。仅在定位元素即设置position元素上生效,设置数值越高则越离用户越近。