Css格式化排版与布局

文字排版

字体：

body{
    font-size:12px;    /*大小*/
    color:#666（灰色）  /*颜色*/
    font-weight:bold;  /*加粗*/ 
    font-family:"宋体"; /*字体*/
    font-style:italic;   /*斜体*/
    text-decoration:underline;  /*下划线*/
    text-decoration:line-through;  /*删除线*/
    text-indent:2em;  /*缩进，2em的意思就是文字的2倍大小。*/
    line-height:1.5em;  /*行高*/
}

段落：

h1{
    letter-spacing:50px;   /*文字间隔或者字母间隔*/
    word-spacing:50px;     /*字母间隔*/
    text-align:center;     /*(left, right) 文本居中 */
}

---

布局 ：

元素分类：
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
div{
     display:inline;  /*块状元素div转换为内联元素*/
 }

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
a{
    display:block;   /*内联元素a转换为块状元素*/
}

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

<img>、<input>

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

---

盒子模型：
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

div{
    border:2px  solid  red;
}

上面是 border 代码的缩写形式，可以分开写：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

单独设置一遍边框：

border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red; 
border-left:1px solid red;

注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

盒模型宽度和高度：

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

例如：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

---

布局：

流动模型:
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型：
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素浮动就可以实现:

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left; /*#div1{float:left;} */
                /*#div2{float:right;}*/
}
<div id="div1"></div>
<div id="div2"></div>

层模型：
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。

fixed：表示固定定位,由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

Relative与Absolute组合使用：

<div id="box1">      <!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

#box1{
    width:200px;
    height:200px;
    position:relative;   /*参照定位的元素必须加入position:relative;*/
    position:relative;       
}
#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

这样box2就可以相对于父元素box1定位了