一.简介
CSS 指层叠样式表 (Cascading Style Sheets)，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一
二.CSS的引入方式
- 行内式
- 嵌入式
- 导入式
- 链接式
<!--行内样式--> <h1 style="background-color: aqua;color: brown">JD</h1>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--嵌入式--> <style> p{ color: red; font-size: 14px; } .t{ font-size: 20px; background-color: rosybrown; } a.t{ font-size: 30px; color: darkblue; } </style> </head> <body> <p>Hello</p> <div class="t"> Test </div> <a class="t">aaaaaaaa</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @import "ex1.css"; </style> </head> <body> <p>Hello</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--css模块导入--> <link href="ex1.css" type="text/css" rel="stylesheet"> </head> <body> <p>Test</p> </body> </html>
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）
三.CSS选择器
1.派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁
派生选择器允许你根据文档的上下文关系来确定某个标签的样式
例
<!DOCTYPE html> <html lang="en"> <!--派生选择器--> <head> <meta charset="UTF-8"> <title>Title</title> <style> li strong { font-style: italic; font-weight: normal; } </style> </head> <body> <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol> </body> </html>
2. 组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; }
2.1后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素
例：如果您希望只对 div 元素中的 p 元素应用样式，可以这样写
<!DOCTYPE html> <html lang="en"> <!--后代选择器--> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p{ font-weight: bold; font-size: 19px; } </style> </head> <body> <div> <p>Hello</p> <br> World!!! </div> </body> </html>
2.2子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素
当不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）
例：只想对div下的子div进行更改而非子元素下的div更改时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [test]{ color: blueviolet; } .he>div{ color: bisque; } </style> </head> <body> <div class="he">111 <p class="fr">222 <div>333</div> </p> <div>444</div> </div>
2.3相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）
例如：如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）
3.基础选择器
* ： 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
E ： 标签选择器，匹配所有使用E标签的元素 p { color:green; }
.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
注意嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
- 块级元素不能放在p里面。
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
- li内可以包含div
- 块级元素与块级元素并列、内联元素与内联元素并列。（错误的：<div><h2></h2><span></span></div>）
4.伪类
4.1锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a {color:#000000;text-decoration:none;outline:none;} a:hover {color:#0000ff;text-decoration:underline;} </style> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </html>
5.属性选择器
对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择
下面的例子为带有 p 属性的所有元素设置样式
[p]
{
color:red;
}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值
[title~=hello] { color:red; }
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> [lang|=en] { color:red; } </style> </head> <body> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr />
四.CSS样式
1.背景属性
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值
例：
<!DOCTYPE html> <html lang="en"> <!--CSS背景属性--> <head> <meta charset="UTF-8"> <style type="text/css"> body {background-color: gray} p {background-color: rgb(250,0,255)} p.no2 {background-color: palegoldenrod; padding: 20px;} </style> </head> <body> <p>这是段落</p> <p class="no2">这个段落设置了内边距。</p> </body> </html>
背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值
例
<!DOCTYPE html> <html lang="en"> <!--css背景图片--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{margin: 0} p{background: url("mac.jpg"); width: auto; height: 1000px; } </style> </head> <body> <p></p> </body> </html>
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺
例：
<!DOCTYPE html> <html lang="en"> <!--背景重复--> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-image: url("a.png"); background-repeat: repeat; } </style> </head> <body> </body> </html>
背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异
下面是等价的位置关键字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> body{ background-image: url('a.png'); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } </style> </head> <body> <p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p> </body> </html>
CSS 背景属性
2.文本属性
CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等
缩进文本
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
例：
<!DOCTYPE html> <html lang="en"> <!--文本缩进--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ text-indent: 5em; color: red; font-weight: bold; } </style> </head> <body> <p>使用text-indent来实现文本缩进</p> </body> </html>
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中
例：
<!DOCTYPE html> <html lang="en"> <!--水平对齐--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ text-align: center; color: red; font-weight: bold; } h1{ text-align: right; color: blue; font-weight: bold; } </style> </head> <body> <p>居中</p> <p>居中</p> <p>居中</p> <h1>居右</h1> <h1>居右</h1> </body> </html>
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现
字间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近
例：
<!DOCTYPE html> <html lang="en"> <!--文本字间距--> <head> <style type="text/css"> p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} </style> </head> <body> <p class="spread">This is some text. This is some text.</p> <p class="tight">This is some text. This is some text.</p> </body> </html>
字符转换
text-transform 属性处理文本的大小写
3.文本装饰
text-decoration 属性有 5 个值：
- none
- underline
- overline
- line-through
- blink
underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p.down{ text-decoration: underline; } p.up{ text-decoration: overline; } p.line{ text-decoration: line-through; } p.bk{ text-decoration: blink; } </style> </head> <body> <p class="down">我是下划线</p> <p class="up">我是上划线</p> <p class="line">我是贯穿线</p> <p class="bk">我会闪烁</p> </body> </html>
CSS 文本属性
4.字体属性
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）
使用 font-family 属性 定义文本的字体系列
font-style 属性最常用于规定斜体文本
例：
<!DOCTYPE html> <html lang="en"> <!--字体属性--> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 25px; font-weight: bold; font-family: sans-serif; font-style: inherit; } </style> </head> <body> <p>字体样式</p> </body> </html>
5.链接属性
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
例：
<!DOCTYPE html> <html lang="en"> <!--导航栏--> <head> <meta charset="UTF-8"> <title>鲜果园</title> <style> @import "init_demo.css"; .u1{} li{ float:left; } a:link,a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:cornflowerblue; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active{ background-color:#bebebe; } </style> </head> <body> <!--商城顶部--> <div> <ul> <li><a href="">八方资源网首页</a></li> <li><a href="">登录</a></li> <li><a href="">免费注册</a></li> <li><a href="">我的八方</a></li> <li><a href="">帮助</a></li> <li><a href="">投诉举报</a></li> </ul> </div> <!--商城中部--> </body> </html>
6.列表属性
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型
列表属性
例：
<html> <head> <meta charset="UTF-8"> <style type="text/css"> ul.none {list-style-type: none} ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.decimal {list-style-type: decimal} ul.decimal-leading-zero {list-style-type: decimal-leading-zero} ul.lower-roman {list-style-type: lower-roman} ul.upper-roman {list-style-type: upper-roman} ul.lower-alpha {list-style-type: lower-alpha} ul.upper-alpha {list-style-type: upper-alpha} ul.lower-greek {list-style-type: lower-greek} ul.lower-latin {list-style-type: lower-latin} ul.upper-latin {list-style-type: upper-latin} ul.hebrew {list-style-type: hebrew} ul.armenian {list-style-type: armenian} ul.georgian {list-style-type: georgian} ul.cjk-ideographic {list-style-type: cjk-ideographic} ul.hiragana {list-style-type: hiragana} ul.katakana {list-style-type: katakana} ul.hiragana-iroha {list-style-type: hiragana-iroha} ul.katakana-iroha {list-style-type: katakana-iroha} </style> </head> <body> <ul class="none"> <li>"none" 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="disc"> <li>Disc 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="circle"> <li>Circle 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="square"> <li>Square 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal"> <li>Decimal 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="decimal-leading-zero"> <li>Decimal-leading-zero 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-roman"> <li>Lower-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-roman"> <li>Upper-roman 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-alpha"> <li>Lower-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-alpha"> <li>Upper-alpha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-greek"> <li>Lower-greek 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="lower-latin"> <li>Lower-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="upper-latin"> <li>Upper-latin 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hebrew"> <li>Hebrew 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="armenian"> <li>Armenian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="georgian"> <li>Georgian 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="cjk-ideographic"> <li>Cjk-ideographic 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana"> <li>Hiragana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana"> <li>Katakana 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="hiragana-iroha"> <li>Hiragana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> <ul class="katakana-iroha"> <li>Katakana-iroha 类型</li> <li>茶</li> <li>可口可乐</li> </ul> </body> </html>
7. dispaly属性
- none
- block
- inline
8.边框属性
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} </style> </head> <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-style 属性。</p> </body> </html>
9.盒子模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
padding:用于控制内容与边框之间的距离；
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
术语翻译
- element : 元素。
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边
例
<!DOCTYPE html> <html lang="en"> <!--外边距--> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 12px auto; background-color: #2459a2; width: 980px; height: 100px; } div p{ margin: 100px; background-color: #bebebe; width: 100px; height: 50px; } </style> </head> <body> <div> <p></p> </div> </body> </html>
<html> <head> <style type="text/css"> td{ padding-top: 10% } </style> </head> <body> <table border="1"> <tr> <td> 这个表格单元拥有上内边距。 </td> </tr> </table> </body> </html>
<html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one">One-colored border!</p> <p class="two">Two-colored border!</p> <p class="three">Three-colored border!</p> <p class="four">Four-colored border!</p> <p><b>注释：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p> </body> </html>
边框属性
CSS 内边距属性
外边距属性
注意一.
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了
注意二.边界塌陷或者说边界重叠
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离
五.css浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流
浮动可以使元素脱离文档流
在 CSS 中，我们通过 float 属性实现元素的浮动。
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> </body> </html>
行框和清理
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> <p> 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像 </p> </body> </html>
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background-color: #bebebe; float: left; } .div2{ width: 100px; height: 100px; background-color: bisque; float: left; } .clean{ clear: both; } </style> </head> <body> <div class="div1"> Hello </div> <div class="div2"> World </div> <p class="clean"> 浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像 </p> </body> </html>
六.CSS定位
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度
CSS position 属性
position 属性值的含义：
- static
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative
- 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute
- 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
-
相对定位
<html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对定位会按照元素的原始位置对该元素进行移动。</p> <p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p> <p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
绝对定位<html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p> </body> </html>
固定定位<html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">更多的文本。</p> </body> </html>