CSS深入浅出（1）-流

2019-03-14 本文已影响169人如梦初醒Tel

何为“流”

有人称流是文档流亦或者是正常留，我简称为“流”，它在css中引导元素的排列和定位的一条看不见的“水流”。
块级元素一定是独占一行，并且依次向下排列
内联元素从左往右在一行中排列，需要换行的时候就会按照“之”换行。

块级元素

内联元素

何为“块级元素”

“块级元素”对应的英文是 block-level element，常见的块级元素有<div>、<li>和<table>
等。需要注意是，“块级元素”和“display 为 block 的元素”不是一个概念。例如， <li>元
素默认的 display 值是 list-item， <table>元素默认的 display 值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。
正是由于“块级元素”具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响。例如：

.clear:after {
content: '';
display: block; // 也可以是 table，或者是 list-item
clear: both;
}

在实际开发当中，常用的就是block与table，不会使用list-item。

list-item会出现项目符号，需要额外多写一行代码list-style:none;声明。
IE浏览器不支持，兼容性不够好。

"with:auto"

width 的默认值是 auto。
（1）充分利用可用空间。比方说， <div>、<p>这些元素的宽度默认是 100%于父级容器的。
（2）收缩与包裹。典型代表就是浮动、绝对定位、 inline-block 元素或 table 元素。
（3）收缩到最小。这个最容易出现在 table-layout 为 auto 的表格中

image.png

如上：每一列的空间不够，文字能断就断，中文随便断，英文不能断。
（4）超出容器限制。除非有明确的 width 相关设置，否则上面 3 种情况尺寸都不会主动超过父级容器宽度的，但是存在一些特殊情况。

image.png

外部尺寸

<div>默认宽度 100%显示，是“外部尺寸”，其余全部是“内部尺寸”。而这唯一的“外部尺寸”，是“流”的精髓所在。

外部尺寸和流体特性

一个垂直导航：

a {
display: block;
width: 100%;
}

<a>元素默认 diplay 是 inline，所以，设置 display:block 使其块状化绝对没有问题，但后面的 width:100%就没有任何出现的必要了。
写CSS一定要按照“鑫三无准则”，即“无宽度，无图片，无浮动”。为何要“无宽度”？
原因很简单，表现为“外部尺寸”的块级元素一旦设置了宽度，流动性就丢失了。
流动性，并不是看上去的宽度 100%显示这么简单，而是一种 margin/border/padding和 content 内容区域自动分配水平空间的机制。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
  .width {
  width: 100%;
}

.nav {
  background-color: #cd0000;
}
.nav-a {
  display: block;
  margin: 0 10px;
  padding: 9px 10px;
  border-bottom: 1px solid #b70000;
  border-top: 1px solid #de3636;
  color: #fff;
}
.nav-a:first-child { border-top: 0; }
.nav-a + .nav-a + .nav-a { border-bottom: 0;}
  </style>
<body>
<h4>无宽度，借助流动性</h4>
<div class="nav">
  <a href="" class="nav-a">导航1</a>
  <a href="" class="nav-a">导航2</a>
  <a href="" class="nav-a">导航3</a>
</div>
<h4>width:100%</h4>
<div class="nav">
  <a href="" class="nav-a width">导航1</a>
  <a href="" class="nav-a width">导航2</a>
  <a href="" class="nav-a width">导航3</a>
</div>
</body>
</html>

尝试一下

对比

这两个唯一的区别就是前者没有指定宽度，后者指定了width:100% 结果就是后者的尺寸超过了外部的容器。即“流动性丢失”。

借助流动性，就算外部的容器尺寸变化，这个导航也可以自适应。这就是利用浏览器原生流特性的好处。

盒子

width作用在“内在盒子”
内在盒子分为四种不同的盒子，分别是 content box、 padding box、 border box和 margin box。

盒子