1.2-4标准文档流 伪类和显示模式

显示模式和标准文档流

在我们遇到的 HTML 元素中，有的标签元素如<div>、 <p>等在浏览器中加载时必须独自占满一行，有的标签元素如<a>、<span>等则不会独占一行，原因是什么？

标准文档流

• 标准文档流，指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。前面内容发生了变化，后面的内容位置也会随着发生变化。
• HTML就是一种标准文档流文件。
• HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级。

微观现象

• 空白折叠现象。
• 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
• 自动换行:元素内一行内容写满元素的 width 时会自动进行换行。

元素等级

在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。

• 块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div>、<h1>、<p>、<ul>、<li>等。
• 行内元素：大部分的文本级标签，比如 <span>、<a>、<b>等。
• 行内块元素：比如 <img>、<input>等。

各种等级的元素有自己的加载特点

块级元素

• 块级元素可以设置宽高，在浏览器中正常加载。
• 块级元素必须独占一行，不能与其他任何标签并排一行。
• 块级元素如果不设置宽度，会自动撑满父级的 width 区域；高度不设置，会被内容自动撑开高度。

行内元素

• 行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题。
• 行内元素可以与其他的行内或行内块元素并排一行显示。
• 行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开。

行内块元素

• 行内块元素可以设置宽度和高度。
• 行内块元素可以与其他的行内或行内块并排一行显示。
• 行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
• 行内块依旧具有标准流的微观性质，例如空白折叠现象。

显示模式 display

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不 变的，后期可以通过 display 属性更改一个标签的显示模式。

属性值	作用
block	表示元素要以块级元素模式加载，具备块级特点
inline	表示元素要以行内元素模式加载，具备行内特点
inline­block	表示标签要以行内块模式加载，具备行内块特点
none	表示标签及内部内容直接隐藏，让出原有标准流的位置

脱离标准流

display 属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。

浮动属性

• 浮动是一种非常重要的布局属性。
• 属性名：float（漂流、浮动的意思）

属性值	说明
left	左浮动
right	右浮动

• 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。

浮动的性质

１、浮动的元素脱离标准流

• 标准文档流特点：区分行块。
  块级元素：可以设置宽高，必须独占一行。
  行内元素：不能设置宽高，可以并排一行。
• 浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

2、浮动的元素依次贴边

• 浮动属性值：left、right。

• 浮动方向设置不同，进行布局时，加载位置方向不同。以 left 为例：

  • 父元素宽度足够，所有子元素会按照HTML书写顺序，并排一排，依次向左进行贴边，父元素左边←子元素1←子元素2←子元素3←子元素4。
  • 父元素宽度如果不够，一行里不能放下子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
  • 如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
  • 如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。
  • 如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。

• 右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次 向右向上一个元素贴边，第一个元素贴父元素的右边。

注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。

利用浮动的这个依次贴边性质，可以完成多种网页布局效果。例如：

• 平均分布表格效果。
• 导航栏效果。
• 常见的电商或企业网站布局。

3、浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin 塌陷现象。

4、浮动的元素让出标准流位置
元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素（在 IE6 、7浏览器中，有兼容问题）。

• 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使 用后期学习的定位制作。
• 如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

5、字围现象
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的盒子1会压盖住盒子2的一部分，但是盒子2中文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果：
比如文字包围图片效果

浮动的问题

浮动的问题1

• 标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。
• 如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

浮动的问题2

• 父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

以上的问题需要被解决，解决方法是清除浮动带来的影响。

清除浮动方法

• 如果父元素高度是固定的，建议使用 height 属性解决。
• 如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

清除浮动方法一：height
给标准流的父元素强制给一个合适的高度

• 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
• 弊端：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

清除浮动二：clear属性
clear，清除。
作用：清除标签元素自身受到的前面的浮动元素的影响（给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置）。

属性值	作用
left	清除前面左浮动带来的影响
right	清除前面右浮动带来的影响
both	清除前面所有浮动带来的影响

div {clear: both;}

• 解决：浮动元素影响后面元素标准流位置和贴边。
• 问题：父元素不能高度自适应，两个父元素之间如果有 margin 效果不正确。

清除浮动三：
1.外墙法：在两个大的父盒子之间，添加一个空的 <div> 标签，标签上带有 clear： both 属性，两个盒子间距用空的div标签高度设置。

• 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
• 问题：父元素没有高度自适应。

2.内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 <div>元素，标签高 度为 0，添加 clear 属性。

• 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
• 缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余。

清除浮动四：伪类
本质是使用伪类方法利用css代码书写一堵内墙。

• 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
• :after：这个伪类表示选中的是某个标签内部的最后的位置。
• 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
  将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix的类名。

.clearfix:after {
            content: "1";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

清除浮动五：溢出隐藏
小偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题。

补充：overflow 属性

• 元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
• 元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。

高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

CSS 伪类选择器

清除浮动时，我们接触到了伪类:after，现在我们来详细了解一下伪类的概念，并学习几个a标签常用的伪类

伪类的概念

• 伪类和类之间有一定的相似之处，也存在明显的区别。
• 普通的类：必须给标签设置对应的 class 属性值，才能选中标签，而且类选择器后 面添加的属性，会立即加载到浏览器之上。
• 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使用，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。
• 伪类选择器的权重与普通的类选择器相同。
• 伪类选择器写法：前面是普通的选择器，后面紧跟:伪类名。

<a>标签的伪类

<a>标签可以根据用户行为不同，划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。

<a>标签的伪类书写顺序

• <a>标签上可能会同时触发 2 到 3 个状态，每个状态的属性都会进行加载，相同的属性之间会发生层叠。
• 伪类的权重是相同的，只能根据书写顺序判断权重，后写的层叠先写的，所以伪类书写顺序非常重要。
• 要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、鼠标移上hover(其他标签也可以设置 :hover 伪类状态)、鼠标点击active。
• 为了方便记忆，利用爱恨准则：love hate。

    a:link {
        color: pink;
    }
    a:visited {
        color: purple;
    }
    a:hover {
        color: blue;
    }
    a:visited {
        color: yellow;
    }

<a>标签的伪类实际应用

• 一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

a:link,a:visited {color: #666;}
a:hover {color: #f00;}

• 更加常用的一种设置方式如下：
  <a>标签任何普通的选择器，可以同时选中四种伪类状态，可以将四种状态设置为相同的样式。伪类属性可以设置所有的<a>默认显示样式的属性，包括盒模型、文字等。
  a:hover 伪类选择器：设置鼠标移上时不一样的样式属性：

a {background-color: blue;}
a:hover {background-color: pink;}