第十一章前端开发-css

1.1.0 css介绍

css是指层叠样式表（Cascading Style Sheets），样式定义如何显示html元素，样式通常又会存在于样式表中。

css优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少代码量，增加网页浏览器速度，节省网路带宽
运用独立页面的css，有利于网页被搜索引擎收录

如何用？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可

这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

1.1.1 css语法

css语法分为2个部分：

1.选择器

2.声明

声明由属性和值组成，多个声明之间用分号分隔。

css注释：注释是代码之母

/*这是注释*/

1.1.2 css引入方式

1.1.2.1 内嵌样式

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<meta charset="utf-8">

	<style type="text/css">

		P{

			color: green;

			font-size: 15px;

		}

	</style>

</head>

<body>

	<p>这是一个p标签</p>

</body>

</html>

1.1.2.2 行内样式表

<!doctype html>

<html>

<head>

<meta charset="utf8">

</head>

<body>

<p style="color: blue;">这是一个p标签！</p>

</body>

</html>

1.1.2.3 外部样式表

链接式 link标签

#html文件

<!doctype html>

<html>

    <head>

        <meta charset="utf8">

        <link rel="stylesheet" href="index.css">

    </head>

    <body>

        <p>这是一个p标签！</p>

    </body>

</html>

#index.css文件

p {

  color: green;

}

导入式

了解即可。

index.css

@import url(other.css)

注意：

@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1

2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示

3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中

4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

1.1.2.4 三种引入方式的优先级

行内样式>内嵌式和外接式
内嵌和外接要看谁在后面，在后面的优先级高（代码从上到下执行，在后面的会把前面的覆盖）

1.1.3 css选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

1.1.3.1 基础选择器

1.id选择器：特定属性的元素（标签）

标识：#id名
特征：唯一的

2.类选择器

标识：.类名
特征:可以重复，归类，类也可以设置多个

<style>

	.box{

		width:200px;

		height:200px;

		background-color:yellow;

	}

	.active{

		border-radius: 200px;

	}

</style>

<div class='box active'></div>

<div class='box'></div>

<div class='box'></div>

3.标签选择器

与标签有关的

div{}

p{}

ul

ol

...

1.1.3.2 高级选择器

1.后代选择器：中间是空格

eg：div下所有的标签都会选中

div p{

	color: red;

}

2.子代选择器：中间是>号

只找到div标签下面最近的一代

dic>p{

	color:red;

}

3.组合选择器：中间用，连接

		p,span{

			color: green;

			font-size: 15px;

			padding: 0;

			margin: 0;

		}

4.交集选择器:选择器1选择器2{}

div.active{

    color: orange;

}

5.如何重置网页样式？

html,body,p,ul,ol{

    margin: 0;         /*去除外边距*/

    padding: 0;        /*去除内边距*/

}

/*通配符选择器*/

*{

    margin: 0;

    padding: 0;

}

a{

    text-decoration: none;      /*去除下划线*/

}

input,textarea{

    border: none;       /*去除默认边框*/

    outline: none;      /*去除外线*/

}

1.1.3.3 伪类选择器

1.对于a标签

如果想设置a标签的样式，要单独作用a标签
对于继承来说，a标签不起作用的

2.爱恨准则：LoVe HAte

L：link
V：visited
H：hover，还可以作用在其他标签上（悬浮时）
A：active

3.符号：使用一个冒号

/*LoVe HAte*/

/*a标签没有被访问时候设置的属性*/

a:link{

    /*color: red;*/

}

/*a标签被访问后设置的属性*/

a:visited{

    color:yellow;

}

/*a标签悬浮时设置的属性*/

a:hover{

    color: deeppink;

}

/*a标签被摁住的时候设置的属性*/

a:active{

    color: deepskyblue;

}

1.1.3.4 属性选择器

1.根据属性，选择符合条件的标签

2.示例：

/*设置所有文本输入框的属性*/

input[type='text']{

    background-color: red;

}

/*设置所有多选框的属性*/

input[type='checkbox']{

}

/*设置所有提交按钮的属性*/

input[type='submit']{

}

1.1.3.5 伪元素选择器

通过伪元素添加的内容为行内元素

符号：使用两个冒号

/*设置段落第一个字的属性*/

p::first-letter{

    color: red;

    font-size: 20px;

    font-weight: bold;

}

/*在段落开头添加内容*/

p::before{

    content:'@';

}

/*解决浮动布局常用的一种方法*/

