认识css

现在的互联网前端分为三层：

HTML:超文本标记语言。从语义的角度描述页面结构
CSS:层叠样式表。从审美的角度负责页面样式
JS:Javascript。从交互的角度描述页面的行为

css它是一个很神奇的东西，设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观。

css简介

CSS全称为“层叠样式表”(Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小、颜色、字体加粗等等。

例:

css语法

选择符声明(属性:值)

选择符:我们又称为选择器，指明网页中应用样式规则的元素，如p)的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。
声明：在英文大括号”{}”中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;

css注释

用`/*注释语句*/`来表明(html中使用`<!--注释语句-->`)

css基础

css引入的三种方式

内联式
嵌入式
外部式

内嵌式

css样式表把css代码直接写在现有的HTML标签中。

例:

<p style='color:red;'>文字颜色为红色</p>

把对应的style属性，写在p标签的开始标签中。css样式代码要写在style=“”双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。

例:

<p style='color:red;font-size:12px;'>文字颜色为红色,字体大小为12像素</p>

嵌入式

嵌入式css样式，就是可以把css样式代码写在style标签之间。

例:

<style type='text/css'>
    p{
       font-size:18px;
    }
</style>

嵌入式的css样式必须写在style标签之间，并且一般情况下嵌入式css样式写在head标签之间。

外部式

外部式css样式(也可称为外链式)就是把css代码写一个单独的外部文件中，这个css样式文件以”.css”为扩展名，在head标签内（不是在style标签内）使用link标签将css样式文件链接到HTML文件内。

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

三种方法的优先级

内联式>嵌入式>外部式

就近原则

离被设置元素越近优先级别越高

css选择器

什么是选择器

每一条css样式声明由两部分组成。

选择器{
    样式;
}

在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。

基础选择器

标签选择器

标签选择器顾名思义就是html代码中的标签。我们之前学习的html、body、h系列的标签、p、div、img等等我们都可以使用标签选择器来设置对应的css样式属性。

它可以选中页面中所有的元素，而不是某一个元素内容，所以选中的是页面中共有的属性

假如我们想要为页面中所有的段落设置字号为12ps,字体颜色为红色,字体粗细为更粗。

语法:

标签名{
    属性:值;
}

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p{
            color: red;
            font-size: 12px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>最后，那些鸭蛋一个接着一个地崩开了。噼！噼！蛋壳响起来。</p>
    <p>这个世界真够大！这些年轻的小家伙说。</p>
    <p>这个蛋费的时间真久！坐着的母鸭说。</p>
</body>
</html>

ID选择器

ID好比是每个人的身份证号一样，每个人都有身份证，并且身份证号是不一样的。在网页中所有的标签都可以设置id，并且id不能重复。

语法:

#ID选择器名称{
    属性:值;
}

以#开头
ID选择器名称可以任意起名(最好不要起中文)
ID的名称必须是唯一的

类选择器

类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，用空格隔开。

语法:

.类选择器名称{
    属性:值;
}

以英文圆点开头
类选择器名称可以任意起名(最好不要起中文)

既然类可以重复添加，并且同一个标签可以添加多个类，那么我们在使用类选择器的使用一定要有公共类的概念。

类和ID选择器的区别

相同点：可以应用于任何元素

不同点：ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。

高级选择器

后代选择器

顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。

语法:

div p{
    属性:值;
}

使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。

子代选择器

子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。

语法:

div>p{
    属性:值;
}

我们来对比一下后代选择器和子代选择器分别在网页中的作用。有一个三级菜单，分别对二级菜单的列表的内容文本设置为绿色。

例:

<div class="menu">
    <ul class="food">
      <li>
        水果
        <ul>
          <li>桃子
            <ul>
              <li>油桃</li>
              <li>蟠桃</li>
              <li>黄桃</li>
            </ul>
          </li>
          <li>苹果
            <ul>
              <li>红富士</li>
              <li>冰糖心</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        蔬菜
        <ul>
          <li>白菜
            <ul>
              <li>娃娃菜</li>
              <li>大白菜</li>
              <li>小白菜</li>
            </ul>
          </li>
          <li>绿叶菜
            <ul>
              <li>菠菜</li>
              <li>小青菜</li>
              <li>油麦菜</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

