前端(二)：css样式

　　本节笔记根据css中文手册整理，内容已做成思维导图。下载地址https://files.cnblogs.com/files/kuaizifeng/css.xmind.zip。

　　css（Csacading Style Sheet）级联样式表，是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。也就是说，css的作用基本有两个：1.将样式定义从html中独立出来，更方便地设置样式；2.给标记的对象(html元素)设置样式，所以必须要先有对象。

　　语法: Selector {property: value}

一、引入方式

　　1.外链引用(Linking to a Style Sheet)

　　写在<head>头部标签内即可。href属性指向本地(或服务器)的静态资源路径。

　　type="text/css"是允许不支持这类型的浏览器忽略样式表单。

<link rel="stylesheet" type="text/css" href="/c5_20171220.css" />

　　2.内部定义(Embedding a Style Block)

　　在<head>头部标签内定义<style>标签，并将样式写在style内部。

<style type="text/css">

    #father p.c2{

        color:black;

    }

    #father #son{

        color:blue;

    }

</style>

　　3.内联定义(Inline Styles)

　　在对象的标记内使用对象的style属性定义适用其的样式表属性。

<p style="margin-left; 0.5in; margin-right:0.5in">这一行被增加了左右额外补丁</p>

二、特性

　　1.层叠性

　　在权重相同的情况下，在同一个标签中样式发生冲突，后面定义样式会将前面定义的样式给覆盖掉。

　　2.继承性

　　在默认情况下，如果子元素没有设置样式，那么该子元素会受父元素的样式影响。CSS继承性只能发生在标签嵌套结构中。

　　可继承的属性：

　　　　- color 可以被继承

　　　　- font-size 可以被继承 

　　　　- 与font属性相关的属性都可以被继承

　　　　- 行高（line-height）可以被继承 

　　　　- text-align 可以被继承

　　继承性中特殊标签：

　　　　- a标签不能直接受父元素中的文字颜色影响

- 标题标签不能直接受父元素中的文字大小影响

三、选择器及其权重

　　1.选择器

　　选择器用于选择标记对象，以便给其赋予样式。选择器分为以下几种选择器。

　　通配符(Universal Selector)

　　语法: *{sRules}

　　必写的选择器，用于给所有DOM对象设置共有的样式。

*{

    margin:;

    padding:;

}

　　标签选择器(Type Selectors)

　　语法: E{sRules}

　　必写的选择器，选择某一类标签元素(Element)设置样式。

a {

    text-decoration: none;

}

　　通配符+类型选择器一般用于初始化整个DOM的样式。

　　类选择器(Class Selectors)

　　语法: .className{SRules}

　　最常用的选择器，选择某一类class属性值相同的对象设置样式。

.nav{

    background-color: pink;

    height: 50px;

    width: 50px;

}

<div  class="nav">
　　...

</div>

　　ID选择器(ID Selectors)

　　语法: #ID {sRules}

　　特殊对待某个标签元素的选择器，选择具有唯一标识符id的元素作为操作对象。

#nav{

    background-color: pink;

    height: 50px;

    width: 50px;

}

<div  id="nav">

　　...

</div>

　　组合选器

　　- 包含选择器(Descendant Selectors):

　　　　多个选择器可以同时写在一行并用空格符隔开，等价于选择同时符合这些选择器的元素对象。

　　　　语法 E1 E2 {sRules}

　　- 选择器分组(Grouping)

　　　　多个选择器用"，"号隔开，等价于选择只要满足某个选择器的所有元素对象。

　　　　语法 E1, E2 {sRules}

　　- 属性选择器(Attribute Selectors)

　　　　在已有选择器的基础上，根据某个属性进行再次过滤选择对象元素。

　　　　语法 E1[Attribute=value] {sRules}

　　- 子对象选择器(Child Seletors)

　　　　在已有选择器的基础上，根据某个子对象再次过滤选择器元素对象。

　　　　语法 E1 > E2 {sRules}