/*在段落结尾添加内容*/（可用于清楚浮动带来的影响）

p::after{

    content:'$';

}

1.1.4 层叠性和继承性

1.继承性：在css有某些属性是可以继承下来

2.可以继承下来的属性：

font-xxx:字体相关的属性
text-xxx:文本相关的属性
color:颜色相关的属性
line-height:行高
letter-spacing:文字之间的距离
word-spacing:英文单词之间的距离

3.权重比较规则：

行列(行内式)：1000 > id:100 > 类class:10 > 标签1（元素）选择器
继承来的属性权重为0

4.总结：

前提是选中了标签，权重比较
- 数选择器：id 类标签，谁大它的优先级就大，
- 如果一样大，后面的回覆盖掉前面的属性
选中的标签的属性优先级远远大于继承来的属性，没有可比性
同时继承来的属性：
- 谁描述的近，谁的优先级越高
- 描述的一样近，这个时候才回归到数选择器的数量
！important:他设置当前的属性的权重无限大，但大不过行内样式的优先级

1.1.5 盒模型

1.任意一个元素都可以当作盒模型

2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border)

1.属性：

width:内容的宽度
height：内容的高度
padding：内边距，border到内容的距离
border：边框
margin：外边距

2.盒子模型示意图：

3.padding的设置方式：

1、写小属性,分别设置不同方向的padding

padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

2、写综合属性，用空格隔开

padding: 20px 30px 40px 50px ;/*上 右 下 左*/

padding: 20px 30px 40px;/*上 左右  下*/

padding: 20px 30px;/*上下 左右*/

padding: 20px;/*上下左右*/

4.一些标签默认有padding

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{

  padding:0;

  margin:0;

}

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

5.border边框三要素：粗细，线性样式，颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

border-width:粗细，设置方式同padding一样
border-style:线性样式
- solid：实线
- dotted：点线
- dashed:虚线
- donble：双线
border-color:颜色
- transparent：透明色
border-radius:设置圆角或圆、半圆（ border-radius:5px;）上下左右
border-top:上
border-bottom:下
border-left:左
border-right:右

使用border来制作小三角

/*小三角 箭头指向下方*/

        div{

            width: 0;

            height: 0;

            border-bottom: 20px solid red;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

        }

6.margin

margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/

margin: 20px;

/*表示盒子向下移动了30px*/

margin-top: 30px;

/*表示盒子向右移动了50px*/

margin-left: 50px;

margin-bottom: 100px;

外边距合并：

有称塌陷，以设置的最大margin距离为基准
margin在水平方向上不会出现外边距合并现象
margin子垂直方式上回出现外边距合并现象

1.1.6 常用格式化排版

1.1.6.1 字体属性

font-family：设置字体
```
body{

    font-family:'Microsoft Yahei','宋体','黑体';

}
```
如果设置成inherit，则表示继承父元素的字体。
font-size：设置字体大小
- 字体大小单位
  - px：绝对单位，也叫固定单位，不管在多少尺寸的屏幕下，始终是当前的尺寸
  - em：相对单位，相对于当前盒子的字体大小
  - rem：相对单位，相对于html的字体大小
font-size:设置字体样式
- normal：正常
- italic：斜体
- 如果设置成inherit，则表示继承父元素的字体。
font-weight:设置字体粗细 100-900

取值范围：

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

5.font-color:

设置内容的字体颜色。

支持三种颜色值：

十六进制值如: ＃FF0000
一个RGB值如: RGB(255,0,0) 红黄蓝三要素
颜色的名称如: red

p {

  color: red;

}

1.1.6.2 文本属性

text-align:设置文本水平排列方式 只是在行内元素生效
- left:水平靠左
- right：水平靠右
- center：居中
- justify：两端对齐，只限于英文
vartical-align:设置文本垂直排列方式 display设置table-cell
- top：垂直向上
- middle：垂直居中
- bottom：垂直向下
line-height 行高设置和height一样高，效果为水平垂直居中

text-decoration

文字装饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

text-indent：设置文本缩进
- 常用单位：em
- 根据字体的大小进行取值
- 首行缩进相当于设置字体大小的两倍
letter-spacing：设置文字间的距离

word-spacing：设置英文单词之间的距离

#box p:hover{

    /*文本修饰*/

    text-decoration: underline;

}

#box2{

    /*字体大小*/

    font-size: 20px;

    /*设置文本缩进*/

    text-indent: 2em;

    letter-spacing: 2px;

    word-spacing: 10px;

}