代码:

.food>li>ul>li{
    color:red;
}

如果使用后代选择器，或许有的人说可以这样写，为了省事，直接ul li{color:green;}那么，我们会发现所有的列表都变成了绿色，不满足需求，因为ul的后代元素li,既选中了一级菜单的列表，又选中了二级菜单的列表,也选中了三级菜单。

通用选择器

语法:

*{
    属性:值;
}

通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。通常用来在制作网页时清除所有的默认样式。

组合选择器

当你想在html中为多个标签元素设置同一个样式时，我们可能会想到添加相同的类，但是如果网页中的这样的标签非常多呢？是不是添加相同的类名，又成了我们累加的工作。不易于效率开发。那么我们可以使用组合选择器来选择。

语法:

p,h1,span,a{
    属性:值;
}

伪类选择器

伪类选择器可以html中一个标签元素的鼠标滑过的状态来设置样式

语法:

标签名:hover{
    属性:值;
}

a标签不仅仅是应用在hover，鼠标悬浮上，它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“

设置a标签的样式:

/*没有被访问过a标签的样式*/
a:link {
    color: green;
}
/*访问过后a标签的样式*/
a:visited {
    color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
    color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
    color: blue;
}

注意：在页面中使用a的时候，一定按照顺序Link->visited->hover>active。

对于hover来说，不仅仅可以应用在a上，也可以应用在其他标签，比如div,p,li等等

css继承、层叠以及特殊性

继承性

在css中某些样式是具有继承性的，那么什么是继承呢？官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>继承</title>
  <style type="text/css">
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    欢迎<span>来到</span>卢本伟广场<span>开始</span>大杀特杀吧！
  </div>
</body>
</html>

那么该颜色不仅仅应用在了div标签，还应用与div标签中的所有子元素(包括div中的文本和span包含的文本)文本。

注意:某些属性是可以继承下来的,比如常见的color、font系列的、text-*系列的等等。

但有些属性是不可以继承下来的，比如border:1px solid green;

给div设置border:1px solid green;之后发现，div有条实心边框线，但是子元素span包含的文本根本就没起到作用。

特殊性

在之前我们学习了那么多选择器,如果我对同一个元素设置了不同的css样式代码之后,那么元素会启用那个css样式呢?

例:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
      }
      #wrap{
        color:green;
      }
      .box{
        color:yellow;
      }
    </style>
  </head>
  <body>
    <p class='box' id="wrap">
      猜猜我是什么颜色
    </p>
  </body>
</html>

结果就不展示了，答案为绿色，这是因为什么呢？因为浏览器是根据权值来判断使用哪种css样式的，权值高的它的优先级会越高，就会呈现那种css样式。

css权值的规则:

内联式的权重为1000
id选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重计算永不进位

有一个这样的结构:

<div class='wrap1' id='box1'>
    <div class="wrap2" id="box2">
        <p class='active'>MJJ</p>
    </div>
</div>

举几个例子看看他们的权重:

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/

由此可以看出，其实对于权值的计算来说，首先它是不进位的，对于使用的选择器我们无非就是在数数，数选择器的数量(按照顺序来，先是id再是class，再是元素)，比如：

/*权值为 1  1  1*/
#box1 .wrap2 div{
    color:red;
}

注意：继承来的属性也有权值，不过它的权值非常低，有的文档提出它只有0.1,所以可以理解为继承的权值最低。

!important

我们在做网页代码时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。

例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>!important</title>
  <style type="text/css">
    div{
      color:green !important;
    }
  </style>
</head>
<body>
  <div id="box" style="color:red;">
    <span>GGG</span>
  </div>
</body>
</html>

注意：！important要写在分号的前面

使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签，那么拥有最大优先级的将会被采用。

css常用格式化排版

字体属性

字体

在日常工作中，我们会用到word来编写内容，比如可以对我们需要设置的内容设置字体、字号、颜色等设置。

那么我们在网页中使用css样式时，同样也能做相关的设置。

举个栗子，为网页中的文字设置字体为微软雅黑。

body{
    font-family:'微软雅黑'
}

因为这种字体既美观又可以在客户端完全的显示出来(用户本地一般都是默认安装的)

备选字体

备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。

语法：