　　扩展的选择器

　　伪类(Pseudo-Classes)和伪元素(Pseudo-Elements):于设置特定事件触发的特殊效果，如鼠标悬浮时变色等。

　　常见的伪类:

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

　　常见的伪元素:

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

　　简单记忆：四种基础选择器，四种组合选择器，伪类及伪元素。

　　2.权重计算

　　下表为权重计算表，数值只代表等级而不是真实值。

选择器	权重
继承	0
通配符	1
标签选择器	10
类选择器	100
id选择器	1000
行内样式	10000
!important	100000

　　由于选择器具有优先级，所以选择器连写时最好从大到小写。

　　3.选择器练习

　　练习一：选择元素并设置样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style>

        .title{

            text-align:center;

            /*font-size:28px;

            font-family:"微软雅黑";

            font-weight:normal;*/

            font:normal 28px "微软雅黑";

        }

        .sub_title{

              text-align:center;

        }

        .sub_title .time{

            color:#aabbcc;

            font-size:14px;

        }

        .sub_title .nows_title{

             color:#990000;

             font-size:14px;

        }

        p{

             text-indent:2em;

             line-height:28px;

        }

        p span{

             color:#3399cc;

        }

        /* 属性选择器 */

        input[type="button"]{

             color: green;

             font-weight:700;

        }

        input[type="text"]{

            color:red;

            font-size:12px;

        }

    </style>

</head>

<body>

　　<div class="box">

     　<h2 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2>

     　<div class="sub_title">

        　<span class="time">2014年07月16日20:11</span>

        　<span class="nows_title">新浪体育 评论中大奖（11人参与）</span>

        　<a href="#">收藏本文</a>

        　<input type="text"  value="请输入查询条件">

        　<input type="button" value="搜索">

     　</div>

　　　　<hr>

　　　　<p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

　　　　<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

　　　　<p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

　　　　<p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>

　　　　</div>

</body>

</html>

选择器设置样式

　　练习二：jquery操作选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>问卷调查</title>

    <link rel="stylesheet" type="text/css" href="d3.css" />

</head>

<body>

<div id="total">

    <div class="inner">

        <p>你喜欢哪个城市?</p>

        <ul id="city">

            <li id="bj">北京</li>

            <li>上海</li>

            <li>东京</li>

            <li>首尔</li>

        </ul>

        <br><br>

        <p>你喜欢哪款单机游戏?</p>

        <ul id="game">

            <li id="rl">红警</li>

            <li>实况</li>

            <li>极品飞车</li>

            <li>魔兽</li>

        </ul>

        <br /><br />

        <p>你手机的操作系统是?</p>

        <ul id="phone">

            <li>IOS</li>

            <li id="android">Android</li>

            <li>Windows Phone</li>

        </ul>

    </div>

    <div class="inner">

        gender:

        <input class="hello" type="radio" name="gender" value="male"/>

        Male

        <input class="hello" type="radio" name="gender" value="female"/>

        Female

        <br>

        <br>

        name:

        <input type="text" name="name" id="username" value="abcde"/>

    </div>

</div>

<div id="btnList">

    <div><button id="btn01">查找#bj节点</button></div>

    <div><button id="btn02">查找所有li节点</button></div>

    <div><button id="btn03">查找name=gender的所有节点</button></div>

    <div><button id="btn04">查找#city下所有li节点</button></div>

    <div><button id="btn05">返回#city的所有子节点</button></div>

    <div><button id="btn06">返回#phone的第一个子节点</button></div>

    <div><button id="btn07">返回#bj的父节点</button></div>

    <div><button id="btn08">返回#android的前一个兄弟节点</button></div>

    <div><button id="btn09">返回#username的value属性值</button></div>

    <div><button id="btn10">设置#username的value属性值</button></div>

    <div><button id="btn11">返回#bj的文本值</button></div>

</div>

