{"action":"created","issue":{"url":"https://api.github.com/repos/newPromise/CSS/issues/1","repository_url":"https://api.github.com/repos/newPromise/CSS","labels_url":"https://api.github.com/repos/newPromise/CSS/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/newPromise/CSS/issues/1/comments","events_url":"https://api.github.com/repos/newPromise/CSS/issues/1/events","html_url":"https://github.com/newPromise/CSS/issues/1","id":309719352,"number":1,"title":"深入理解css 中的 `line-height`","user":{"login":"newPromise","id":25844786,"avatar_url":"https://avatars0.githubusercontent.com/u/25844786?v=4","gravatar_id":"","url":"https://api.github.com/users/newPromise","html_url":"https://github.com/newPromise","followers_url":"https://api.github.com/users/newPromise/followers","following_url":"https://api.github.com/users/newPromise/following{/other_user}","gists_url":"https://api.github.com/users/newPromise/gists{/gist_id}","starred_url":"https://api.github.com/users/newPromise/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/newPromise/subscriptions","organizations_url":"https://api.github.com/users/newPromise/orgs","repos_url":"https://api.github.com/users/newPromise/repos","events_url":"https://api.github.com/users/newPromise/events{/privacy}","received_events_url":"https://api.github.com/users/newPromise/received_events","type":"User","site_admin":false},"labels":[{"id":883647172,"url":"https://api.github.com/repos/newPromise/CSS/labels/line-height","name":"line-height","color":"f0f276","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-29T11:31:48Z","updated_at":"2018-03-29T12:43:04Z","closed_at":null,"author_association":"OWNER","body":""},"comment":{"url":"https://api.github.com/repos/newPromise/CSS/issues/comments/377223051","html_url":"https://github.com/newPromise/CSS/issues/1#issuecomment-377223051","issue_url":"https://api.github.com/repos/newPromise/CSS/issues/1","id":377223051,"user":{"login":"newPromise","id":25844786,"avatar_url":"https://avatars0.githubusercontent.com/u/25844786?v=4","gravatar_id":"","url":"https://api.github.com/users/newPromise","html_url":"https://github.com/newPromise","followers_url":"https://api.github.com/users/newPromise/followers","following_url":"https://api.github.com/users/newPromise/following{/other_user}","gists_url":"https://api.github.com/users/newPromise/gists{/gist_id}","starred_url":"https://api.github.com/users/newPromise/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/newPromise/subscriptions","organizations_url":"https://api.github.com/users/newPromise/orgs","repos_url":"https://api.github.com/users/newPromise/repos","events_url":"https://api.github.com/users/newPromise/events{/privacy}","received_events_url":"https://api.github.com/users/newPromise/received_events","type":"User","site_admin":false},"created_at":"2018-03-29T12:43:04Z","updated_at":"2018-03-29T12:43:04Z","author_association":"OWNER","body":"###  `line-height` 与 `line box` 之间的关系\r\n`line-height` 从字面意义上来讲， 是 `行高` 的意思，在页面上表现出来的就是一行文字的高度， 在介绍 `line-height` 之前，我们先来认识一下 `line boxes` 和 `inline boxes` 这两个东西。\r\n#### `line boxes`  与 `inline boxes`  \r\n`inline boxes` : 可以认为是包裹在 `inline` 元素外面的的一层外层， 例如 `span` 元素， `img` 图片元素等 `inline` 形式的元素，对于 `inline` 水平的元素，都会形成一层的 `inline boxes` 进行包裹。  \r\n`line boxex` : 对于 `line boxes` 你可以认为 `line boxes` 用于包裹一行元素， 也就是说，对于一行 `inline` 水平的元素而言， 在外面有一个 `line boxes` 进行包裹， 如果一行有多个 `inline` 水平的元素，那么，这一行的 `line boxes` 就会包含有多个的 `inline boxex`。\r\n**对于 `line boxes` 的元素的高度， 他的高度是获取该 `box` 下面的所有的 `inline boxes` 元素的高度 ， 比较获取他们中最大的高度， 最后这个最大的高度被认为是 `line boxes` 的最大高度**。\r\n\r\n**这里 `inline boxes` 的高度是什么呢？ 就是今天我们要说的 `line-height`**.\r\n行高具体来讲就是两行文字之间基线之间的距离：  \r\n如下图所示：\r\n![image](https://user-images.githubusercontent.com/25844786/38088466-835a2b96-338e-11e8-82be-ac0a4a367222.png)\r\n上面的图中红线就是表示所谓的基线， 关于我们另外一个css 的属性 `vertical-align` 改变的就是基线的高低大小。 \r\n\r\n#### 使用 `line-height` 实现的垂直居中实现\r\n我们经常使用 `line-height = height` 实现行内元素的垂直居中效果， 这里的 `height` ， 更为确切的说是  我们将要居中 `line boxes` 的高度进行居中， 对于行高有一个垂直居中性。\r\n\r\n#### 使用 `line-height = height` 在图片中垂直居中效果的失效。\r\nhtml:\r\n```\r\n<div class=\"demo\">\r\n        <img src=\"./picture.png\" alt=\"垂直居中的图片\" class=\"img\">\r\n</div>\r\n```\r\n\r\nCSS:\r\n```\r\n.demo {\r\n    display: inline-block;\r\n    line-height: 150px;\r\n    height: 150px;\r\n    background-color: lightblue;\r\n}\r\n.img {\r\n    height: 50px;\r\n}\r\n```\r\n最终结果如下：\r\n\r\n![image](https://user-images.githubusercontent.com/25844786/38089336-b99abea2-3391-11e8-81ee-5ffa5c6b736e.png)\r\n\r\n并没有居中！"}}
{"actor":{"display_login":"newPromise"}}