深入理解css 笔记（5）
创造浮动的初衷并不是为了用于页面布局。浮动能将一个元素，通常是一张图片，拉到其容器的一侧，这样文档流就能够包围它。word 文档中，报纸，杂志中很常见。所以 css 增加了浮动来实现这种效果。尽管这才是浮动的是设计初衷，我们却并不总是这样使用它。flexbox 正在迅速取代浮动在页面布局中的地位。flexbox 的行为很直观，可预测行更好。不过了解一下，而且浮动的初衷，要实现将图片移动道网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。
<!DOCTYPE html>
<html lang="cn" class="has-bottombar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"
/>
<style>
:root {
box-sizing: border-box;
}
*,
:before,
:after {
box-sizing: inherit;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
body * + * {
margin-top: 1.5em;
}
header {
color: #fff;
background-color: #0072b0;
padding: 1em 1.5em;
border-radius: 0.5em;
margin-bottom: 1.5em;
}
.main {
background-color: #fff;
border-radius: 0.5em;
padding: 1em 1.5em;
}
.container {
max-width: 1080px;
margin: 0 auto;
}
.media {
float: left;
width: 50%;
padding: 1.5em;
background-color: #eee;
border-radius: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Running Club</h1>
</header>
<main class="main clearfix">
<h2>Running tips</h2>
<div>
<div class="media">
<img class="media-image" src="hi.png" />
<div class="media-body">
<h4>Strength</h4>
<p>
Strength training is an important part of injury prevention.
Focus on your core — especially your abs and glutes.
</p>
</div>
</div>
<div class="media">
<img class="media-image" src="hi.png" />
<div class="media-body">
<h4>Cadence</h4>
<p>
Check your stride turnover. The most efficient runners take
about 180 steps per minute.
</p>
</div>
</div>
<div class="media">
<img class="media-image" src="hi.png" />
<div class="media-body">
<h4>Change it</h4>
<p>Don't run the same every time you hit the road.</p>
</div>
</div>
<div class="media">
<img class="media-image" src="hi.png" />
<div class="media-body">
<h4>Focus on form</h4>
<p>
RUn tall but relaxed.Your feet should hit the ground beneath
your hips,
</p>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
因为浮动元素不同于普通文档流元素，它们的高度不会加到父元素上。一种解决方法使用跟浮动配套的 clear 属性。将一个元素放在主容器的末尾，并对它使用 clear，这回让容器扩展到浮动元素下面。
<div style="clear:both"></div>
clear:both 声明让该元素浮动到浮动元素的下面，而不是侧面。因为空 div 本身没有浮动，所以容器就会扩展，直到包含它，因此也会包含该 div 上面的浮动元素。这种方法能够实现预期的行为，但是不雅。要在 html 里添加不必要的标记，才能实现本应该由 Css 实现的效果。不用额外的 div 标签，我们还可以用伪元素来实现。使用::after 伪元素喧杂起，就可以快速的在 dom 中在容器末尾添加一个元素，而不用在 html 里添加标记。
<style>
.clearfix:after {
display: block;
content: ' ';
clear: both;
}
</style>
因为盒子高度不一致，浮动效果喝我们想象的不一致。我们真正想要的是每行有两个浮动盒子。想要修复这个问题很简单：清除第三个浮动元素上面的浮动。更通用的做法是，清除每行的第一个元素上面的浮动。由于已知每行有两个盒子，因此只需要清除每行的第奇数个元素上面那行的浮动即可。
<style>
.media {
float: left;
margin: 0 1.5em 1.5em 0;
width: calc(50% - 1.5em);
padding: 1.5em;
background-color: #eee;
border-radius: 0.5em;
}
.media:nth-child(odd) {
clear: left;
}
.clearfix::after {
content: ' ';
display: block;
clear: both;
}
</style>
media 里面的内容，我们想的是让图片在一侧，一段文字出现在图片的旁边。这种布局有几种实现方案，包括 flexbox 喝表格布局，浮动也可以。
<style>
.media-image {
float: left;
width: 50px;
}
.media-body {
margin-top: 0;
}
.media-body h4 {
margin-top: 0;
}
</style>
现在这种在图片较小，文字较多的情况下会形成环绕的样式，但是我们想要的是两个分割左右，为了实现这种布局，需要为正文建立一个块级格式化上下文。block formatting context.bfc.BFC 是网页的一块区域，元素基于这块区域布局。虽然 BFC 本身是环绕文档流的一部分，但它将内部的内容和外部上下文隔开。简而言之，BFC 里的内容不会跟外部的元素重叠或者相互影响。只要给创建 BFC，网页的布局就会符合预期。通常是给元素设置 overflow:hidden 或者 auto.
<style>
.media-image {
float: left;
width: 50px;
margin-right: 1.5em;
}
.media-body {
margin-top: 0;
overflow: auto;
}
.media-body h4 {
margin-top: 0;
}
</style>
大部分流行的 css 框架包含了自己的网格系统。它们的实现细节各不相同，但是设计思想相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。通常网格系统的每行被划分为特定数量的列，一般是 12 个，但也可以是其他数。选取 12 作为列数是因为它能够被 2346 整除，组合起来足够灵活。现在变的更多，一般都是 24 个格子里。用网格系统改造下前面的网页。虽然这种做法比前面实现布局的方式烦琐，但是可以提高 css 的可复用性，所以还是值得的。
<style>
.row::after {
content: ' ';
display: block;
clear: both;
}
[class*=*'column-'] {
float: left;
}
.column-1 {
width: 8.33%;
}
.column-2 {
width: 16.6667%;
}
</style>
第一个选择器，它是一个属性选择器，根据元素的 class 属性匹配元素。但是跟普通的类轩再起相比，它能写出更复杂的匹配规则。*=比较符可以匹配任意包含指定字符串的值。属性选择器匹配的范围比预期的更广。比如除了匹配列元素，上面的属性选择器还能匹配 column-header 这样的元素。为了避免这种情况，最好是将 column 作为保留字，这样就不会跟以上样式规则冲突了。
给每个网格列添加左右内边距，创造间隔。把间隔交给网格系统实现，而不是让内部的组件自己实现，这样就能够在其他页面复用这套网格系统，不用再费心去实现间隔。
<style>
[class*="column-*"]{
float:left:
padding:0 0.75em;
margin-top:0
}
</style>
第一次学习 flexbox 时，有点像拿着高压水枪喝水，东西太多了，很难将所有属性记住。给元素添加 display:flex,该元素就变成了一个弹性容器。它的直接子元素变成了弹性子元素。弹性子元素默认时再同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定。与其他的 display 值，比如 inline，inline-block 等，只会影响到应用了该样式的元素，而 flexbox 则不一样。一个弹性容器能控制内部元素的布局。
子元素按照主轴线排列，主轴的方向为主起点到主终点。x 轴。垂直于主轴的是副轴，方向是从上到下，副起点到副终点。
<!DOCTYPE html>
<html lang="cn" class="has-bottombar">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
name="viewport"
/>
<style>
:root {
box-sizing: border-box;
}
*,
:before,
:after {
box-sizing: inherit;
}
body {
background-color: #709b90;
font-family: Arial, Helvetica, sans-serif;
}
body * + * {
margin-top: 1.5em;
}
.container {
max-width: 1080px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Ink</h1>
</header>
<nav>
<ul class="site-nav">
<li><a href="/">Home</a></li>
<li><a href="/features">Features</a></li>
<li><a href="/pricing">Pricing</a></li>
<li class="nav-right">
<a href="/about">About</a>
</li>
</ul>
</nav>
<main class="flex">
<div class="column-main tile">
<h1>Team collaboration done right</h1>
<p>
Thousands of teams from all over the world turn to <b>Ink</b> to
communicate and get things done.
</p>
</div>
<div class="column-sidebar">
<div class="tile">
<form class="login-form">
<h3>Login</h3>
<p>
<label for="username">Username</label>
<input id="username" type="text" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" type="password" name="password" />
</p>
<button type="submit">Login</button>
</form>
</div>
<div class="tile centered">
<small>Starting at</small>
<div class="cost">
<span class="cost-currency">$</span>
<span class="cost-dollars">20</span>
<span class="cost-cents">.00</span>
</div>
<a class="cta-button" href="/pricing"> Sign up </a>
</div>
</div>
</main>
</div>