body{font-family:'微软雅黑','宋体','黑体'}

备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。

字体颜色

颜色分为三原色：红、绿、蓝，如图所示，三原色进行混合能呈现出不同的颜色

颜色表示方法在css中有三种方式：

英文单词表示法，比如red、green、blue
rgb表示法
十六进制表示法

对于rgb表示法和十六进制表示法，我们可以通过编辑器中辅助工具（颜色取色器）来取到对应的颜色。这里就不一一赘述了。

字体样式

网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。

属性值	描述
normal	默认的，文本设置为普通字体
italic	如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。常用
oblique	将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。

字体粗细

网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。

属性值	描述
normal	普通的字体粗细，默认
bold	加粗的字体粗细
lighter	比普通字体更细的字体
bolder	比bold更粗的字体
100~900	400表示normal

文本属性

文本修饰

在网页中有些时候我们需要对文本设置下划线，或者删除线。

如果想实现下划线或者删除线，使用text-decoration属性。

属性值	描述
none	无文本的修饰
underline	文本下划线
overline	文本上划线
line-through	穿过文本的线，~~可以模拟删除线~~。

文本缩进

比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。

例:

<p>让我瞧瞧这个老是不裂开的蛋吧，这位年老的客人说，请相信我，这是一只吐绶鸡的蛋。有一次我也同样受过骗，你知道，那些小家伙不知道给了我多少麻烦和苦恼，因为他们都不敢下水。我简直没有办法叫他们在水里试一试。我说好说歹，一点用也没有！让我来瞧瞧这只蛋吧。哎呀！这是一只吐绶鸡的蛋！让他躺着吧，你尽管叫别的孩子去游泳好了。</p>

我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style type="text/css">
        p{
            text-indent: 32px;
        }
    </style>
</head>
<body>
    <p>在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！</p>
</body>
</html>

那么问题来了，如果我更改了p标签的字体大小呢？比如，

p{
    text-indent: 32px;
    font-size:20px;
}

必须再重新的计算text-indent的值来合适。那么这样的话，使得让我们的开发效率降低，后期不宜维护。如何解决这一问题呢？

我们可以设置另一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置。

如果p标签的字体是16px,那么1em=16px。如果我后期设置了字体大小为20px,那么2em就自动变为40px。

正确设置方式：

p{
    text-indent:2em;
    font-size:30px;
}

行间距

行间距，也叫行高，表示行与行之间的距离。

上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。

代码:

p{    
    font-size: 20px;
    text-indent: 2em;
    line-height:2em;
}

line-height:2em;表示2倍行间距。

中文字间距、字母间距

我们在使用word文档时，通常会对文字之间的间隔进行设置。

如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。

代码：

p{
    /*文字之间的距离*/
    letter-spacing:5px; 
    /*调整英文单词之间的距离*/
    word-spacing: 10px;
}

文本对齐

在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。

属性值	描述
left	文本左对齐，默认
right	文本右对齐
center	中心对齐

css盒模型

元素分类

在说css盒模型和布局之前，我们需要提前知道一些知识，为了后续的知识点做储备。在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素。

html标签甚至有好几百个，我们之前学习大约有30个标签，你所看到的很多大型网站我们都能通过这些标签来搭建我们网站结构。那么这么多标签，显然是比较没有规律的，那么这节课我们就来对这些常用的标签进行分类。了解了每类标签的特点之后，我们才能更好的对网站进行布局。

常用的块状元素有

<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>

常用的行内元素有

<a>、<span>、<i>、<em>、<strong>、<label>

常见的行内块状元素有

<input>、<img>

那么把网页中常用的标签进行分类之后，那么这三类标签分别有什么特点呢？

标签类别	特点
块状元素	1.独自占据整一行 2.可以设置宽高
内联元素	1.所有的内联元素在一行内显示 2.不可以设置宽高
行内块元素	1.在一行内显示 2.可以设置宽高

注意:标签分类的特点是对现有的HTML常用标签进行分类，那么这些特点在后面的学习过程中我们还可以通过display属性进行强制修改规则。

盒模型介绍

所谓盒子模型，在css中，”css model“这一术语是用来设计和布局时使用。那么所有的HTML元素可以看作盒子。css的盒模型本质上是一个盒子，来表示周围的HTML元素，它包括：边距、边框、填充和实际内容。

