From 72a6daf3f56a37532b2d6f8a9afa38b38e174285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?=
 <init_pro@aliyun.com>
Date: Thu, 14 Jun 2018 17:32:10 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=A4=E8=AF=86display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          |   9 --
 package.json                               |   1 -
 source/_data/about.json                    |  27 ------
 source/_data/link.json                     |  11 ---
 source/_posts/前端杂烩/重新认识display.md  |  96 +++++++++++++++++++++
 source/images/前端杂烩/no_width_layout.jpg | Bin 0 -> 2760 bytes
 6 files changed, 96 insertions(+), 48 deletions(-)
 delete mode 100644 source/_data/about.json
 delete mode 100644 source/_data/link.json
 create mode 100644 source/_posts/前端杂烩/重新认识display.md
 create mode 100644 source/images/前端杂烩/no_width_layout.jpg

diff --git a/package-lock.json b/package-lock.json
index 000a8e5..51b583c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1471,15 +1471,6 @@
         }
       }
     },
-    "hexo-generator-search": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/hexo-generator-search/-/hexo-generator-search-2.2.5.tgz",
-      "integrity": "sha512-lt2qEGhNINOcQr2ws7UKXAOALWz8Z0+fuq88mbJgQogpUhXrLLfJiv/padHBatooTFeK7+XBUDDS6mgfKMbrkg==",
-      "requires": {
-        "nunjucks": "3.1.2",
-        "utils-merge": "1.0.1"
-      }
-    },
     "hexo-generator-tag": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/hexo-generator-tag/-/hexo-generator-tag-0.2.0.tgz",
diff --git a/package.json b/package.json
index e4b0fb7..f7c5b14 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "hexo-generator-feed": "^1.2.2",
     "hexo-generator-index": "^0.2.0",
     "hexo-generator-json-content": "^3.0.1",
-    "hexo-generator-search": "^2.2.5",
     "hexo-generator-tag": "^0.2.0",
     "hexo-renderer-ejs": "^0.3.0",
     "hexo-renderer-marked": "^0.3.0",