<script type="text/javascript">

    function myClick(click, fun) {

        var btn = document.getElementById(click);

        btn.onclick = fun;

    }

    //---------------------获取节点操作-----------------------------

    myClick("btn01",function() {

        var obj = document.getElementById("bj");

        alert(obj.innerText);

    });

    myClick("btn02",function() {

        var obj = document.getElementsByTagName('li');

        for(var i=0; i<obj.length; i++){

            alert(obj[i].innerHTML);

        }

    });

    myClick("btn03",function() {

        var obj = document.getElementsByName("gender");

        for(var i=0; i<obj.length; i++){

            alert(obj[i].tagName);

        }

    });

    //---------------------获取子节点操作-----------------------------

    // getElementsByTagName[..],childNodes, firstChild, lastChild

    myClick("btn04",function() {

        var obj = document.getElementById("city");

        var sub = obj.getElementsByTagName("li"); // 注意这两个的查询方式

        // alert(sub.length);

        for(var i=0; i<sub.length; i++){

            alert(sub[i].innerHTML);

        }

    });

    myClick("btn05",function(ev) {

        var obj = document.getElementById("city");

        // var sub = obj.childNodes; // 属性,这货会把所有的子节点都带上，包括注释、换行等等

        var sub = obj.children;

        for(var i=0; i<sub.length; i++){

            alert(sub[i].innerText);

        }

    });

    myClick("btn06",function() {

        var obj = document.getElementById("phone");

        // var first = obj.firstChild; // 这货同样是啥东西都包含

        var first = obj.firstElementChild; // 这里是获取真正的第一个元素, 同last...

        alert(first.innerHTML);

    });

    myClick("btn07", function() {

        var obj = document.getElementById("bj");

        // var father = obj.parentNode; // 同样包含换行和注释，父节点是包含所有子节点的一个大节点

        var father = obj.parentElement;

        alert(father);

    });

    //---------------------获取父节点操作-----------------------------

    // parentNode、previousSibling、nextSibling

    myClick("btn08", function() {

        var obj = document.getElementById("android");

        // var before = obj.previousSibling; // 注意，和前面的一样

        var before = obj.previousElementSibling;

        alert(before.innerHTML);

    });

    myClick("btn09", function() {

        var obj = document.getElementById("username");

        alert(obj.value);

    });

    myClick("btn10", function() {

        var obj = document.getElementById("username");

        obj.value = "what the hell?";

        alert(obj.value);

    });

    myClick("btn11", function() {

        var obj = document.getElementById("bj");

        alert(obj.innerText);

    });

</script>

</body>

</html>

jquery选择器练习

　　选择器是沟通html元素、css样式以及js事件的桥梁。

四、属性

　　1.字体

　　- font: font-style || font-variant || font-weight || font-size || line-height || font-family 设置字体是否倾斜、粗细、大小、行高和字体风格等。

　　- letter-spacing: 设置文字之间的间隔，该间隔数值作用到每个文字或英文字母(不包括最后一个)之后。

　　- word-spacing: 设置英文单词之间的间隔，该间隔数值作用到每个英文单词之后，对汉字无效。

　　2.文本

　　- color: 设置文本颜色

　　- line-height: 设置行高。行高=文字大小+上下间距，默认行高18px；行高作用：设置文字垂直居中；影响行高的因素：文字大小和文字字体可以改变行高。
　　- text-align: 设置文本相对于盒子的水平对齐方式: left | right | center | justify。

　　- text-decoration: 设置文本是否带有下划线、上划线、贯穿线。没有文本的对象此属性不会作用。

　　- text-indent: 设置文本缩进。根据direction确定缩进方向。

　　- text-overflow: 设置文本溢出时的省略标记。需要和white-space、overflow配合使用。

　　- white-space: 设置为本是否换行等。

　　- direction: 设置文本流向。默认从左到右，此时text-indent是左侧缩进；设置direction: rtl时，文本流从右向左，此时text-indent是右侧缩进。