内容div

实际内容可以看作是文本、图片或者是另一个标签元素，它应该有宽度和高度。

内边距(内填充)padding

边框内侧到内容的距离是内边距。

外边距margin

一个盒子到另一个盒子的距离是外边距。

边框border

包裹整个盒子的框就是边框。

盒模型示意图:

盒模型的常用属性

内容的宽高、内边距、外边距、边框。

内容的宽高

需要注意的是，盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的，css定义的宽(width)和高(height),指的是盒子内部物体所占据的宽高，在css中指的是填充以里的内容范围。

举例说明：我想有一个200px*200px范围的div盒子，背景颜色是红色的。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容的宽高</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

内边距

内边距表示的是盒子的边框到内容之间的距离。

代码:

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 20px;
}

明显发现盒子的整体宽度变大了，也就是说设置了padding之后，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。

padding的设置

padding有四个方向，分别描述四个方向的padding。

单个属性分别设置不同方向的padding

padding-top:10px; 上
padding-right:3px;  右
padding-bottom:50px;  下
padding-left:70px;  左

综合属性，多个属性用空格隔开

/*上 右 下 左 四个方向*/
padding: 20px 30px 40px 50px ;
/*上 左右  下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;

边框

盒子模型的边框，在样式表中称为border。我们知道呢，我们用的手机，都会有手机壳。手机壳的样式、颜色、薄厚程度等都是这个壳的形态。同样呢，盒模型的边框也有三要素：粗细线性样式颜色。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border的使用</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            /*1像素实线且红色的边框*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

按照三要素写的border

border-width:3px;
border-style:solid;
border-color:red;
/*上面三句代码相当于一句代码：border:3px solid red;*/
/*同样,也可以分别设置边框四个方向的粗细 线性样式 颜色,跟padding的四个方向一样。*/
/*上下5px  左右10px*/
border-width:5px 10px;
/*上：实现  右：点状  下：双线 左：虚线*/
border-style: solid dotted double dashed;
/*上：红色 左右：绿色 下：黄色*/
border-color: red green yellow;

按照方向划分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

上面12条语句，相当于 bordr: 10px solid red;

另外还可以简写方式：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

清除默认边框

清除某些标签默认的边框，我们使用border:none;或者border:0;

比如，input输入框它有默认的边框，如果我们想制作好看的输入框的话，首先先得把默认的清除掉，然后我们再按照需求来更改，并且我们会发现焦点选中输入框的时候有一条蓝色的外线。那么我们也需要将它清除 ,使用属性outline:none;。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border默认清除</title>
    <style type="text/css">
        input{
            border: none;
            outline: none;
            border:1px solid red;        
        }
    </style>
</head>
<body>
    <input type="text" name="">
</body>
</html>

外边距

在盒子模型中称为外边距，样式表中叫margin。表示盒子到另一个盒子的距离。既然是两者之间的距离，那么就会产生水平之间的距离和垂直之间的距离。同样情况下，外边距也有四个方向，跟padding类似。

水平方向的外边距

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平方向外边距</title>
    <style type="text/css">
        .box_l{
            background-color: green;
            margin-right: 20px;
        }
        .box_r{
            background-color: red;
            margin-left: 30px;
        }
    </style>
</head>
<body>
    <span class="box_l">左盒子</span><span class="box_r">右盒子</span>
</body>
</html>

垂直方向外边距

盒模型的外边距水平方向上不会出现问题，在垂直方向上会出现“外边距合并”的现象。

看个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直方向上外边距合并</title>
    <style type="text/css">
         .father{
                width: 400px;
                border: 1px solid gray;
            }
            .box1{
                width: 300px;
                height: 200px;
                background-color: red;
            }
            .box2{
                width: 400px;
                height: 300px;
                background-color: green;
            }
    </style>
</head>
<body>
    <div class="father">
        <div class="box1"></div>        
        <div class="box2"></div>
    </div>
</body>
</html>

效果:

如果给红色的盒子设置margin-bottom:30px;

效果：

如果给绿色的盒子设置margin-top:50px;

效果：

这就属于，外边距合并现象。