1.1.7 display属性

display：显示方式

none：盒子隐藏
block：转化为块
inline：转化为行内
inline-block：转化为行内块
table-cell：转化为表格

1.1.8 背景属性

常用背景相关属性：

属性	描述
background-color	规定要使用的背景颜色。
background-image	规定要使用的背景图像。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-position	规定背景图像的位置。
inherit	规定应该从父元素继承background属性的设置。

background-repeat取值范围：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承background-repeat属性的设置。

background-attachment取值范围：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承background-attachment属性的设置。

background-position取值范围：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果只设置了一个关键词，那么第二个值就是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果只设置了一个值，另一个值就是50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只设置了一个值，另一个值就是50%。可以混合使用`%`和`position`值。

示例：

body {

  background-color: red;

  backgraound-image: url(xx.png);

  background-size: 300px 300px;

  background-repeat: no-repeat;  /*不平铺*/

  background-position: center

  background-position-x:100px;

  background-position-y:100px;

  background-position: 100px 100px;   (x轴，y轴)   0 0 是左上角 ，可以在网页上进行调试，一般0 -100 用的多 裁剪照片（-100是从-100的位置开始裁剪设置的图片宽高）

}

简写：

body {

  background: red url(xx.png) no-repeat fixed center/300px 300px;

}

雪碧图技术（精灵图技术）