　　练习:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            word-spacing: 2px;

            background-color: #1a5d7e;

            direction: rtl;

            text-indent: 50px;

            text-overflow: ellipsis;

            white-space: nowrap;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div><i>begin</i> this is some words.this is some words.this is some words.this is some words. <i>end</i></div>

</body>

</html>

　　3.背景

　　- background: backgroud-color || background-image || background-repeat || background-attachment || background-positon 设置背景颜色(或图片)、重复排列、位置等。

　　- background-image: url(相对路径|绝对路径|服务器接口url): 设置背景图片。

　　- background-attachment: scroll | fixed 设置背景图像随对象滚动或者固定。

　　- background-repeat: repeat | no-repeat | repeat-x | repeat-y 设置背景图像平铺方式

　　- background-position: 设置背景图片左上角相对于对象左上角的位置。需要先指定background-image属性。

　　练习: https://files.cnblogs.com/files/kuaizifeng/lol.zip

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

 *{margin:0;padding:0}

body{

    background:url(index-bg-v14.jpg) no-repeat top center;

    }

.box{

    width:1000px;

    height:464px;

    background:url(top.jpg) no-repeat;

    margin: 0 auto;

    }

</style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

　　4.边框

　　border: border-width || border-style || border-color 设置边框的宽度、线条样式和线条颜色

　　边框和内外补丁一样，有以下属性连写风格：

　　　　- 如果提供全部四个参数值，将按上－右－下－左的顺时针序作用于四个边框。

　　　　- 如果只提供一个，将用于全部的四条边。

　　　　- 如果提供两个，第一个用于上－下，第二个用于左－右。

　　　　- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

　　5.内外补丁

　　padding: auto | length 设置内补丁边距，相对border以里。

　　margin: auto | length 设置外补丁，相对border以外。

　　内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

　　6.列表

　　list-style: list-style-image || list-style-postion || list-style-type 设置列表的有关属性。

　　list-style-image: 设置li等对象的预设标记的背景图片。

　　list-style-type: 设置li等对象的预设标记符号，当list-style-image未设置时，该属性发生作用。

　　list-style-postion: 设置li等对象的预设标记位于文本之内或之外。

　　7.表格

　　border-collapse: separate | collapse 设置表格内单元格边框是否合并。

　　border-spacding: length || length 当border-collapse是separate时，设置行和单元格的边框在航线和纵向上的间距。

五、元素特性

　　html元素大致分为三类：

　　1.块元素：

　　包括: div, p,ul,ol,dl,li,dd,dt,h1...h6....

　　其特性为:

　　- 块元素独占一行显示，即块元素默认在尾部添加了换行符。

　　- 块元素默认宽度与父元素宽度一致，即块元素会继承父元素的宽度。

　　- 块元素可以设置宽度和高度，也可以不设置并由内容撑开。

　　2.行内(内联)元素

　　包括: span，a，font，trong，i，s....

　　其特性为:

　　- 行内元素在一行上排列显示。

　　- 行内元素不能设置宽度和高度，其宽度和高度只能由内容撑开。

　　3.行内块元素

　　包括: img, input ...

　　其特性为:

　　- 行内块元素在一行内排列显示。

　　- 行内块元素可以设置宽度和高度。

　　4.元素特征转换

　　行内元素需要整齐排列，就要求对其宽高可以主动设置。因此转换思路有两种：转换为行内块元素和脱标。

　　- 转换为行内块元素：display，可以设置宽高，不脱标，保证元素在行内的原有位置。

　　- 脱标: float，可以设置宽高，无法保证元素在行内的原有位置，并且会覆盖标准流中的元素。因此对行内元素要一起脱标(解决覆盖问题)，同时通过margin或padding来设置元素的位置(解决位置移动文职)。

　　- 脱标: position，可以设置宽高，但侧重于移动元素的位置，满足特定需求。

六、盒子模型

　　1.盒子大小

