把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。
- 字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/
- 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考css基本概念与css核心语法介绍中有关颜色介绍
- 粗体：如果想为文字设置粗体除了使用h1-h6或strong标签，还可以通过css样式font-weight: bold;对文本加粗
- 斜体：通过css样式font-style:italic;实现文字斜体功能，效果等同于<em></em>标签，文本正常font-weight:normal;
- 下划线：text-decoration: underline;/*下划线*/
- 删除线：淘宝京东等电商购物网站常见的字体删除线通过text-decoration: line-through;/*删除线*/效果等同于<del></del>
- 缩进：书写习惯段落前空2格，这个通过text-indent: 2em;/*首行缩进*/实现这个特殊样式，其中2em的意思就是文字的2倍大小。
- 行间距（行高）：line-height/*行间距（行高）属性*/，如下代码line-height: 2em;实现设置段落行间距为2倍。
- 中文字间距、字母间距：其中letter-spacing是/*字间距，单词与单词间距*/word-spacing为/*字母间距*/
- 对齐：通过text-align可以设置块状元素中的文本、图片2端对齐，居中，左右展示等
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS格式化排版</title> 6 <style type="text/css"> 7 div{ 8 font-family: "Microsoft Yahei";/*字体*/ 9 line-height: 2em;/*行间距*/ 10 text-align: justify;/*2端对齐*/ 11 } 12 div.box{ 13 font-size: 14px;/*文字大小*/ 14 color: #f90;/*字体颜色*/ 15 text-indent: 2em;/*首行缩进*/ 16 } 17 .box>span{ 18 font-weight: bold;/*文本加粗*/ 19 font-style: italic;/*斜体*/ 20 text-decoration: underline;/*下划线*/ 21 text-decoration: line-through;/*删除线*/ 22 } 23 em{ 24 letter-spacing: 10px;/*字间距，单词与单词间距*/ 25 word-spacing: 5px;/*字母间距*/ 26 } 27 </style> 28 </head> 29 <body> 30 <div class="box">首先应该知道为什么学习，而不要盲目地为了学习而学习。 学习最重要的就是态度，态度和方式决定结果。 需要从根本上认为学习是一件值得的事情，从思想上端正才会有学习的劲头。 <span>很多实例表明不同的心态会有不一样的学习效果，要以健康乐观的心态去学习，能成为怎样的学生都是由自己决定的。 行为决定命运，有的人学习是为了充实自己或者找工作，所以需要明白自己究竟是为什么学习。</span><del>The first thing to know is why you should learn, not blindly to learn. The most imdelortant thing to learn is attitude. Attitude and method determine the outcome. </del><em>You need to fundamentally think that learning is a worthwhile thing. Only when you are ideologically correct can you have the motivation to learn.</em></div> 31 </body> 32 </html>
通过CSS格式化排版实现网页设计效果，学习盒模型为网页设计奠定扎实的基础，它是CSS布局的基石，下面总结盒模型的概念、结构、尺寸：在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
☆块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<li>、<dl>、<table>、<address>、<blockquote> 、<form>
☆内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
☆内联块状元素：<img>、<input>
总结：什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如a{display:block;}就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如 div{display:inline;}就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
内联元素特点：1、和其他元素都在一行上；2、元素的高度、宽度及顶部和底部边距不可设置；3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型
盒子模型边框border:2px solid red;完整写法：border-width:2px;border-style:solid;border-color:red;
注意： 1、border-style（边框样式）常见样式有：dashed（虚线）|dotted（点线）|solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为： thin|medium|thick（但不是很常用），最常还是用像素（px）。
div{border-bottom:1pxsolidred;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1pxsolidred;
border-right:1pxsolidred;
border-left:1pxsolidred;
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px10px15px30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px20px;}
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px10px15px30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{margin:10px20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。