CSS雪碧即[CSS Sprite](https://baike.baidu.com/item/CSS Sprite)，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：

只有一张大的合并图，每个小图标节点如何显示单独的小图标呢？

其实就是截取大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用

2）拼图维护比较麻烦

3）使CSS的编写变得困难

4）CSS 雪碧调用的图片不能被打印

background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

案例：

<!DOCTYPE html>

<html>

<head>

	<title>淘宝列表导航案例</title>

	<style type="text/css">

		.taobao_list{

			border-top:1px solid #eee;

			float: left;

		}

		.taobao_list ul{

			width: 292px;

			overflow: hidden;

			padding:0;

			margin: 0;

		}

		.taobao_list ul li{

			list-style: none;

			width: 71px;

			height: 75px;

			border: 1px solid #eee;

			float: left;

			border-top-color: transparent;

			border-left-color: transparent;

		}

		.taobao_list ul li a {

			text-decoration: none;

			text-align: center;

			display: block;

			font-size: 12px;

			color: #888;

		}

		span{

			display: block;

			width: 24px;

			height: 24px;

			background:url(image/site.png) no-repeat 0 0 ;

			background-size: 24px 595px;

			margin-left: 22px;

			margin-top: 10px;

		}

		.span1{

			background-position: 0 0;

		}

		.span2{

			background-position: 0 -44px;

		}

		.span3{

			background-position: 0 -88px;

		}

		.span4{

			background-position: 0 -132px;

		}

		.span5{

			background-position: 0 -176px;

		}

	</style>

</head>

<body>

	<div class="taobao_list">

		<ul>

			<li>

				<a href="#">

					<span class="span1"></span>

					<p>充话费</p>

				</a>

			</li>

			<li>

				<a href="#">

					<span class="span2"></span>

					<p>旅行</p>

				</a>

			</li>

			<li>

				<a href="#">

					<span class="span3"></span>

					<p>车险</p>

				</a>

			</li>

			<li>

				<a href="#">

					<span class="span4"></span>

					<p>游戏</p>

				</a>

			</li>

			<li>

				<a href="#">

					<span class="span5"></span>

					<p>彩票</p>

				</a>

			</li>

		</ul>

	</div>

</body>

</html>

1.1.8 浮动

1.1.8.1 什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

1.1.8.2 什么是浮动？

浮动：在css样式表中，用float来表示
float属性：
- none：表示不浮动，默认不浮动
- left：左浮动
- right：右浮动
- inherit：继承父元素的浮动属性
浮动的作用：实现元素并排
浮动对盒子产生的现象：
- 文字环绕：设置浮动属性的初衷
- “脱标”现象：脱离标准文档流，不在页面上占位置
- “贴边”现象：给盒子设置了浮动，会找浮动盒子的边
  - 如果找不到浮动盒子的边，会贴到父元素的边
  - 如果找到了浮动盒子的边，就会贴到浮动盒子的边
- 收缩效果
浮动带来的问题：撑不起父盒子的高度

清楚浮动的方式：

给父盒子设置高度
clear:both
伪元素清除法
overflow：hidden

给父元素添加固定高度
- 存在的问题：不灵活，后期不易维护
- 应用：万年不变导航栏

内墙法：给最后一个浮动元素的后面添加一个空的块级标签(为的是不影响布局，所以为空)，并且设置该标签的属性为clear:both;（当前元素左右两边不允许有浮动元素）

存在的问题：冗余
clear：both

clear：意思就是清除的意思。

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

<style>

    *{

        padding: 0;

        margin: 0;

    }

    .father{

        width: 800px;

        margin: 100px auto;

        border: 1px solid #000;

    }

    .child1{

        /*width: 200px;*/

        height: 400px;

        background-color: red;

        float: left;

    }

    .child2{

        /*width: 300px;*/

        height: 200px;

        background-color: green;

        float: right;

    }

    .clear{

        clear: both;

    }

</style>

<!--内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both;-->

<div class="father">

    <div class="child1">mjj</div>

    <div class="child2">wusir</div>

    <div class="clear"></div>

</div>

伪元素清除法（推荐使用）

在内墙法的基础上做的优化，使用了伪元素选择器中的::after
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

<style>

    *{

        padding: 0;

        margin: 0;

    }

    .father{

        width: 800px;

        margin: 100px auto;

        border: 1px solid #000;

    }

    .child1{

        /*width: 200px;*/

        height: 400px;

        background-color: red;

        float: left;

    }

    .child2{

        /*width: 300px;*/

        height: 200px;

        background-color: green;

        float: right;

    }

    .clearfix::after{  /*新浪推荐写法*/

        content:'';

        display: block;  加入的这个元素是行内元素，转换为块级元素*/

        clear: both;

        /*visibility: hidden;   内容隐藏*/

        /*height: 0;*/

    }

</style>

<div class="father clearfix">

    <div class="child1">mjj</div>

    <div class="child2">wusir</div>

</div>

.clearfix:after{

    /*必须要写这三句话*/

    content: '.';

    clear: both;

    display: block;

}

overflow:hidden(常用)
- 因为overflow:hidden;会形成BFC区域，形成BFC区域后，内部有它的布局规则——计算BFC的高度时，浮动元素也参与计算
  - 使用过程中，注意overflow:hidden;本身的含义：超出部分内容隐藏
  - overflow的值及其含义：
    - visible：默认可见
    - hidden：超出部分内容隐藏
    - scroll：内容滚动
    - inherit：继承父类的overflow属性
    父元素里面设置overflow:hidden可以让父元素也参与计算，可以清除浮动带来的破坏性
```
<style>

    *{

        padding: 0;

        margin: 0;

    }

    .father{

        width: 800px;

        margin: 100px auto;

        border: 1px solid #000;

/*一旦设置一个Box盒子 除了overflow：visible；它会形成一个BFC,BFC它有布局规则： 它会让内部浮动元素计算高度*/

        overflow: hidden;

    }

    .child1{

        /*width: 200px;*/

        height: 400px;

        background-color: red;

        float: left;

    }

    .child2{

        /*width: 300px;*/

        height: 200px;

        background-color: green;

        /*float: right;*/

        /*overflow: hidden;*/

        float: left;

    }

</style>

<div class="father ">

    <div class="child1">mjj</div>

    <div class="child2">wusir</div>

</div>
```
11.2.6.2 BFC

参考 https://blog.csdn.net/riddle1981/article/details/52126522
1. BFC的定义
  - BFC(Block formatting context)，直译为”块级格式化上下文”
  - 它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
2. BFC的布局规则
  - 内部的Box会在垂直方向，一个接一个地放置，即块级标签，独占一行
  - Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，即外边距合并（塌陷）
  - 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，即贴边现象
  - BFC的区域不会与float元素重叠
  - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
  - 计算BFC的高度时，浮动元素也参与计算
3. 哪些元素会生成BFC？
  - 根元素
  - float属性不为none，即设置了浮动
  - position的值为 absolute（绝对定位）或 fixed（固定定位）
  - display的值为 inline-block，即设置为行内块
  - overflow不为visible，其他的均可，常用的是：overflow:hidden;

1.1.8.3 盒子居中：margin：0 auto;

<!DOCTYPE html>

<html>

<head>

	<title>

		盒子居中

	</title>

	<style type="text/css">

		.site-header{

			background-color: orange;

			width: 100%;

			height: 100px;

		}

		.in{

			background-color: red;

			width: 800px;

			height: 100px;

			margin: 0 auto;

			/*水平居中盒子*/

			text-align: center;

			/*水平居中文字*/

		}

	</style>

</head>

<body>

	<div class="site-header">

		<div class="in">

			水平居中文字

		</div>

	</div>

</body>

</html>

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

1.1.9 定位

1.1.9.0 几种定位方式

静态定位：position:static; 默认值
相对定位：position:relative;
- 特征：
  - 与标准流下的盒子没有任何区别
  - 留坑，会影响页面布局
- 设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
- 作用：做‘子绝父相“布局方案的参考
- 参考点：以原来的盒子的位置坐参考点进行移动

3.绝对定位：position:absolute;

特征：
- 脱标，不在页面上占位置
- 压盖现象
- 子绝父相：以最近的父元素的左上角为参考点进行定位
参考点：
- 如果单独设置一个盒子为绝对定位
  - 用top来描述，它的参考点是以body的0,0 为参考点
  - bottom，参考点是以游览器的左下角为参考点
- 以父辈盒子作为参考点
- 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
  
  2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
  
  3.不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点
  
  注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
  
  还要注意，绝对定位的盒子无视父辈的padding
  
  应用：

绝对定位的盒子居中

当做公式记下来吧！

*{

   padding: 0;

   margin: 0;

}

.box{

   width: 100%;

   height: 69px;

   background: #000;

}

.box .c{

   width: 960px;

   height: 69px;

   background-color: pink;

   *margin: 0 auto;*/

   position: relative;

   left: 50%;

    margin-left: -480px;

   /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/

 }

4.固定定位：position:fixed;

固定当前的元素不会随着页面滚动而滚动

特征：
- 脱标
- 固定不变
- 提高层级，遮盖现象
参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点

如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告

1.1.9.1 父相子绝：（重点）

子绝父相：以最近的父元素的左上角为参考点进行定位

示例：

<style>

    *{

        padding: 0;

        margin: 0;

    }

    body{

        color: #fff;

    }

    ul{

        list-style: none;

    }

    #box{

        width: 1226px;

        height: 100px;

        margin: 0 auto;

        background-color: #000;

    }

    #box ul{

        /*overflow: hidden;*/

        padding: 12px 0 0 30px;

        /*width: 500px;*/

        height: 88px;

        /*background-color: red;*/

    }

    #box ul li{

        float: left;

        width: 60px;

        height: 58px;

        /*padding-top: 30px;*/

    }

    #box ul li.active{

        width: 100px;

        height: 88px;

        background-color: green;

        position: relative;

    }

    #box ul li.active .box{

        position: absolute;

        width: 234px;

        height: 600px;

        background-color: rgba(0,0,0,.5);

        top: 88px;

        left: -30px;

    }

    .clearfix:after{

        content: '';

        clear: both;

        display: block;

    }

</style>

<div id="box">

    <ul class="clearfix">

    	<li class="active">

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

    	</li>

    	<li>2</li>

    	<li>3</li>

    	<li>4</li>

    	<li>5</li>

    	<li>6</li>

    </ul>

</div>

1.1.9.2 z-index

使用条件：只适用与定位的元素

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
通常布局我们使用父相子绝，比较的是父元素的z-index值，哪个父元素的z-index值高，表示子元素的层级越高

1.2.0 box-shadow 阴影

1.box-shadow:水平距离垂直距离模糊程度颜色（默认外设outset）

2.默认是外阴影，设置内阴影再在后面加inset

3.水平距离和垂直距离一般设置0

4.补充：transition:all .2s linear;表示设置动画（平滑移动)

<!DOCTYPE html>

<html>

<head>

	<title>边框阴影</title>

	<style type="text/css">

		body{

			padding:0;

			margin:0;

		}

		.shadow{

			position: relative;

			width: 200px;

			height: 200px;

			margin:50px auto;

			background-color: purple;

			/*box-shadow: 20px 20px 50px red inset;*/

		}

		.shadow:hover{

			/*position: absolute;*/

			top:-4px;

			box-shadow:0 0px 15px #e0e0e0;

	</style>

</head>

<body>

	<div class="shadow"></div>

</body>

</html>

1.2.1 单列和多列布局

<!DOCTYPE html>

<html>

<head>

	<title>单列布局</title>

	<style type="text/css">

		html,body{

			width: 100%;

			height: 100%;

			margin: 0;

			padding:0;

		}

		.header{

			width: 100%;

			height: 60px;

			line-height: 60px;

			text-align: center;

			background-color: black;

		}

		.container{

			width: 1200px;

			height: 100%;

			margin: 0 auto;

			background-color: green;

		}

		.header .container{

			height: 60px;

			background-color: orange;

		}

		.wrap{

			width: 100%;

			height: 100%;

		}

		.wrap .container{

			height: 100%;

			background-color: red;

		}

		.footer{

			width: 100%;

			height: 60px;

		}

		.footer .container{

			/*height: 200px;*/

			background-color: #e0e0e0;

		}

	</style>

</head>

<body>

	<div class="header">

		<div class="container">

			header

		</div>

	</div>

	<div class="wrap">

		<div class="container">

			11

		</div>

	</div>

	<div class="footer">

		<div class="container">

		</div>

	</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

	<title>多列布局</title>

	<style type="text/css">

		html,body{

			width: 100%;

			height: 100%;

			margin: 0;

			padding:0;

		}

		.header{

			width: 100%;

			height: 60px;

			line-height: 60px;

			text-align: center;

			background-color: black;

		}

		.container{

			width: 1200px;

			height: 100%;

			margin: 0 auto;

			background-color: green;

			overflow: hidden;

		}

		.header .container{

			height: 60px;

			background-color: orange;

		}

		.wrap{

			width: 100%;

			height: 100%;

		}

		.wrap .container{

			height: 100%;

			background-color: red;

		}

		.wrap .container .left{

			float: left;

			width: 200px;

			height: 100%;

			background-color: purple;

		}

		.wrap .container .right{

			float: right;

			width: 200px;

			height: 100%;

			background-color: #333;

		}

		.wrap .container .center{

			height: 100%;

			background-color: yellowgreen;

		}

		.footer{

			width: 100%;

			height: 60px;

		}

		.footer .container{

			/*height: 200px;*/

			background-color: #e0e0e0;

		}

	</style>

</head>

<body>

	<div class="header">

		<div class="container">

			header

		</div>

	</div>

	<div class="wrap">

		<div class="container">

			<div class="left">left</div>

			<div class="right">right</div>

			<div class="center">center</div>

		</div>

	</div>

	<div class="footer">

		<div class="container">

		</div>

	</div>

</body>

</html>

1.2.2 DIV+CSS规范命名大全集合

http://www.divcss5.com/jiqiao/j4.shtml

1.2.3 行内元素水平垂直居中

text-align：center 水平居中

vertical-align：middle 垂直居中

1.2.4 块级元素水平垂直居中

1.position+margin：

<!DOCTYPE html>

<html>

<head>

	<title>

		块级元素水平居中1

	</title>

	<style type="text/css">

		.box{

			width: 200px;

			height: 200px;

			background-color: red;

			position: relative;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: green;

			position: absolute;

			margin: auto;

			left: 0;

			right: 0;

			top: 0;

			bottom: 0;

		}

	</style>

</head>

<body>

	<div class="box">

		<div class="child">

		</div>

	</div>

</body>

</html>

2.display: table-cell; 将块级元素转为单元格形式，同事设置水平，垂直居中

<!DOCTYPE html>

<html>

<head>

	<title>

		块级元素水平居中2

	</title>

	<style type="text/css">

		.box{

			width: 200px;

			height: 200px;

			background-color: red;

			display: table-cell;

			vertical-align: middle;

			text-align: center;

			line-height: 100px;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: green;

			display: inline-block;

		}

	</style>

</head>

<body>

	<div class="box">

		<div class="child">

			aa

		</div>

	</div>

</body>

</html>

3.纯定位计算 positon

<!DOCTYPE html>

<html>

<head>

	<title>

		块级元素水平居中3

	</title>

	<style type="text/css">

		.box{

			width: 200px;

			height: 200px;

			background-color: red;

			position: relative;

			vertical-align: middle;

			text-align: center;

			line-height: 100px;

		}

		.child{

			width: 100px;

			height: 100px;

			position: absolute;

			background-color: green;

			top: 50%;

			left: 50%;

			margin-left: -50px;

			margin-top: -50px;

		}

	</style>

</head>

<body>

	<div class="box">

		<div class="child">

			aa

		</div>

	</div>

</body>

</html>

补充：text-align起作用的元素

text-align不是只对文字和图片起作用，比较准确的说法是：text-align对文字，inline元素（行内元素）以及inline-block元素（行内块元素）起作用，但对块元素不起作用。