zr20170116-css

1.css的三种样式链接方式

a.行内样式方法。例如：<div class="box" style="width: 500px; height: 500px;">

b.内联样式方法。例如：<style type="text/css">.box{width:500px;}</style>，在header里面写

c.外联样式方法。例如：<link rel="stylesheet" type="text/css" href="css/gm01.css"/>，也是在header里面写，也是最多用的。

2.css的继承性

儿子的部分样式是从父亲那里继承过来的，就像宽度都是继承父亲的，但高度就不会了，一般属性带有-的都可以继承

3.文本缩进

text-indent是设置首行缩进,2em代表两个空格。

4.词间距和字间距

word-spacing代表的是词间距，在用margin对字体进行设置时，黄色代表的是外边距,紫色代表的是内边距；letter-spacing代表的是字间距，不准用空格符号

5.预格化标签

写法是<pre></pre>，表示在hbuilder上预览的和在浏览器上浏览的结果是一样的，可以适当地用。

6.设置背景图片的连写

background:black url(img/2016排行版.jpg) center center no-repeat;分别对背景颜色，图片旋转，水平居中，垂直居中和重复不重复进行了连写。

7.外边距margin的写法：

margin-top:20px;margin-left: 30px;margin-bottom: 40px;margin-right: 50px;可以写成margin:20px 50px 40px 30px;顺序分别是上，右，下，左。

8.塌陷现象及解决方法

margin-top在设置时往往不会出现本身往下跑的结果，而是导致其父级元素往下跑。解决方法一为：在父级里设置overflow:hidden；解决方法二：设置border：1px solid transparent;transparent为透明色；其中：overflow:hidden是指隐藏掉超出部分；