diff --git a/source/_data/about.json b/source/_data/about.json
deleted file mode 100644
index a8dec57..0000000
--- a/source/_data/about.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-    "avatar": "https://i.loli.net/2018/05/04/5aeb37415a0dc.jpg",
-    "name": "Stacy Kara",
-	"tag": "Web前端/Java/技术宅",
-    "desc": "你的简介（建议一两句话）",
-    "skills": {
-        "Javascript": 8,
-		"Python": 6,
-		"invisible-split-line-1": -1,
-		"Node.js": 4
-    },
-    "projects": [{
-		"name": "你的项目A",
-		"image": "https://d13yacurqjgara.cloudfront.net/users/138819/screenshots/2578899/dribbble_800x600_01_1x.png",
-		"tags": ["2016年", "项目标签"],
-		"description": "你的项目A的简介",
-		"link_text": "网站链接",
-		"link": "https://dribbble.com/"
-	}, {
-		"name": "你的作品B",
-		"image": "https://d13yacurqjgara.cloudfront.net/users/4094/screenshots/2578885/time-lords-drib_1x.jpg",
-		"description": "你的作品B的简介",
-		"tags": ["Github", "设计"],
-		"link_text": "Github地址",
-		"link": "https://github.com/"
-	}]
-}
diff --git a/source/_data/link.json b/source/_data/link.json
deleted file mode 100644
index 747613c..0000000
--- a/source/_data/link.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-    "social": {
-        "weibo": "https://weibo.com/2633013641",
-        "github": "https://github.com/sookie2010",
-		"rss": "/atom.xml"
-    },
-    "extern": {
-	    "raytaylorism主题作者的技术博客": "http://raytaylorlin.com/",
-		"Github地址（测试友情链接）": "https://github.com/raytaylorlin"
-    }
-}
diff --git a/source/_posts/前端杂烩/重新认识display.md b/source/_posts/前端杂烩/重新认识display.md
new file mode 100644
index 0000000..3fcdd97
--- /dev/null
+++ b/source/_posts/前端杂烩/重新认识display.md
@@ -0,0 +1,96 @@
+---
+title: 重新认识display
+date: 2018-6-14 15:10:38
+tags: 
+  - 前端
+  - css
+categories: 
+  - 前端杂烩
+---
+
+html元素可以分为`块级元素`和`内联元素`两类
+我们可以通过设置display来进行改变
+( 每个元素都有默认的display属性 , 它们都必须是这两类其中之一 )
+但是块级元素并不仅仅是指`display:block`的元素 , 它的范围更广
+
+<!-- more -->
+
+块级元素具备这个基本特点:
+> 在一个水平流上只能单独显示一个元素 , 多个块级元素则换行显示
+
+只要具备这个特点的都是块级元素
+比如`<li>`默认的是`display:list-item` , `<table>`默认的是`display:table`
+
+### list-item
+最初设计的display简单只有block和inline两种
+他们能够表现的效果十分简单
+
+但是在处理项目符号的时候 , 这两种盒子模型都无法满足要求了
+因为需要一个附加盒子来放置圆点 数字这些项目符号
+所以对于`display:list-item`来说
+除了主块级盒子 , 还需要有这样一个`标记盒子`
+
+```html
+<ul>
+  <li>第一项</li>
+  <li>第二项</li>
+  <li>第三项</li>
+</ul>
+```
+
+### inline-block
+最初对于块级元素和内联元素的定义 , 其实是这些元素的 **外在**表现
+也就是是否能在一行当中排布 , 还是必须独占一行
+`inline-block`则是更加细化了盒子模型
+将盒子模型分为 **外在盒子**以及 **内在盒子**
+当然这么说只是为了方便理解 , 内在盒子官方的称呼应该是`容器盒子`
+
+所以这个值的意思应该是
+> 外在具备内联元素的特点 , 可以在一行中有多个
+内在具备块元素的特点 , 可以设置width和height来指定它的大小
+
+那么block其实可以理解为block-block
+inline可以理解为inline-inline
+
+{% jsfiddle sookie/hLu81xet html,css,result dark %}
+
+#### width与height
+width和height是作用在哪个盒子上的 , 根据上面设置height和width属性的表现可以看出
+显然是作用在 **内在盒子**上面的
+
+width的默认值是`auto`
+它至少包含以下不同的宽度表现
++ **充分利用可用空间** : 这种表现之下 , 与设置100%值无差别 , 横向占满父容器 , 见于外在块级元素 , 比如`<div>`, `<p>`
++ **收缩与包裹** : 代表是浮动 绝对定位 inline-block元素或table元素
++ **收缩到最小** : 容易出现在table-layout为auto的表格中 ( 表现为表格中的文字呈竖排被压缩为一列 )
++ **超出父容器限制** : 内容为很长的连续英文或数字 ( 汉字可以在任意位置截断 ) , 或者内联元素被设置了`white-space:nowrap`
+
+##### 关于100%
+对于display为block的元素 , 它的宽度如果是auto , 那么自然会表现为 **充分利用可用空间**
+但是并不意味着指定width为100%会有同样的表现
+
+比如这种情况
+```html
+<div class="box">
+  <div class="cell">123</div>
+  <div class="cell">456</div>
+</div>
+```
+```css
+.box {
+  width: 150px;
+  height: 100px;
+  background: pink;
+  
+}
+.box > .cell {
+  background: orange;
+  padding: 5px;
+  margin: 5px;
+  width: 100%;
+}
+```
+子元素具备padding margin
+设置了宽度100% , 反而会溢出父容器之外
+![no width layout](/images/前端杂烩/no_width_layout.jpg)
+更好的办法是借助流动性无宽度布局
diff --git a/source/images/前端杂烩/no_width_layout.jpg b/source/images/前端杂烩/no_width_layout.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..38d38d139c60a243359d080a8406a7a63b847b3b
GIT binary patch
literal 2760
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
E2iH=Tn*aa+

literal 0
HcmV?d00001