　　元素在浏览器中的大小由margin、border、padding、content四个部分构成。即:

　　对象的高度为: margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

　　对象的宽度为: margin-left + border-left + padding-left + width + paddding-right + border-right + margin-righ

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div{

            height: 250px;

            width: 250px;

            padding: 25px;

            border: 1px solid red;

            margin: 50px;

            text-align: center;

            line-height: 250px;

        }

    </style>

</head>

<body>

   <div>这是一段文字</div>

</body>

</html>

盒子模型

　　padding不能改变盒子的位置(大小)，但可以改变内容在盒子内部的位置；

　　margin不能改变内容在盒子内部的位置，但可以改变盒子的位置。border可以改变盒子的位置。

　　2.塌陷问题

　　- margin的垂直嵌套塌陷：父元素内部的子元素设置margin时，会造成子元素margin被“转移”到父元素上面。解决办法，设置border边界样式或者设置padding或者设置overflow: hidden。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div.outer{

            height: 250px;

            width: 250px;

            background-color: red;

            /*overflow: hidden;*/

            /*border: 1px solid;*/
　　　　　　　/*padding: 1px*/

        }

        div.inner{

            height: 50px;

            width: 50px;

            margin: 0 auto;

            margin-top: 100px;

            background-color: blue;

        }

    </style>

</head>

<body>

   <div class="outer">

       <div class="inner">

       </div>

   </div>

</body>

</html>

　　- margin的垂直并列塌陷：两个垂直并排的元素在交界处设置margin时，其垂直距离不是margin加和，而是以大的margin值为准。解决办法：在交界处只给一个元素设置margin。

　　3.盒子居中

　　标准流的盒子居中显示：margin: 0 auto;

　　绝对定位的盒子居中显示：left: 50%(父元素宽度一半)，且margin-left：-元素自己宽度一半。

七、浮动

　　float: none | left | right

　　1.特性

　　- 脱标: 元素浮动以后会完全脱离文档流，浮动的元素不占位置。

　　- 贴边: 浮动以后元素会一直向父元素的最上方移动，直到遇到父元素的边框或者其他的浮动元素，会停止移动并会产生贴边现象。

　　- 覆盖: 如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素，否则会覆盖。

　　- 排列: 浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐。

　　- 文字环绕：浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果。

　　2.浮动元素的特点

　　- 脱标。

　　- 不会独占一行，宽度和高度被内容撑开, 宽度和高度可以设置。

　　3.作用

　　- 网页布局规则排列多个相同大小的盒子，如导航栏等。　　

　　- 文字环绕早期用于制作文字环绕效果。

　　4.清除浮动

　　- 场景：当三个子元素都设置了宽和高以及float时，父元素不设置高度，会造成父元素下面的元素往上移动并被三个子元素覆盖。其实是子元素脱标，父元素没有设置宽高，造成了压盖现象。

　　- 解决办法：让父元素“占位”。使用clearfix伪元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        div.top, div.bottom{

            height: 100px;

            width: 500px;

            text-align: center;

            line-height: 100px;

        }

        div.top{

            background-color: yellow;

        }

        div.middle{

            width: 500px;

        }

        .middle div{

            float: left;

            height: 50px;

            width: 250px;

            line-height: 50px;

        }

        .middle .inner-one{

            background-color: red;

        }

        .middle .inner-two{

            background-color: blue;

        }

        div.bottom{

            background-color: green;

        }

        /*清除浮动*/

        .clearfix:before, .clearfix:after {

            content: "";

            height: 0;

            line-height: 0;

            display: block;

            clear: both;

            visibility: hidden;

        }

        .clearfix{

            zoom: 1;

        }

    </style>

</head>

<body>

    <div class="top">我是上面的盒子，我丝毫不受影响</div>

    <div class="middle clearfix">

        <div class="inner-one">我是中间的盒子</div>

        <div class="inner-two">我是中间的盒子</div>

    </div>

    <div class="bottom">我是底部的盒子，上面的div请占位</div>

