何为“流”
有人称流是文档流亦或者是正常留，我简称为“流”，它在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。
盒子
网友评论