<commit_before>---
layout:     post
title:      "CSS Start from Zero"
subtitle:   "CSS从零单排-01"
date:       2016-05-08
author:     "<NAME>"
header-img: "img/frogs.jpg"
tags:
    - CSS
---

### Background
说来惭愧，前端从业这么多年，对`CSS`一直没有一个系统认真的学习，工作中要对页面进行调整，也只是去debug找，改改CSS，看如何能让页面达到我们想要的效果，而不去深究为什么，以至于别人问起来如：某某某效果如何实现，突然感觉一片茫然，脑中一片空白，竟不知从何说起，于是乎想做一个从零开始系列，以将缺失的知识慢慢补起来，同时也是做个笔记，以供日后查阅。

因为不是系统的从头开始，所以文章会显得有点杂乱，但都是根据当下工作中常用的需求出发，根据每个需求来详细说明如何实现及为什么实现。在我去探索这些实现方式的时候，都是先参考[CSS Mastery - Advanced Web Standards Solutions](https://book.douban.com/subject/4736167/)这本书，感兴趣的同学可以先看看这本书。

### Content

#### Float

`Float`，我想大家对这个属性应该是最熟悉的，当然也是最讨厌的（对我来说就是，但是这是从前，经过无数次被虐后，我终于重新研究了一下这个属性，开始喜欢上这个属性了）。为什么呢？因为面试的时候常常问，那么为什么要问呢，因为太基础了。但是如何答不上来的人技术就不好吗？应该是吧（我以前就答不上来，我技术也不好，但是在慢慢变好，哈哈哈...，真尴尬）。所以呢，为了以后面试不再被别人瞧不起，我们还是从基础开始，了解一下这个`float`到底是什么，如何工作。

我想大家在google（为什么不用百度，你懂的，年度微型小说：问: “百度一下会死呀”，答：“会”）上一搜就能简单的搜出`float`的定义及基本用法，我就不说这些基本的了，我只提一个注意点：`float`元素会脱离文档流，形成`block`元素，也就是说即使不是块级元素，使用`float`后会变为块级元素，就好像应用了`diplay: block`一样。

最常问的一个问题就是，如何清除浮动，一般的解决办法如下：

```
.clear:after {
    content: ".";
    height: 0; // or line-height: 0
    visibility: hidden;
    clear: both;
    display: block; /* 为什么要用block? 请自行google */
}

```
或者将父元素也设为`float`元素或者将父元素的`overflow: hidden/auto`，将父元素也设为`float`的效果跟其他方式的效果不同的是，其他方式一般会把父元素的width撑到最大宽度，而为父元素设置`float`的效果则是只将父元素撑开到容得下子元素为止，这是为什么呢？这是因为`Block`元素，如div元素，在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器，而`float`、`absolute`、`inline-block`元素则不会这样，为什么呢，我的理解是他们具有包裹性。（当然按照张鑫旭大神的说法，`overflow: hidden/auto`也是有包裹性的，但是这个包裹性与其他几种方式是有区别的，不包括zoom）那么包裹性具体是什么呢？请看如下代码:

```
<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>
```

```
#wrapper {
  border: 1px solid red;
/*   overflow: hidden; */
/*   display: inline-block; */
/*   position: absolute; */
/*   float: left; */
  margin: 10px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 10px;
}

```
通过几种不同的清除浮动的方式，产生的效果会不同。

parent div float: left / display: inline-block / float: left
![parent div float left](/img/css-notes/float-left.png "Parent div float left")

parent div overflow: hidden
![parent div overflow hidden](/img/css-notes/overflow-hidden.png "Parent div overflow hidden")

如果想对包裹性及清除浮动有更加深入的了解，请参考张鑫旭大神的：[对overflow与zoom清除浮动的一些认识](http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/)
<commit_msg>Update post<commit_after>---
layout:     post
title:      "CSS Start from Zero"
subtitle:   "CSS从零单排-01"
date:       2016-05-08
author:     "<NAME>"
header-img: "img/frogs.jpg"
tags:
    - CSS
---

### Background
说来惭愧，前端从业这么多年，对`CSS`一直没有一个系统认真的学习，工作中要对页面进行调整，也只是去debug找，改改CSS，看如何能让页面达到我们想要的效果，而不去深究为什么，以至于别人问起来如：某某某效果如何实现，突然感觉一片茫然，脑中一片空白，竟不知从何说起，于是乎想做一个从零开始系列，以将缺失的知识慢慢补起来，同时也是做个笔记，以供日后查阅。

因为不是系统的从头开始，所以文章会显得有点杂乱，但都是根据当下工作中常用的需求出发，根据每个需求来详细说明如何实现及为什么实现。在我去探索这些实现方式的时候，都是先参考[CSS Mastery - Advanced Web Standards Solutions](https://book.douban.com/subject/4736167/)这本书，感兴趣的同学可以先看看这本书。

### Content

#### Float

`Float`，我想大家对这个属性应该是最熟悉的，当然也是最讨厌的（对我来说就是，但是这是从前，经过无数次被虐后，我终于重新研究了一下这个属性，开始喜欢上这个属性了）。为什么呢？因为面试的时候常常问，那么为什么要问呢，因为太基础了。但是如何答不上来的人技术就不好吗？应该是吧（我以前就答不上来，我技术也不好，但是在慢慢变好，哈哈哈...，真尴尬）。所以呢，为了以后面试不再被别人瞧不起，我们还是从基础开始，了解一下这个`float`到底是什么，如何工作。

我想大家在google（为什么不用百度，你懂的，年度微型小说：问: “百度一下会死呀”，答：“会”）上一搜就能简单的搜出`float`的定义及基本用法，我就不说这些基本的了，我只提一个注意点：`float`元素会脱离文档流，形成`block`元素，也就是说即使不是块级元素，使用`float`后会变为块级元素，就好像应用了`diplay: block`一样。

最常问的一个问题就是，如何清除浮动，一般的解决办法如下：

```
.clear:after {
    content: ".";
    height: 0; // or line-height: 0
    visibility: hidden;
    clear: both;
    display: block; /* 为什么要用block? 请自行google */
}

```

上面属于主动清除浮动，当然，还有一些就是被动清除浮动了，有哪些呢？

* overflow (非visibility)
* float
* absolute
* inline-block
* zoom (IE)

他们是如何实现清除浮动的呢，因为这些属性使得父元素具有包裹性，什么是包裹性？请参考张鑫旭大神的：[对overflow与zoom清除浮动的一些认识](http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/)
**注意**：`overflow`的效果跟另外几种方式效果不太一样，它属于“被动包裹”，故宽度没有包裹属性，依旧原延展性显示，高度包裹。
`Block`元素，如div元素，在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器，而`float`、`absolute`、`inline-block`元素的宽度则由其内容宽度撑开决定。

请看如下代码:

```
<div id="wrapper">
  <div class="box"></div>
  <div class="box"></div>
</div>
```

```
#wrapper {
  border: 1px solid red;
/*   overflow: hidden; */
/*   display: inline-block; */
/*   position: absolute; */
/*   float: left; */
  margin: 10px;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 10px;
}

```
通过几种不同的清除浮动的方式，产生的效果会不同。

parent div float: left / display: inline-block / float: left
![parent div float left](/img/css-notes/float-left.png "Parent div float left")

parent div overflow: hidden
![parent div overflow hidden](/img/css-notes/overflow-hidden.png "Parent div overflow hidden")


{'fraction_non_alphanumeric': 0.1634894322420224, 'fraction_numerical': 0.029009531703273934, 'mean_word_length': 6.686305732484076, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7235738', 'n_tokens_mistral': 3180, 'n_tokens_neox': 3433, 'n_words': 241}