</body>

</html>

清除浮动

　　5.overflow

　　overflow: visible | auto | hidden | scroll 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。body对象和textarea对象的默认值是auto。

　　6.clear

　　clear: none | left | right | both 设置元素的左边(右边)不允许有浮动对象。

　　7.display

　　display: block | none | inline | inline-table ... 设置元素的特性

八、定位

　　position: static | absolute | fixed | relative

　　- static: 静态定位不能移动元素的位置，静态定位的元素就是标准流元素的显示方式。

　　1.absolute 绝对定位

　　释义:

　　- 如果一个元素设置了绝对定位，如果该元素的父元素设置了静态定位或者没有定位，那么当前子元素是以body(浏览器)左上角为参照进行位置移动。

　　- 如果一个子元素设置了绝对定位，如果该子元素的父元素设置了除静态定位以外的其他定位，那么当前绝对定位的子元素会以父元素左上角为参照进行位置移动。

　　使用:

　　- 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。

　　- 否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

　　绝对定位元素的特点

　　- 脱标，不占位置

　　- 实现元素模式转换，并且可以设置元素的height、width、padding和border。但不可以设置margin。

　　- 具有层叠性。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。

　　总结：脱标看脸。

　　2.relative 相对定位

　　释义:

　　- 相对定位元素是以元素自身原来的位置为参照设置定位。

　　相对定位的特点:

　　- 相对定位的元素占位置，没有脱离文档流，不脱标。

　　- 不可层叠，但将依据 left，right，top， bottom 等属性在正常文档流中偏移位置。

　　总结：不脱标自恋。

　　3.fixed 固定定位

　　- 固定定位的元素脱标不占位。

　　- 固定定位的元素可以实现模式转换。

　　- 固定定位的元素始终是以body(浏览器)可视区域为参照设置定位。

　　- 设置left,right,top,bottom是指的可视区域。

　　总结：脱标死心眼。

　　4.z-index

　　只有（除静态定位）定位的元素有层级关系，通过z-index属性改变层级关系。

　　层级关系特点：

　　- 当给一个元素设置了定位，那么该元素默认的层级z-index值是auto(0)。

　　- 当z-index值相同的情况下，那么最后的定位元素层级要高于前面的定位元素。当z-index值不同的情况下，那么z-index值越大该元素的层级越高。

　　- 如果元素的父元设置了z-index值,那么父元素的z-index值越大，那么该元素的层级越高。

　　- 层级越高越优先显示，z-index值越高越优先显示。

　　5.使用

　　- 定位体现的是元素之间的层级位置关系，浮动体现的是元素之间的并排位置关系。

　　- 定位需要给父元素和子元素设置父相子绝，浮动需要注意父元素的清除浮动并且要给每一个子元素都设置浮动。

　　- 不规则布局的元素使用定位，规则排列的元素使用浮动。

九、一些注意

　　1.通用样式设置

/*摘自腾讯QQ*/

body, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, ol, ul, th, td, dl, dd{

    margin:;

    padding:;

}

body {

    font: 12px "宋体", "Arial Narrow", Helvetica;

    background: #FFFFFF;

    -webkit-text-size-adjust: 100%;

}

a {

    color: #2d374b;

    text-decoration: none;

}

a:hover{

    text-decoration: underline;

}

em{

    font-style: normal;

}

li{

    list-style: none;

}

img{

    border:;

    vertical-align: middle;

}

table{

    border-collapse: collapse;

    border-spacing:;

}

p{

    word-wrap: break-word;

}

　　2.网页布局

　　- 网页布局优先考虑标准流

　　- 然后考虑使用浮动

　　- 最后使用定位

　　- 元素模式转换必须使用display

　　3.小米商城和京东商城静态页面练习。

　　文件地址: https://files.cnblogs.com/files/kuaizifeng/xiaomi.zip；https://files.cnblogs.com/files/kuaizifeng/jd.zip。