CSS 2017-07-25

1. css排版-缩进(text'-indent)

<style>
p{text-indent:2em;}
</style>

2. CSS行间距（line-height）

<style>
p{line-height:2em;}

</style>

3. CSS文字间隔（letter-spacing）

<style>
p{letter-spacing:20px;}


</style>

4. CSS段落对齐（text-align）

<style>
p{text-align:left/right/center;}
</style>

5. em与px的区别

em： 倍数，是一个相对的单位，具有继承性;取决于给定的font-size值，例如font-size="10px",则1em="10px" .

px： 像素  ，是一个绝对的单位。

另：" % "号表示相对与font-size的大小。

6. CSS元素分类

类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
                                <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：
                                <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：
<img>、<input>

①强制转换为块状元素；

                                          a{display:block;}

②强制转换为内联元素：

                                         div{display:inline;}

③转换为内联块状元素

                                           a{ display：inline-block；}

7.  CSS盒模型-边框(一)

添加边框样式：             div { border-width: ...px;

                                              borer-style:dashed/dotted/solid;

                                              border-color: red ; 

                                           }

  以上可以简写成：  div { border:   ..px   dashed/dotted/solid  red     ; }

8.CSS 盒模型--边框（二）

对盒子的某条边设置边框

实例 ：   div{border-bottom/top/left/right: ..px  solid/dotted/dashed color ; }

9. padding , border，margin

10. CSS填充设定（ padding）

div {   padding-top/bottom/left/right ：(..px)   }  也可以直接写padding：m px 表示四个填充都取相同的值。

11.  CSS边界设定（margin）

和上面一样

div {   margin-top/bottom/left/right ：(..px)   }  也可以直接写margin：m px 表示四个填充都取相同的值。

12. CSS布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

13. CSS 流动模型（flow）

流动模型是网页采取的默认的布局方式。

一个块状元素占宽100%，而且分行显示。

内联元素，包含元素内从左到右水平分布。

14. CSS浮动模型（float）

如何让块状元素并排显示，这时候就要用到浮动模型了；设置元素浮动就可以实现了。

float：left/right;

15. CSS层布局模型（Layer）

层模型的三种形式：

1）绝对定位  position：absolute

2）相对定位  position： relative

3)  固定定位   position ：fixed

层模型-绝对定位：  对块元素进行绝对定位；   position: absolute;

                                                                          left/right/top/bottom: ? px        //这里的方位表示距离各个边的距离，而不是移动的方向

层模型-相对定位：      相对于块元素以前的位置进行移位：             position: relative;
                                                                                                          left/right/top/bottom: ? px

层模型-固定定位：相对于浏览器视图的绝对定位，简单来讲就是绝对定位是确定了在页面中的位置，而固定定位是对于浏览器的窗口而言，其块元素与浏览器的边界值是没有发生变化的；简而言之，其效果就是当滑动鼠标改变页面在浏览器中的位置是，固定定位的元素块相对于浏览器窗口的位置是不会发生变化的。

16. relative 与absolute定位结合使用

可实现相对于其它元素的定位。

假设有 “块中块”  :    <div id="father">                                    //父块

                            <div id="son">  hello world ! </div>            //子块

                              </div>

下面来实现子快元素相对与父块元素的定位：

                            <style type="text/css">

                                            #father

                                                      {      width:?px;

                                                              height:?px;

                                                              position:relative;            /* 注意参照的元素这里必须设置成相对定位*/     

                                                              }

                                           #son

                                                     {     position：absolute；

                                                           top/bottom/left/right: ?px;         /*相对于参照元素进行位置设置*/

                                                               }

                            </style>

17.  盒模型代码简写

  padding和margin一样，可以按照顺时针的顺序，即top-right-bottom-left 的顺序来书写值，若top与bottom值相同，left和right值相同；则可以简写成（top/bottom）px  （left/right）px；若这四个值都相同，则可同写为一个值。

18. 颜色值缩写

关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。


例子1：


p{color:#000000;}
可以缩写为：


p{color: #000;}
例子2：


p{color: #336699;}
可以缩写为：


p{color: #369;}

19. 

{font-variant: small-caps}

将普通型的大写字母转换成小写型大写字母。

20. text-align  文本居中显示

p{text-align:center}