1. 基本概念
概念： CSS3，Cascading Style Sheets 3，层叠样式表，简称C3。
- 当初一帮技术人员想出HTML，主要侧重于定义内容，比如
<p>表示一个段落，<h1>表示标题，而并没有过多设计HTML的排版和界面效果，随着WEB的迅猛发展，HTML被广泛应用，人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来，为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用<table>来排版，用空白的图片表示白色的空间等，直到CSS出现。 - CSS可算是网页设计的一个突破，它解决了网页界面不好看的难题，可以这么说：
- HTML标签主要是定义网页的内容（Content），而CSS决定这些内容如何显示（Layout）。
- CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的，以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来，这些模块包括：盒子模型，列表模块，超链接方式，语言模块，背景和边框，文字特效，多栏布局等。
2. CSS分类
概念： CSS可以分为如下几种：
user agent stylesheet：浏览器样式，是浏览器对标签设置的一个基本样式：- 谷歌浏览器按F12，可以观察到某标签的浏览器样式信息。
inline stylesheet：内嵌样式，直接写在HTML标签的style属性中。internal stylesheet：内部样式，封装在页头的<style></style>中，需要使用选择器：<style></style>区域为了兼容性更好，建议添加type="text/css"属性。
external stylesheet：外部样式，封装在外部CSS文件中，需要使用选择器：- 页头中引入
<link rel="stylesheet" type="text/css" href="xxx.css"/>。 - 除特殊情况外，一般建议使用外部样式表，统一规范，内容与表现分离。
- 页头中引入
- 样式优先级：对同一个标签的设置的相同CSS属性会覆盖，不同CSS属性会层叠：
- CSS属性覆盖采取就近原则：内嵌 > 内部 > 外部 > 浏览器样式。
- 非内嵌CSS属性后可以使用
!important来提高优先级，但只在两条属性内有效。
- 样式的继承：子标签会继承父标签的外观（字体、颜色等），但不会继承父标签的布局（边框、边距等）。
布局： html/样式分类.html
样式： style/样式分类.css
3. 基本选择器
概念： 选择器指的是捕捉页面一个或多个标签的方式：
*{}：全部选择器，选择所有标签，建议指定具体范围，否则会匹配到很多无关的标签。tag{}：标签选择器，根据HTML标签进行选择。#id{}：根据标签id值进行选择，没有容错功能，重复的id的会被全部选中。.class{}：根据标签class值进行选择，添加多种class时值和值之间用空格隔开。[attr]{}：选择拥有attr属性名的所有标签：[attr="val"]{}：选择拥有attr="val"键值对的所有标签。[attr^="val"]{}：选择拥有attr属性，且属性值以"val"开头的所有标签。[attr$="val"]{}：选择拥有attr属性，且属性值以"val"结尾的所有标签。[attr*="val"]{}：选择拥有attr属性，且属性值包含"val"的所有标签。[attr~="val"]{}：选择属性值按空格拆分后，其中一个是"val"的所有标签。[attr|="val"]：选择属性值按-拆分后，其中一个是"val"的所有标签。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
border-bottom: 10px solid black;
}
</style>
<style type="text/css">
* {
background: gray;
}
</style>
<style type="text/css">
article {
color: purple;
}
</style>
<style type="text/css">
#part1 {
color: yellow;
}
#part2 {
color: yellowgreen;
}
</style>
<style type="text/css">
.to-red {
color: red;
}
.larger {
font-size: larger;
}
</style>
<style type="text/css">
[href] {
color: red;
}
[class="b"] {
color: green;
}
[href^="http://"] {
color: yellow;
}
[href$=".com"] {
font-size: larger;
}
[href*="a"] {
color: #FF9800;
}
[class~="b"] {
color: blue;
}
[lang|="en"] {
color: deeppink;
}
</style>
</head>
<body>
<section id="test-by-tag">
<article>葡萄美酒夜光杯</article>
<article>欲饮琵琶马上催</article>
<article>醉卧沙场君莫笑</article>
<article>古来征战几人回</article>
</section>
<section id="test-by-id">
<p id="part1">死去元知万事空</p>
<!--<p id="part1">但悲不见九州同</p>-->
<p id="part2">王师北定中原日</p>
<!--<p id="part2">家祭无忘告乃翁</p>-->
</section>
<section id="test-by-class">
<aside class="to-red">葡萄美酒夜光杯</aside>
<aside class="to-red">欲饮琵琶马上催</aside>
<aside class="to-red">醉卧沙场君莫笑</aside>
<aside class="to-red larger">古来征战几人回</aside>
</section>
<section id="test-by-field">
<a class="a b c">这是一个没有href的超链接</a><br/>
<a class="b">这是一个没有href的超链接</a><br/>
<a href="http://www.baidu.com">点我跳入百度</a><br/>
<a href="http://www.w3school.com">点我跳入w3school</a><br/>
<a href="a.html">点我跳入a.html</a><br/>
<a lang="en-US">I am a student！</a>
<a lang="en">I am a teacher！</a>
</section>
</body>
</html>
效果
4. 复合选择器
概念： 复合选择器由多个基本选择器组成：
s1, s2{}：群组选择器，将多个选择器通过逗号分隔，同时设置一组相同样式。s1 s2{}：后代选择器，选择s1范围内的所有s2。s1 > s2{}：子类选择器，选择s1范围内的所有s2，要求s2只能是子标签。s1 + s2{}：第一小弟选择器，s1相邻的下一个同级标签是s2，则被选中。s1 ~ s2{}：弟弟们选择器，选择s1后面的同级所有s2，不在乎是否相邻。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
header, .a, #b {
color: red;
}
</style>
<style type="text/css">
#cao-cao div {
border: 1px solid red;
margin: 10px;
}
</style>
<style type="text/css">
#er-er-zi > div {
border: 1px solid red;
margin: 10px;
}
</style>
<style type="text/css">
p + div {
color: red;
}
</style>
<style type="text/css">
h1 ~ p {
color: red;
}
</style>
</head>
<body>
<section id="test-by-group">
<header>秦时明月汉时关</header>
<header class="a">万里长征人未还</header>
<footer class="a">但使龙城飞将在</footer>
<footer id="b">不教胡马度阴山</footer>
</section>
<section id="test-by-all-child">
<div id="ying-zheng">
<div>扶苏</div>
<div>胡亥</div>
</div>
<div id="cao-cao">
<div>曹丕
<div>曹叡</div>
</div>
<div>曹植</div>
</div>
</section>
<section id="test-by-son">
<div id="fu-qin">父亲
<div id="da-er-zi">大儿子</div>
<div id="er-er-zi">二儿子
<div id="da-sun-zi">大孙子</div>
<div id="er-sun-zi">二孙子
<div id="da-chong-sun-zi">大重孙子</div>
</div>
</div>
</div>
</section>
<section id="test-by-first-brother">
<div>声声慢</div>
<p>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。</p>
<div>乍暖还寒时候，最难将息。</div>
<div>三杯两盏淡酒，怎敌他晚来风急？</div>
<p>雁过也，正伤心，却是旧时相识。</p>
<p>满地黄花堆积，憔悴损，如今有谁堪摘？</p>
<p>守着窗儿，独自怎生得黑？</p>
<p>梧桐更兼细雨，到黄昏点点滴滴。</p>
<p>这次第，怎一个愁字了得！</p>
</section>
<section id="test-by-all-brother">
<p>这是一首诗歌</p>
<p>作者是李白</p>
<h1>静夜思</h1>
<div>窗前明月光</div>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</section>
</body>
</html>
效果
5. 伪元素选择器
概念： 伪元素选择器在C3中设定为前面加两个冒号：
s1::first-line{}：块首行（以浏览器为准，与HTML代码无关）选择器，选择s1的第一行内容：s1::first-letter{}：块首字选择器，选择s1的第一个字。s1::before{content: "";}：文本前插选择器，在s1的文本前插入content值。s1::after{content: "";}：文本后插选择器，在s1的文本后插入content值。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#test-by-first-line p::first-line {
color: red;
}
</style>
<style type="text/css">
#test-by-first-letter p::first-letter {
color: red;
}
</style>
<style type="text/css">
#test-by-before a::before {
content: "中华";
}
</style>
<style type="text/css">
#test-by-after p::after {
content: "卫士";
}
</style>
</head>
<body>
<section id="test-by-first-line">
<p>当你走进这欢乐场，背上所有的梦与想，各色的脸上各色的妆，没人记得你的模样</p>
<p>三巡酒过你在角落，固执的唱着苦涩的歌，听他在喧嚣里被淹没，你拿起酒杯对自己说</p>
</section>
<section id="test-by-first-letter">
<p>一杯敬朝阳，一杯敬月光，唤醒我的向往，温柔了寒窗</p>
<p>于是可以不回头的逆风飞翔，不怕心头有雨，眼底有霜</p>
<p>一杯敬故乡，一杯敬远方，守着我的善良，催着我成长</p>
<p>所以南北的路从此不再漫长，灵魂不再无处安放</p>
<p>一杯敬明天，一杯敬过往，支撑我的身体，厚重了肩膀</p>
<p>虽然从不相信所谓山高水长，人生苦短何必念念不忘</p>
<p>一杯敬自由，一杯敬死亡，宽恕我的平凡，驱散了迷惘</p>
<p>好吧天亮之后总是潦草离场，清醒的人最荒唐</p>
</section>
<section id="test-by-before">
<a href="#">人民</a>
</section>
<section id="test-by-after">
<p>人民</p>
</section>
</body>
</html>
效果
6. 结构选择器
概念： 结构选择器是对文本结构的一种过滤逻辑：
s1:first-child：如果s1是第一个子标签，就被选中。s1:last-child：如果s1是最后一个子标签，就被选中。s1:only-child：如果s1没有兄弟标签，就被选中，不考虑类型问题。s1:only-of-type：如果s1没有同类型的兄弟标签，就被选中。s1:nth-child(n)：如果s1是第n个子标签，就被选中。s1:nth-last-child(n)：如果s1是倒数第n个子标签，就被选中。s1:nth-of-type(n)：如果s1是其所有同类型标签中的第n个子标签，就被选中。s1:nth-last-of-type(n)：如果s1是其所有同类型标签中的倒数第n个子标签，就被选中。
n都是从1开始的。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#test-by-first-child li:first-child {
color: red;
}
</style>
<style type="text/css">
#test-by-last-child li:last-child {
color: red;
}
</style>
<style type="text/css">
#test-by-only-child span:only-child {
color: red;
}
</style>
<style type="text/css">
#test-by-only-of-type span:only-of-type {
color: red;
}
</style>
<style type="text/css">
#test-by-nth-child li:nth-child(3) {
color: red;
}
</style>
<style type="text/css">
#test-by-nth-last-child li:nth-last-child(3) {
color: red;
}
</style>
<style type="text/css">
#test-by-nth-of-type div:nth-of-type(3) {
color: red;
}
</style>
<style type="text/css">
#test-by-nth-of-last-type div:nth-last-of-type(3) {
color: red;
}
</style>
</head>
<body>
<section id="test-by-first-child">
<ul>
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
</section>
<section id="test-by-last-child">
<ul>
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
</ul>
</section>
<section id="test-by-only-child">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
<span>3</span>
</div>
<div>
<strong>4</strong>
<span>5</span>
</div>
</section>
<section id="test-by-only-of-type">
<div>
<span>1</span>
</div>
<div>
<span>2</span>
<span>3</span>
</div>
<div>
<strong>4</strong>
<span>5</span>
</div>
</section>
<section id="test-by-nth-child">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
<section id="test-by-nth-last-child">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
<section id="test-by-nth-of-type">
<article>
<div>div-01</div>
<div>div-02</div>
<p>p-03</p>
<div>div-04</div>
<div>div-05</div>
</article>
</section>
<section id="test-by-nth-of-last-type">
<article>
<div>div-01</div>
<div>div-02</div>
<p>p-03</p>
<div>div-04</div>
<div>div-05</div>
</article>
</section>
</body>
</html>
效果
7. UI选择器
概念： UI选择器是对标签状态的一些过滤逻辑：
s1:enable：选择被启用的标签。s1:disabled：选择被禁用的标签。s1:checked：选择被选中的标签，有动态效果，即随时可以被打勾。s1:default：选择默认的的标签，无动态效果，只有第一次被打勾时才会被选中。s1:valid：选择通过验证的标签，验证包括requrired和pattern等。s1:invalid：选择未通过验证的标签，验证包括requrired和pattern等。s1:required：选择有required属性的标签。s1:optional：选择无required属性的标签。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
border-bottom: 5px solid gray;
padding: 5px 0;
}
</style>
<style type="text/css">
#test-by-enable button:enabled {
color: red;
}
</style>
<style type="text/css">
#test-by-disabled button:disabled {
color: red;
}
</style>
<style type="text/css">
#test-by-checked input:checked {
height: 50px;
}
</style>
<style type="text/css">
#test-by-default input:default {
height: 50px;
}
</style>
<style type="text/css">
#test-by-valid input:valid {
border: 5px solid green;
}
</style>
<style type="text/css">
#test-by-invalid input:invalid {
border: 5px solid red;
}
</style>
<style type="text/css">
#test-by-required input:required {
border: 5px solid yellowgreen;
}
</style>
<style type="text/css">
#test-by-optional input:optional {
border: 5px solid black;
}
</style>
</head>
<body>
<section id="test-by-enable">
<button>普通按钮</button>
<button disabled="disabled">禁用按钮</button>
</section>
<section id="test-by-disabled">
<button>普通按钮</button>
<button disabled="disabled">禁用按钮</button>
</section>
<section id="test-by-checked">
<label>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
</label>
</section>
<section id="test-by-default">
<label>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
</label>
</section>
<section id="test-by-valid">
<label>
<input required="required"/>
</label>
</section>
<section id="test-by-invalid">
<label>
<input required="required"/>
</label>
</section>
<section id="test-by-required">
<label>
<input required="required"/>
<input/>
</label>
</section>
<section id="test-by-optional">
<label>
<input required="required"/>
<input/>
</label>
</section>
</body>
</html>
效果
8. 动态选择器
概念： 动态选择器需要一些动作触发之后才会产生效果：
s1:link：未访问的超级链接。s1:visited：已访问的超级链接。s1:hover：鼠标经过超级链接时。s1:active：鼠标激活超级链接时。s1:focus：当获取焦点时。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#test-by-a a:link {
color: green;
}
#test-by-a a:hover {
color: yellow;
}
#test-by-a a:active {
color: red;
}
#test-by-a a:visited {
color: purple;
}
</style>
<style type="text/css">
#test-by-focus input:focus {
border: 1px solid blue;
}
</style>
</head>
<body>
<section id="test-by-a">
<a href="http://www.baidu.com">百度</a>
</section>
<section id="test-by-focus">
<label>
<input type="text"/>
<input type="text"/>
</label>
</section>
</body>
</html>
效果
9. 其他选择器
概念： 其他选择器包括否定选择器、空选择器、lang选择器和锚点选择器：
s1:not()：否定选择。s1:empty：选择没有内容的空标签。s1:lang(en)：选择lang="en"或者没有lang属性的标签。s1:target：当其他元素通过锚点定位到该标签时触发的CSS样式。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#test-by-not a:not([href*="bai"]) {
color: red;
}
</style>
<style type="text/css">
#test-by-empty div:empty {
border: 10px solid red;
height: 100px;
}
</style>
<style type="text/css">
#test-by-lang p:lang(en) {
border: 1px solid red;
}
</style>
<style type="text/css">
#test-by-target div {
height: 1000px;
}
#test-by-target p:target {
color: red;
}
</style>
</head>
<body>
<section id="test-by-not">
<a>百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="http://w3school.com">w3school</a>
<a href="http://w3school.com">w3school</a>
</section>
<section id="test-by-empty">
<div>123</div>
<div></div>
</section>
<section id="test-by-lang">
<p>123</p>
<p lang="zh-CN">456</p>
</section>
<section id="test-by-target">
<p id="abc">锚点</p>
<div></div>
<a href="#abc">点我跳回锚点</a>
</section>
</body>
</html>
效果
1. 文字样式表
概念： 文字样式表包括文字的颜色，形状，大小，字体等：
color：文字的前景色，默认黑色：font-variant：文字变体，默认值为normal：small-caps：改为小型大写字母。
font-style：文字样式，默认值为normal：italic：文字倾斜。oblique：文字强制倾斜。
font-weight：文字重量，默认值为normal：bold：文字一级加粗。bolder：文字二级加粗。
font-size：文字尺寸，默认值为medium:- 使用像素值，如
15px。 - 使用百分比，如
50%，表示占父标签的百分比。 - 使用比例单位
em：表示为父标签倍数，如2em。 - 使用比例单位
rem：表示为<html>元素设置的字号的倍数，如0.5rem。 - 使用预设值，如
xx-small，x-small，small，xx-large，x-large，large，smaller，larger等。
- 使用像素值，如
font-family：使用客户端字体列表，默认值为serif：- 直接使用字体名称列表，如
楷体, 宋体;，浏览器从前向后解析，支持哪个使用哪个。
- 直接使用字体名称列表，如
@font-face{}：服务端字体：允许自己上传字体文件到服务端，这样即使用户环境中没有这种字体也无所谓。- 在
@font-face{}中使用font-family: my-font为字体文件命名。 - 在
@font-face{}中使用src: url("xxx.ttf")引入字体文件。 - 使用服务端字体，如
font-family: my-font。
- 在
字体文件可以从
C:\Windows\Fonts下复制一个出来或者网上下载一个，.ttc和.ttf、.otf等字体文件都可以作为服务端字体来使用。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#test-by-color div:nth-child(1) {
color: red;
}
#test-by-color div:nth-child(2) {
color: #FF9800;
}
#test-by-color div:nth-child(3) {
color: rgb(255, 0, 0);
}
#test-by-color div:nth-child(4) {
color: rgba(255, 0, 0, 0.5);
}
</style>
<style type="text/css">
#test-by-variant div {
font-variant: small-caps;
}
</style>
<style type="text/css">
#test-by-style div {
font-style: italic;
}
</style>
<style type="text/css">
#test-by-weight div {
font-weight: bold;
}
</style>
<style type="text/css">
html {
font-size: 20px
}
section {
font-size: 20px;
}
#test-by-size div:nth-child(2) {
font-size: xx-large;
}
#test-by-size div:nth-child(3) {
font-size: xx-small;
}
#test-by-size div:nth-child(4) {
font-size: larger;
}
#test-by-size div:nth-child(5) {
font-size: smaller;
}
#test-by-size div:nth-child(6) {
font-size: 15px;
}
#test-by-size div:nth-child(7) {
font-size: 200%;
}
#test-by-size div:nth-child(8) {
font-size: 0.5em;
}
#test-by-size div:nth-child(9) {
font-size: 2rem;
}
</style>
<style type="text/css">
#test-by-family div {
font-family: 楷体, 宋体, serif;
}
@font-face {
font-family: my-consola;
src: url("../font/consola.ttf");
}
#test-by-family p {
font-family: my-consola, serif;
}
</style>
</head>
<body>
<section id="test-by-color">
<div>word</div>
<div>hex</div>
<div>rgb</div>
<div>rgba</div>
</section>
<section id="test-by-variant">
<div>small-caps</div>
</section>
<section id="test-by-style">
<div>文字倾斜</div>
</section>
<section id="test-by-weight">
<div>文字加粗</div>
</section>
<section id="test-by-size">
<div>正常文字大小</div>
<div>预设值xx-large</div>
<div>预设值xx-small</div>
<div>大一号larger</div>
<div>小一号smaller</div>
<div>像素值15px</div>
<div>百分比200%</div>
<div>相对父元素比例0.5</div>
<div>相对html比例2</div>
</section>
<section id="test-by-family">
<div>客户端字体-宋体</div>
<div>客户端字体-楷体</div>
<p>服务端字体-aaaaa</p>
<p>服务端字体-iiiii</p>
</section>
</body>
</html>
效果
2. 文本样式表
概念： 文本样式表包括线条、变形，间距，溢出，裁剪等：
text-decoration：文本线条，默认none：underline：下划线。line-through：中划线，删除线。overline：上划线。
text-transform：文本变形，默认none：uppercase，lowercase：将英文文本转换大写，小写。capitalize：每个单词首字母大写，以空格视为单词区分。
text-shadow：需要同时设置四个属性，水平偏移量，垂直偏移量，模糊程度（值越大越模糊）和阴影颜色。text-indent：默认normal，直接使用像素值设置。text-align：文本对齐方式：left，center，right：左，居中，右对齐。justify，start，end：两端对齐，文本对齐开始边界，文本对齐结束边界。
white-space：换行效果，默认值为normal，遇<br />或行满换行。nowrap：空格压缩，遇<br />换行，行满不换行。pre：空格保留，遇<br />换行，行满不换行。pre-wrap：空格保留，遇<br />或行满换行。
word-wrap：长单词处理，默认值为normal，长单词不换行。break-word：长单词换行。
letter-spacing：字符或中文汉字之间的间距设置，直接使用像素值设置。word-spacing：单词或词组之间的间距设置，直接使用像素值设置。line-height：行高，直接使用像素值或百分比设置。overflow：当内容超出所在容器时的处理方案，默认值为visible，不管是否溢出，都不处理：auto：如果有内容溢出，就显示滚动条，否则就不显示滚动条。hidden：如果有内容溢出，直接剪掉溢出的内容。scroll：无论是否有内容溢出，都显示滚动条。
text-overflow：设置溢出的文本，默认值为clip，仅裁剪溢出的文本：ellipsis：裁剪溢出的文本并在其末尾加一个...，诱用户点击。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#test-by-decoration p:nth-child(1) {
text-decoration: underline;
}
#test-by-decoration p:nth-child(2) {
text-decoration: line-through;
}
#test-by-decoration p:nth-child(3) {
text-decoration: overline;
}
</style>
<style type="text/css">
#test-by-transform div:nth-child(1) {
text-transform: uppercase;
}
#test-by-transform div:nth-child(2) {
text-transform: lowercase;
}
#test-by-transform div:nth-child(3) {
text-transform: capitalize;
}
</style>
<style type="text/css">
#test-by-shadow div {
text-shadow: 2px -2px 2px red;
}
</style>
<style type="text/css">
#test-by-indent p:nth-child(1) {
text-indent: 10px;
}
#test-by-indent p:nth-child(2) {
text-indent: 20px;
}
#test-by-indent p:nth-child(3) {
text-indent: 30px;
}
</style>
<style type="text/css">
#test-by-align p:nth-child(1) {
text-align: left;
}
#test-by-align p:nth-child(2) {
text-align: center;
}
#test-by-align p:nth-child(3) {
text-align: right;
}
</style>
<style type="text/css">
#test-by-white-space p {
width: 100px;
border: 1px solid red;
}
#test-by-white-space p:nth-child(1) {
white-space: nowrap;
}
#test-by-white-space p:nth-child(2) {
white-space: pre;
}
#test-by-white-space p:nth-child(3) {
white-space: pre-line;
}
#test-by-white-space p:nth-child(4) {
white-space: pre-wrap;
}
</style>
<style type="text/css">
#test-by-word-wrap p {
width: 100px;
border: 1px solid red;
}
#test-by-word-wrap p:nth-child(1) {
word-wrap: break-word;
}
</style>
<style type="text/css">
#test-by-letter-spacing p {
letter-spacing: 20px;
}
</style>
<style type="text/css">
#test-by-word-spacing p {
word-spacing: 20px;
}
</style>
<style type="text/css">
#test-by-line-height p {
line-height: 200px;
}
</style>
<style type="text/css">
#test-by-over-flow p {
width: 100px;
border: 1px solid red;
white-space: nowrap;
}
#test-by-over-flow p:nth-child(1) {
overflow: auto;
}
#test-by-over-flow p:nth-child(2) {
overflow: hidden;
}
#test-by-over-flow p:nth-child(3) {
overflow: scroll;
}
</style>
<style type="text/css">
#test-by-text-over-flow p {
width: 100px;
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
}
#test-by-text-over-flow p:nth-child(1) {
text-overflow: clip;
}
#test-by-text-over-flow p:nth-child(2) {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<section id="test-by-decoration">
<p>文本线条-下划线</p>
<p>文本线条-删除线</p>
<p>文本线条-上划线</p>
</section>
<section id="test-by-transform">
<div>I am JoeZhou</div>
<div>I am JoeZhou</div>
<div>I am JoeZhou</div>
</section>
<section id="test-by-shadow">
<div>中华人民是最伟大的民族</div>
</section>
<section id="test-by-indent">
<p>中华人民是最伟大的民族</p>
<p>中华人民是最伟大的民族</p>
<p>中华人民是最伟大的民族</p>
</section>
<section id="test-by-align">
<p>文本-左对齐</p>
<p>文本-居中</p>
<p>文本-右对齐</p>
</section>
<section id="test-by-white-space">
<p>中华 人民<br/>是最伟大的民族</p>
<p>中华 人民<br/>是最伟大的民族</p>
<p>中华 人民<br/>是最伟大的民族</p>
<p>中华 人民<br/>是最伟大的民族</p>
</section>
<section id="test-by-word-wrap">
<p>heeeeeeeeeeeeello</p>
<p>heeeeeeeeeeeeello</p>
</section>
<section id="test-by-letter-spacing">
<p>中华人民是最伟大的民族</p>
</section>
<section id="test-by-word-spacing">
<p>中华人民 是 最伟大的 民族</p>
</section>
<section id="test-by-line-height">
<p>中华人民是最伟大的民族</p>
</section>
<section id="test-by-over-flow">
<p>中华人民是最伟大的民族</p>
<p>中华人民是最伟大的民族</p>
<p>中华人民是最伟大的民族</p>
</section>
<section id="test-by-text-over-flow">
<p><a href="#">中华人民是最伟大的民族</a></p>
<p><a href="#">中华人民是最伟大的民族</a></p>
</section>
</body>
</html>
效果
3. 列表样式表
概念： 列表样式表包括标记类型，标记位置和图片标记等：
list-style-type：列表的标记类型：none：取消列表的标记。disc，circle，square：标记为实心圆，空心园，实心方块。decimal：标记为阿拉伯数字。lower-roman，upper-roman：标记为小写，大写罗马数字。lower-alpha，upper-alpha：标记为小写，大写英文字母。
list-style-position：标记的位置，默认值为outside，表示标记不作为列表项的一部分：inside：将标记视为列表项的一部分。
list-style-image：使用图片作为标记，默认值是none，表示不使用：- 通过
url()指定图像作为项目标记。
- 通过
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#test-by-list-style-type ul:nth-child(1) {
list-style-type: none;
}
#test-by-list-style-type ul:nth-child(2) {
list-style-type: disc;
}
#test-by-list-style-type ul:nth-child(3) {
list-style-type: circle;
}
#test-by-list-style-type ul:nth-child(4) {
list-style-type: square;
}
#test-by-list-style-type ul:nth-child(5) {
list-style-type: decimal;
}
#test-by-list-style-type ul:nth-child(6) {
list-style-type: lower-roman;
}
</style>
<style type="text/css">
#test-by-list-style-position ul:nth-child(1){
list-style-position: inside;
}
#test-by-list-style-position ul:nth-child(2){
list-style-position: outside;
}
</style>
<style type="text/css">
#test-by-list-style-image ul{
list-style-image: url("../z-image/list-style-image.png");
}
</style>
</head>
<body>
<section id="test-by-list-style-type">
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
</section>
<section id="test-by-list-style-position">
<ul>
<li>首页</li>
</ul>
<ul>
<li>首页</li>
</ul>
</section>
<section id="test-by-list-style-image">
<ul>
<li>首页</li>
<li>咨询</li>
<li>关于</li>
<li>我们</li>
</ul>
</section>
</body>
</html>
效果
4. 表格样式表
概念： 表格样式表包括边框，间距，位置，单元格特征等：
border-collapse：边框合并，默认值是separate，单元格边框独立：collapse：单元格边框合并。
border-spacing：单元格之间的间距，可以直接使用像素值。caption-side：标题位置，默认值是top，标题在上方：bottom：标题在下方。
empty-cells：空单元格，默认值是show，空单元格显示边框：hide:空单元格不显示边框。
table-layout：单元格内容过长时的处理，默认值是auto，内容过长拉伸单元格，挤占其他单元格：fixed：自适应，无论内容多长，保证单元格与其他单元格等宽。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
table, td, th {
border: 1px solid red;
}
</style>
<style type="text/css">
#text-by-border-collapse table {
border-collapse: collapse;
}
</style>
<style type="text/css">
#text-by-border-spacing table {
border-spacing: 20px;
}
</style>
<style type="text/css">
#text-by-caption-side table {
caption-side: bottom;
}
</style>
<style type="text/css">
#text-by-empty-cells table {
empty-cells: hide;
}
</style>
<style type="text/css">
#text-by-table-layout table {
width: 300px;
table-layout: fixed;
}
</style>
</head>
<body>
<section id="text-by-border-collapse">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>赵四</td>
<td>58</td>
<td>男</td>
</tr>
</table>
</section>
<section id="text-by-border-spacing">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>赵四</td>
<td>58</td>
<td>男</td>
</tr>
</table>
</section>
<section id="text-by-caption-side">
<table>
<caption>人员表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>赵四</td>
<td>58</td>
<td>男</td>
</tr>
</table>
</section>
<section id="text-by-empty-cells">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>赵四</td>
<td></td>
<td></td>
</tr>
</table>
</section>
<section id="text-by-table-layout">
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>尼古拉斯------------赵四</td>
<td>58</td>
<td>男</td>
</tr>
</table>
</section>
</body>
</html>
效果
图示：盒模型.png
1. 盒模型尺寸
概念： 盒模型尺寸样式包括宽高，极值限制等：
width：设置盒模型的宽度，可以使用像素值或者百分比。height：设置盒模型的高度，可以使用像素值或者百分比。min-width：设置盒模型的最小宽度限制。max-width：设置盒模型的最大宽度限制。min-height：设置盒模型的最小高度限制。max-height：设置盒模型的最大高度限制。resize：对设置了overflow: auto的盒模型设置拖拽效果，默认值是none，表示不允许拖拽：horizontal：只允许水平拖拽。vertical：只允许竖直拖拽。both：允许水平拖拽和竖直拖拽。
<textarea>的默认值是both，且不需要设置overflow: auto亦可生效。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-height div {
height: 200px;
}
</style>
<style type="text/css">
#text-by-width p {
width: 300px;
background: yellowgreen;
}
#text-by-width div {
width: 200px;
height: 200px;
max-height: 300px;
max-width: 300px;
}
#text-by-width div:hover {
width: 400px;
height: 400px;
}
</style>
<style type="text/css">
#text-by-resize div {
width: 100px;
height: 100px;
background-color: red;
overflow: auto;
resize: horizontal;
}
#text-by-resize textarea {
resize: both;
}
</style>
</head>
<body>
<section id="text-by-height">
<div></div>
</section>
<section id="text-by-width">
<p>300px</p>
<div></div>
</section>
<section id="text-by-resize">
<div></div>
<label>
<textarea></textarea>
</label>
</section>
</body>
</html>
效果
2. 盒模型边距
概念： 盒模型边距样式包括内边距和外边距等：
padding：内边距，从边框出发到容器内容的距离，负数视为0，影响原尺寸：padding-top：1px：单独设置上内边距，其余方向同理。padding: 1px：同时设置上下左右内边距为1px。padding: 1px 2px：同时设置上下内边距为1px，左右内边距为2px。padding: 1px 2px 3px：同时设置上内边距是1px，左右内边距为2px，下内边距是3px。padding: 1px 2px 3px 4px：同时设置上右下左内边距分别为1px，2px，3px和4px。
margin：外边距，从边框出发到其他标签的距离，支持负数，不影响原尺寸，相邻外边距重叠而不累加：margin-top：1px：单独设置上外边距，其余方向同理。margin: 1px：同时设置上下左右外边距为1px。margin: 1px 2px：同时设置上下外边距为1px，左右外边距为2px。margin: 1px 2px 3px：同时设置上外边距是1px，左右外边距为2px，下外边距是3px。margin: 1px 2px 3px 4px：同时设置上右下左外边距分别为1px，2px，3px和4px。
box-sizing: border-box：可以忽略边框厚度对原始尺寸的影响。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-padding p {
width: 200px;
background: yellowgreen;
}
#text-by-padding div {
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}
</style>
<style type="text/css">
#text-by-margin div:nth-child(1) {
width: 200px;
height: 200px;
margin-bottom: 100px;
}
#text-by-margin div:nth-child(2) {
margin-top: 150px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<section id="text-by-padding">
<p>200px</p>
<div>内容</div>
</section>
<section id="text-by-margin">
<div>内容A</div>
<div>内容B</div>
</section>
</body>
</html>
效果
3. 盒模型边框
概念： border 用来设置盒模型的边框，其宽度会影响原尺寸：
border-width：单独设置边框宽度。border-style：单独设置边框样式，默认值为none，其余可选如：solid，dashed，double，dotted，inset，outset，ridge，groove
border-color：单独设置边框颜色。border：1px solid red：同时设置四条边框的宽度，样式和颜色。border-top：1px solid red：单独设置上边框的宽度，样式和颜色，其余方向同理。- 点容器（宽高为0）的边框会向四外以三角形发散。
box-sizing: border-box：可以忽略边框厚度对原始尺寸的影响。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-border div {
width: 100px;
height: 100px;
border: 10px groove green;
/*border-width:10px;
border-style: groove;
border-color: green;*/
}
</style>
<style type="text/css">
#text-by-border-point div {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-top: 50px solid blue;
border-right: 50px solid yellow;
border-left: 50px solid green;
}
</style>
</head>
<body>
<section id="text-by-border">
<div>内容</div>
</section>
<section id="text-by-border-point">
<div></div>
</section>
</body>
</html>
效果
4. 盒模型圆角
概念： border-radius 用来设置盒模型的圆角，数值越大，弧度越大，边框的角越圆：
-
border-radius: 15px：同时设置四条边角的弧度。 -
border-top-left-radius: 50%：单独设置左上角的弧度，左下，右上和右下同理。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-border-radius div {
width: 200px;
height: 200px;
border-radius: 10%;
}
</style>
</head>
<body>
<section id="text-by-border-radius">
<div></div>
</section>
</body>
</html>
效果
5. 盒模型轮廓
概念： outline 用来设置盒模型的轮廓，轮廓显示在在边框的外层：
-
outline-width：单独设置轮廓宽度。 -
outline-style：单独设置轮廓样式，默认值为none，其余可选如：solid，dashed，double，dotted，inset，outset，ridge，groove
-
outline-color：单独设置轮廓颜色。 -
outline：1px solid red：同时设置四条轮廓的宽度，样式和颜色。 -
无法单独设置某一条轮廓的样式。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-outline div {
width: 200px;
height: 200px;
outline: 10px solid blue;
border: 10px solid green;
}
</style>
</head>
<body>
<section id="text-by-outline">
<div></div>
</section>
</body>
</html>
效果
6. 盒模型形态
概念： 盒模型一共有三种形态：区块、内联和内联块，通过 display 属性可以相互转换：
-
block：显示为区块，能设置宽度和高度，默认占一行位置。 -
inline：显示为内联，不能设置宽度和高度，不占一行。 -
inline-block：显示为内联块，能设置宽度和高度，不占一行。 -
none：不显示。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-block div {
width: 100px;
height: 100px;
display: block;
}
</style>
<style type="text/css">
#text-by-inline div {
width: 100px;
height: 100px;
display: inline;
}
</style>
<style type="text/css">
#text-by-inline-block div {
width: 100px;
height: 100px;
display: inline-block;
}
</style>
<style type="text/css">
#text-by-none div {
width: 100px;
height: 100px;
display: none;
}
</style>
</head>
<body>
<section id="text-by-block">
<div>区块</div>
<span>后续内容</span>
</section>
<section id="text-by-inline">
<div>内联</div>
<span>后续内容</span>
</section>
<section id="text-by-inline-block">
<div>内联块</div>
<span>后续内容</span>
</section>
<section id="text-by-none">
<div>隐藏</div>
<span>后续内容</span>
</section>
</body>
</html>
效果
7. 盒模型可见
概念： visibility 用来设置盒模型的可见性，默认值为 visible，表示盒模型可见：
-
hidden：设置盒模型不可见，但会占据空间。 -
collapse：设置表格不可见，不会占据原来的位置。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
div {
background: red;
}
</style>
<style type="text/css">
#text-by-hidden div {
width: 200px;
height: 200px;
visibility: hidden;
}
</style>
<style type="text/css">
#text-by-collapse table {
width: 200px;
height: 200px;
visibility: collapse;
}
</style>
</head>
<body>
<section id="text-by-hidden">
<div>可见性</div>
<span>后续内容</span>
</section>
<section id="text-by-collapse">
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>赵四</td>
<td>58</td>
</tr>
</table>
<span>后续内容</span>
</section>
</body>
</html>
效果
8. 盒模型背景
概念： background 属性来设置背景：
-
background-color: red：背景色，默认值是transparent，表示背景透明。 -
background-image: url()：背景图片，默认值是none，表示没有背景图片，超出平铺，不足裁剪。 -
background-repeat：背景图片平铺，默认是repeat，表示平铺：repeat-x，repeat-y：横向，纵向平铺。no-repeat：不平铺。
-
background-size：背景图片尺寸，默认是auto，表示自动：20px 20px：宽度为20px，高度为20px。100% 100%：宽度为100%，高度为100%。cover：等比缩放，直到宽和高全部超过边界。contain：等比缩放，直到宽或者高有一个超过边界。
-
background-position：背景图片的位置：top，left，right，bottom：从上，左，右，下开始布景。center：从中心开始布景。
-
background-attachment：背景图片滚动效果，默认值是scroll，表示背景跟随内容滚动：fixed：背景不跟随内容滚动。
-
background-clip：背景图片裁剪位置，默认值是padding-box，表示从边框内左上角的位置开始展示：border-box：从边框外左上角的位置开始展示。content-box：从内边距左上角位置开始展示。
-
background-origin：重新设置背景起点，默认值是padding-box，表示背景起点设置为边框内左上角：border-box：背景起点设置为边框外左上角。content-box：背景起点设置为内边距左上角。
-
opacity来设置盒模型透明度，范围是0到1，从全透明到不透明，对前景色和背景色都有效。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#text-by-color div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<style type="text/css">
#text-by-image div {
width: 100px;
height: 100px;
background-image: url("../z-image/背景图.png");
}
</style>
<style type="text/css">
#text-by-repeat div {
width: 100px;
height: 100px;
border: 1px solid green;
background-image: url("../z-image/list-style-image.png");
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
}
</style>
<style type="text/css">
#text-by-size div {
width: 100px;
height: 100px;
background-image: url("../z-image/背景图.png");
background-size: 100% 100%;
}
</style>
<style type="text/css">
#text-by-position div {
width: 100px;
height: 100px;
background-image: url("../z-image/list-style-image.png");
background-position-y: top;
background-position-x: left;
}
</style>
<style type="text/css">
#text-by-attachment {
background-image: url("../z-image/list-style-image.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
<style type="text/css">
#text-by-clip div {
width: 100px;
height: 100px;
border: 50px double green;
background-image: url("../z-image/背景图.png");
background-repeat: no-repeat;
background-clip: padding-box;
padding: 50px;
display: inline-block;
margin-right: 20px;
}
#text-by-clip div:nth-child(1) {
background-clip: padding-box;
}
#text-by-clip div:nth-child(2) {
background-clip: border-box;
}
#text-by-clip div:nth-child(3) {
background-clip: content-box;
}
</style>
<style type="text/css">
#text-by-origin div {
width: 100px;
height: 100px;
border: 50px double green;
background-image: url("../z-image/背景图.png");
background-repeat: no-repeat;
padding: 50px;
display: inline-block;
margin-right: 20px;
}
#text-by-origin div:nth-child(1) {
background-origin: padding-box;
}
#text-by-origin div:nth-child(2) {
background-origin: border-box;
}
#text-by-origin div:nth-child(3) {
background-origin: content-box;
}
</style>
<style type="text/css">
#text-by-opacity div {
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
</style>
</head>
<body id="text-by-attachment">
<section id="text-by-color">
<div></div>
</section>
<section id="text-by-image">
<div></div>
</section>
<section id="text-by-repeat">
<div></div>
</section>
<section id="text-by-size">
<div></div>
</section>
<section id="text-by-position">
<div></div>
</section>
<section id="text-by-clip">
<div></div>
<div></div>
<div></div>
</section>
<section id="text-by-origin">
<div></div>
<div></div>
<div></div>
</section>
<section id="text-by-opacity">
<div>文字</div>
</section>
</body>
</html>
效果
9. 盒模型阴影
概念： box-shadow 可以对盒模型元素设置阴影效果：
-
box-shadow: 1px -2px 3px red：右偏1px，上偏2px，模糊3px，红色，阴影为外放。 -
box-shadow: 1px -2px 3px 100px red：右偏1px，上偏2px，模糊3px，外放100px，红色，阴影为外放。 -
box-shadow: 1px 2px 3px red inset：右偏1px，下偏2px，模糊3px，红色，阴影为收缩。 -
box-shadow: 1px 2px 3px 100px red inset：右偏1px，下偏2px，模糊3px，收缩100px，红色，阴影为收缩。 -
存在兼容性问题，IE9以下不支持。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
section {
padding: 10px;
border-bottom: 5px solid red;
}
</style>
<style type="text/css">
#text-by-shadow div {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 5px 5px 5px 100px gray;
}
</style>
<style type="text/css">
#text-by-inset div {
width: 100px;
height: 100px;
border: 1px solid red;
box-shadow: 5px 5px 5px 100px gray inset;
}
</style>
</head>
<body>
<section id="text-by-shadow">
<div></div>
</section>
<section id="text-by-inset">
<div></div>
</section>
</body>
</html>
效果
1. 定位方式
概念： 定位指的是决定并设置元素的XY轴的位置，使用方式分为两步骤：
- 通过
position属性决定定位方式。 - 通过
top，right，left和bottom进行具体的位置坐标的调节。
position的默认值为static，表示无定位。
1.1 绝对定位
概念： position: absolute 表示设置元素的定位方式为绝对定位：
- 绝对定位以文档原点坐标为参考点，所以会随着文档的滚动而滚动。
- 绝对定位与其他元素互不干扰，相当浮在页面上层。
- 绝对定位的优势在于不干扰其他元素，但缺点是不灵活，如果它存在一个父元素，不会随着父元素的移动而移动。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
height: 5000px;
margin: 0;
}
#text-by-absolute {
width: 300px;
height: 300px;
border: 1px solid red;
}
#text-by-absolute:hover {
margin-left: 100px;
}
#text-by-absolute div {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<section id="text-by-absolute">
<div></div>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
</section>
</body>
</html>
效果
1.2 相对定位
概念： position: relative 表示设置元素的定位方式为相对定位：
- 相对定位以自身原点坐标为参考点，所以会随着文档的滚动而滚动。
- 相对定位会在移动前的位置留下一个透明分身，该分身会干扰其他元素。
- 相对定位的优势在于灵活，如果它存在一个父元素，会随着父元素的移动而移动，但缺点是会干扰其他元素。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
height: 5000px;
margin: 0;
}
#text-by-relative {
width: 300px;
height: 300px;
border: 1px solid red;
}
#text-by-relative:hover {
margin-left: 100px;
}
#text-by-relative div {
width: 100px;
height: 100px;
background-color: green;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<section id="text-by-relative">
<div></div>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
</section>
</body>
</html>
效果
1.3 固定定位
概念： position: fixed 表示设置元素的定位方式为固定定位：
- 固定定位以视口原点坐标为参考点，所以不会随着文档的滚动而滚动。
- 固定定位与其他元素互不干扰，相当浮在页面上层。
- 固定定位不会随着父元素的移动而移动。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
height: 5000px;
margin: 0;
}
#text-by-fixed {
width: 300px;
height: 300px;
border: 1px solid red;
}
#text-by-fixed:hover{
margin-left: 100px;
}
#text-by-fixed div {
width: 100px;
height: 100px;
background-color: green;
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<section id="text-by-fixed">
<div></div>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
</section>
</body>
</html>
效果
1.4 相对中绝对
概念： 我们既想要绝对定位的不占位置的优点，又想要相对定位灵活的优点，则产生了相对中绝对的模式，步骤如下：
- 把父元素作为相对点，就会变的灵活一些。
- 让子元素绝对定位，就不会占地方。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
height: 5000px;
margin: 0;
}
#text-by-absolute-in-relative {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
#text-by-absolute-in-relative:hover {
margin-left: 100px;
}
#text-by-absolute-in-relative div {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<section id="text-by-absolute-in-relative">
<div></div>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯。</p>
</section>
</body>
</html>
效果
1.5 Z轴属性
概念： z-index 可以调节元素的Z轴数值，默认值为0。
布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#text-by-z-index div {
width: 100px;
height: 100px;
position: absolute;
}
#text-by-z-index div:nth-child(1) {
background-color: green;
top: 100px;
left: 100px;
z-index: 2;
}
#text-by-z-index div:nth-child(2) {
background-color: yellow;
top: 150px;
left: 150px;
z-index: 1;
}
#text-by-z-index div:nth-child(3) {
background-color: blue;
top: 200px;
left: 200px;
z-index: 0;
}
</style>
</head>
<body>
<section id="text-by-z-index">
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
效果