什么是外边距合并呢？在有些文献中说这种现象叫塌陷问题。只有在垂直方向上，当两个同级的盒子，在垂直方向上设置了margin之后，那么以较大者为准。

在网页排版中，外边距合并的问题也会时常出现，我们如何避免出现这种问题呢？

很简单，我们如果想让上下的两个盒子中间有间距，只需要设置一个盒子的一个方向即可。没必要去碰触外边距塌陷的问题，还得找解决问题的方法，得不偿失。

css布局

浮动

浮动介绍

浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。

如果想实现网页中排版布局，比如一行内显示对应的标签元素，可以使用浮动属性。浮动可以实现元素并排。

浮动属性

浮动：css样式表中用float来表示，它有

属性值	描述
none	表示不浮动，所有之前讲解的HTML标签默认不浮动
left	左浮动
right	右浮动
inherit	继承父元素的浮动属性

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动属性用法</title>
    <style type="text/css">
        .left{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            /*左浮动*/
             float:left;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: green;
            color: #fff;
            /*右浮动*/
             float:right;
        }
    </style>
</head>
<body>
    <div class="left">左边盒子</div>
    <div class="right">右边盒子</div>
</body>
</html>

效果图:

浮动的现象

我们之前说浮动的设计初衷是为了做”文字环绕效果“。那么我们就来看一下如果对盒子设置了浮动，会产生什么现象？

浮动的元素脱离了标准文档流，即脱标
浮动的元素互相贴靠
浮动的元素会产生”字围“效果
浮动元素有收缩效果

标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往后，从上往下的流式排列方式。

即不对页面进行任何布局控制时，浏览器默认的HTML布局方式，这种布局方式从左往右，从上往下，有点像流水的效果，我们称为流式布局。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脱标</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            color: #fff;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: green;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box1">红盒子</div>
    <div class="box2">绿盒子</div>
</body>
</html>

效果图:

会发现红色盒子压盖住了绿色的盒子，为什么会出现这种现象呢？

因为：在标准文档流下，红盒子和绿盒子两个盒子是上下排版，如果对红盒子设置了浮动，那么盒子会脱离了标准文档流，它就不会按照默认的流式排版布局，可以认为这个红盒子浮起来了，不受标准文档流排版布局的约束。那么此时浏览器认为绿盒子是标准文档流下的第一个盒子。所以绿盒子就渲染到了页面中的第一个位置上。

浮动元素贴靠

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动元素贴靠</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

效果图:

总结：当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素

