重新认识display

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",

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",

source/_data/about.json

@@ -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/"
-	}]
-}

source/_data/link.json

@@ -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"
-    }
-}

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)
+更好的办法是借助流动性无宽度布局