浮动的破坏性

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动元素的破坏性</title>
    <style type="text/css">
        .father{
            border: 1px solid red;
        }
        .child{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">儿子</div>
    </div>
</body>
</html>

效果图:

由此可见，浮动之后，蓝色的盒子因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱。我们一定要去解决这种父盒子高度塌陷的问题。

总结：浮动能网页实现排版布局，但是同样也会给网页带来一定的问题(父盒子高度塌陷)，只要我们解决了浮动给网页带来的问题，就能对网页进行高效的排版布局。

清除浮动的方式

我们知道浮动具有破坏性，它能使父盒子高度塌陷、导致页面紊乱。那么在css布局中对于浮动的解决方案有四种：

父盒子设置固定高度
内墙法
伪元素清除法
overflow:hidden

父盒子设置固定高度

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动元素的破坏性</title>
    <style type="text/css">
        .father{
            /*父盒子设置了固定高度*/
            height: 200px;
            border: 1px solid red;
        }
        .child{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">儿子</div>
    </div>
</body>
</html>

虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。

应用：网页中盒子固定高度区域，比如固定的导航栏。
缺点：使用不灵活，后期不易维护

内墙法

所谓内墙法,有一个规则:在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。

clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动元素的破坏性</title>
    <style type="text/css">
        .father{
            border: 1px solid red;
        }
        .child{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">儿子</div>
        <div class="clearfix"></div>
    </div>
</body>
</html>

应用：网页中应用不多，讲解这个，只是为了引导下一个清除浮动的方式，那才是我们重点要掌握的。

缺点：结构冗余

伪元素清除法

在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。那么正好在css3的属性用法中整好有个选择器也完全符合这个用法,伪元素选择器。

伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，他们允许您为元素的某些部分设置样式。

语法:

p::after{
    /*p::after{}一定要有content。表示在p元素内部的最后面的添加内容*/
    content:'...'
}

表示在p标签元素的最后面添加样式。咦….，在….的z后面添加样式，这不正好符合了我们的内墙法的用法么。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动元素的破坏性</title>
    <style type="text/css">
        .father{
            border: 1px solid red;
        }
        .child{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .cleafix:after{
            content:'.';
            display: block;
            clear: both;
            overflow: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="child">儿子</div>
    </div>
</body>
</html>

分别对编写的伪元素清除法一一解释：

.clearfix:after{
    content:'.';
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
}

content:'.';表示给.clearfix元素内部最后添加一个内容，该内容为行内元素。
display:block;设置该元素为块级元素，符合内墙法的需求。
clear:both；清除浮动的方法。必须要写
overflow:hidden;height:0;如果用display:none;,那么就不能满足该元素是块级元素了。overflow:hidden;表示隐藏元素，与display:none;不同的是，前者隐藏元素，该元素占位置，而后者不占位置。

overflow:hidden

CSS属性overflow定义一个元素的内容太大而无法适应盒子的时候该做什么。它是overflow-x和overflow-y的简写属性

属性值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容不可见
scroll	内容会被修剪，浏览器会显示滚动条以便查看其余内容
auto	由浏览器定夺，如果内容被修剪，就会显示滚动条
inherit	规定从父元素继承overflow属性的值

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow属性的用法</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="box">
        小学生优秀作文《当领导的好处》
        爸爸当上领导后，从来不敢多说话，生怕给别人带来压力。
        上个月，下属小李叔叔到我家来玩，爸爸随口说了句：“家里没空调，比较热，见笑了。”
        第二天，小李叔叔就带着师傅给我家安装了5匹的大空调！说什么也不肯收钱。
        上个星期，爸爸看到老张伯伯在办公室吃午饭，菜中有煎鱼，随口说了句：“哎呦，真香！”
        当天晚上，老张伯伯给我家送了一箱鲜鱼来。
        有一天晚上，我跟爸爸遛弯儿，路上碰到单位的小王叔叔和他媳妇逛街，爸爸随口称赞道：“哎呦，小王，你媳妇真漂亮！”
        第二天晚上，妈妈不在家，突然听到有人敲门。打开门一看，小王叔叔的媳妇站在门口，见到爸爸就满脸微笑说：“领导，我们家小王说嫂子不在家，让我来陪陪你！”
        当领导真好，怪不得这么多人喜欢当领导！
    </div>
</body>
</html>

效果:

滚动效果

设置overflow:scroll;。

效果：

overflow属性不仅仅有以上效果，那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文。BFC只是一个规则。它对浮动定位都很重要。浮动定位和清除浮动只会应用于同一个BFC的元素。

浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

总结：只要我们让父盒子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动元素的破坏性</title>
    <style type="text/css">
        .father{
            overflow: hidden;
            border: 1px solid red;
        }
        .child{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child">儿子</div>
    </div>
</body>
</html>

深入理解BFC

了解BFC前先一了解一下Box和Formatting Context

（1）B: BOX即盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOX

（2）FC: Formatting Context是W3C的规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的 Formatting Context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)

BFC定义

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float 元素重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

哪些元素会生成BFC

根元素
float属性部位none
position为absolute或fuxed
display为inline-block
overflow不为visible

定位

定位是一个相当复杂的话题，在去深入理解定位之前，我们先来聊一下之前我们的标准文档流下的布局。

首先，

盒模型，元素的内容宽高、padding、border以及margin
元素的分类：块级元素、行内元素、行内块元素之间的区别。
盒模型的margin，垂直方向上会出现外边距合并的问题

定位的整个想法是允许我们覆盖上述描述的基本标准文档流的行为，以产生有趣的效果。

有个设想。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流的位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？（网页中的小广告，就是靠这个完成的）定位使这种布局工作成为可能。

有许多不同类型的定位，你可以对HTML元素产生效果，要想使某个元素上进行定位，我们使用position属性。

css position属性用于指定一个元素在文档中的定位方式。top，right，bottom，left属性则决定了该元素的最终位置。

属性值	描述
static	默认。静态定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 `top`, `right`, `bottom`, `left` 和 `z-index`属性无效。
relative	相对定位。元素先放置在未添加定位时的位置，在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）
absolute	绝对定位。不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并
fixed	固定定位。不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变

静态定位

静态定位意味着“元素默认显示文档流的位置”。没有任何变化。

相对定位

相对定位的元素是在文档中的正常位置的偏移，但是不会影响其他元素的偏移。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 300px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            position: relative;
            top: 30px;
            left: 40px;
            background-color: green;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
</body>
</html>

效果:

咦，很酷是嘛？好吧这个结果可能不是你所期待的———为什么它移动到底部和右边呢，我们不是指定顶部和左边么？听起来不合逻辑，但这只是相对定位工作的方式———你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它相反的方向。所以，如果您制定了top:30px;一个里推动框的顶部，使它向下移动30px。

其实说白了，我们得找一个参考的位置，然后进行定位，那么相对定位是以自身原来的位置进行定位的。

总结：

参考点

以自身原来的位置进行定位，可以使用top,left,right,bottom对元素进行偏移

现象

不脱离标准文档流，单独设置盒子相对定位之后，如果不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。
有压盖现象。用top,left,right,bottom对元素进行偏移之后，明显定位的元素的层级高于没有定位的元素

应用

相对定位的盒子，一般用于子绝父相布局模式的参考。

绝对定位

相对定位的元素并没有脱离标准文档流，而绝对定位的元素则脱离了文档流。在标准文档流中，如果一个盒子设置了绝对定位，那么该元素不占据空间。并且绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于根元素页面的左上角进行定位。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 300px;
            border: 3px solid #ff6700;
        }
        .box1{
            position: absolute;
            left: 50px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</body>
</html>

效果:

绝对定位元素相对于最近的非static祖先元素定位。

绝对定位的盒子是以最近的非static定位的父元素进行定位，为了演示此效果。特意将网页结构层次增多，并且区分跟body页面左上角的位置，将紫色边框的父元素进行了位置调整，并且将.father和.grandfather元素同时设置了相对定位。来完成此效果。

总结：

参考点

相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位。

现象

脱离了标准文档流，不在页面中占位置
层级提高，做网页压盖效果

应用

网页中常见的布局方案：子绝父相。

注意：子绝父绝，子绝父固，都是以最近的非static父辈元素作为参考点。父绝子绝，子绝父固，没有实战意义，布局网站的时候不会出现父绝子绝。

因为绝对定位脱离标准流，影响页面的布局。

相反父相子绝在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

固定定位

它跟绝对定位基本相似，只有一个主要区别：绝对定位固定元素是相对于html根元素或其最近的定位祖先元素，而固定定位固定元素则是相对于浏览器视口本身。这意味着你可以创建固定的有用的网页效果，比如固定导航栏、回到顶部按钮，小广告等。

例:

html:

<div class="outer">
    <p>
        某女买了一件1000块的衣服。我质疑有点贵。
        她说：“贵？我跟你说，这件衣服原价2000块，打了五折之后便宜一半，就等于我赚了1000块！虽然我花出去1000块，但同时我又赚回来了1000块，所以这件衣服相当于是白送，免费。你懂个屁！ ”
        我被她的经济数学头脑震惊得久久说不出话来……
    </p>
    <p>
        国家全面放开生育二胎的政策春风送暖，某机关一张姓女公务员前些天终于怀上二胎了，又一次升级为准妈妈。
        老公让她赶紧跟领导说一下，争取减点工作量，好好保胎。
        午饭时，她在食堂恰好碰见领导，难掩一脸的兴奋汇报：“头儿，我刚怀上小二了”！
        周围突然安静下来了。领导楞了半天回过神来，憋出了一句：“你老公知道了吗？”
        她脑抽地答了一句：“是他让我找你的”……
        食堂里瞬间鸦雀无声！
        此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！此处省略5000字！！
    </p>
    <div class="box" id="one">One</div>
</div>

css

.box {
    background: red;
    width: 100px;
    height: 100px;
    margin: 20px;
    color: white;
}
#one {
    position: fixed;
    top: 80px;
    left: 10px;
}
.outer {
    width: 500px;
    height: 300px;
    overflow: scroll;
    padding-left: 150px;
}

效果: