{"action":"created","issue":{"url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/20","repository_url":"https://api.github.com/repos/amnhh/amnhh.github.io","labels_url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/20/comments","events_url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/20/events","html_url":"https://github.com/amnhh/amnhh.github.io/issues/20","id":227272246,"number":20,"title":"20. 《精通CSS - 高级 Web 标准解决方案》 读书笔记","user":{"login":"amnhh","id":20924347,"avatar_url":"https://avatars1.githubusercontent.com/u/20924347?v=3","gravatar_id":"","url":"https://api.github.com/users/amnhh","html_url":"https://github.com/amnhh","followers_url":"https://api.github.com/users/amnhh/followers","following_url":"https://api.github.com/users/amnhh/following{/other_user}","gists_url":"https://api.github.com/users/amnhh/gists{/gist_id}","starred_url":"https://api.github.com/users/amnhh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amnhh/subscriptions","organizations_url":"https://api.github.com/users/amnhh/orgs","repos_url":"https://api.github.com/users/amnhh/repos","events_url":"https://api.github.com/users/amnhh/events{/privacy}","received_events_url":"https://api.github.com/users/amnhh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2017-05-09T07:17:58Z","updated_at":"2017-05-09T09:09:06Z","closed_at":null,"body":"这里说是读书笔记, 其实就是通过读这本书了解到的以前没有注意到的知识点, 下面会做一个总结。\r\n\r\n第一次阅读，主要让我搞清楚了这些概念 : \r\n\r\n1. 伪类叠加\r\n2. 子选择器 + 子选择器 `polyfill`\r\n3. 选择器的特殊性 + 选择器规则\r\n4. `link` 和 `@import` 的区别\r\n5. 为什么要从多个站点存放资源\r\n6. 模块划分方式与注释方式的学习\r\n7. 标准盒模型和 `border-box` 盒模型\r\n8. 外边距叠加的场景和处理办法\r\n9. `z-index` 的适用场景与失效场景\r\n10. `relative`, `absolute`, `fixed` 都是干啥的\r\n11. 左侧定宽，右侧自适应 + 左右定宽，中间自适应\r\n12. `bfc` 的概念\r\n13. 去除浮动的几种方式                                                                            \r\n14. `visibility` 属性\r\n15. `background-color` 的 `rgba` 与 `opacity` 有什么区别\r\n16. `ie` 的特殊注释方式 => 为了引入 `ie` 兼容样式\r\n17. 隐藏文字的方式 -> 主要是因为阅读器会忽略 `display : none` 和 `visibility : hidden` 的元素\r\n18. 为什么默认情况下链接是有下划线的\r\n19. `<a>` 标签的伪类的样式定义顺序\r\n20. 为 `hash` 目标设置样式 => `:target`\r\n21. `list-style` 和 `list-style-type`\r\n22. 浮动布局\r\n\r\n下面的 `comment` 会分别来说下."},"comment":{"url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/comments/300106217","html_url":"https://github.com/amnhh/amnhh.github.io/issues/20#issuecomment-300106217","issue_url":"https://api.github.com/repos/amnhh/amnhh.github.io/issues/20","id":300106217,"user":{"login":"amnhh","id":20924347,"avatar_url":"https://avatars1.githubusercontent.com/u/20924347?v=3","gravatar_id":"","url":"https://api.github.com/users/amnhh","html_url":"https://github.com/amnhh","followers_url":"https://api.github.com/users/amnhh/followers","following_url":"https://api.github.com/users/amnhh/following{/other_user}","gists_url":"https://api.github.com/users/amnhh/gists{/gist_id}","starred_url":"https://api.github.com/users/amnhh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/amnhh/subscriptions","organizations_url":"https://api.github.com/users/amnhh/orgs","repos_url":"https://api.github.com/users/amnhh/repos","events_url":"https://api.github.com/users/amnhh/events{/privacy}","received_events_url":"https://api.github.com/users/amnhh/received_events","type":"User","site_admin":false},"created_at":"2017-05-09T09:09:06Z","updated_at":"2017-05-09T09:09:06Z","body":"#### 6. 模块划分方式和注释方式\r\n\r\n在一个站有很多页面的时候, 书中推荐在 `<body>` 元素上添加唯一 `class`\r\n\r\n```html\r\n\r\n<!-- index.html -->\r\n<body class=\"index-page\">\r\n  <!-- code there -->\r\n</body>\r\n\r\n<!-- list.html -->\r\n<body class=\"list-page\">\r\n  <!-- code there -->\r\n</body>\r\n\r\n```\r\n\r\n后续的样式选择, 如果是这些页面独有的，就可以直接 : \r\n\r\n```css\r\n/* index 页面的警告 */\r\n.index-page p.error {\r\n  color: red;\r\n}\r\n\r\n/* list 页面的警告 */\r\n.list-page p.error {\r\n  color: green;\r\n}\r\n```\r\n\r\n还有就是注释的方式, 书中推荐这样写注释 :\r\n\r\n```css\r\n/* @group index-page */\r\n\r\n/* @group list-page */\r\n```\r\n\r\n觉得这样写比较清晰的, 可以学习一哈...\r\n\r\n#### 7. 标准盒模型和 IE 盒模型\r\n\r\n这里首先明确一个概念, `width` 和 `height` 指的是内容区域的宽度和高度, 也就是 `content` 的宽度和高度\r\n\r\n而 `IE` 盒模型和标准盒模型的区别就在这个 `content` 上\r\n\r\n假设最后内容占据的宽度为 `finalWindth`, 高度为 `finalHeight`, 则标准盒模型的计算为(这里只以宽度为例) :\r\n\r\n```\r\nfinalWidth = marginLeft + borderLeft + paddingLeft + width + paddingRight + borderRight + marginRight;\r\n```\r\n\r\n而 `IE` 盒模型的计算为 ：\r\n\r\n```\r\nfinalWidth = marginLeft + width + marginRight;\r\n```\r\n\r\n所以就是说, 我们给 `IE` 盒模型设置 `width` 之后, 再给他设置 `padding`, 实际上是会在 `width` 里面去计算，而不是标准盒模型里面的，设置了 `width` 之后设置 `padding` 会导致 `finalWidth` 增大\r\n\r\n#### 8. 外边距叠加的场景\r\n\r\n场景其实总结起来就是一句话, 就是两个或者更多的垂直边距相遇的时候, 将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中较大的那个。\r\n\r\n有以下场景 ：\r\n\r\n###### (1) 一个元素出现在另一个元素上面, 上面元素的 `margin-bottom` 和下面元素的 `margin-top` 会发生叠加\r\n\r\n如下面的代码 :\r\n\r\n```html\r\n<style>\r\n  #div1 {\r\n    width: 100px;\r\n    height: 100px;\r\n\r\n    margin-bottom: 200px;\r\n\r\n    background: red;\r\n  }\r\n\r\n  #div2 {\r\n    width: 100px;\r\n    height: 100px;\r\n\r\n    margin-top: 100px;\r\n\r\n    background: green;\r\n  }\r\n</style>\r\n\r\n<div id=\"div1\"></div>\r\n<div id=\"div2\"></div>\r\n```\r\n\r\n最终两个元素叠加后的边距为 `200px` \r\n\r\n这种场景下的解决办法，都包含在这句话中 :\r\n\r\n```\r\n浮动元素, inline-block 元素, 绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠\r\n```\r\n\r\n所以 `float : left/right`, `display : inline-block` 和 `position : absolute` 为解决办法\r\n\r\n亲测有效。。上面的例子加上 `float : left` 的话, 就已经不叠加了\r\n\r\n###### (2) 一个元素包含在另一个元素里面的时候，他们的顶和地外边距也会叠加\r\n\r\n简单来一个场景 ：\r\n\r\n```html\r\n<style>\r\n  #div1 {\r\n    width: 1000px;\r\n    height: 1000px;\r\n\r\n    margin-top: 200px;\r\n\r\n    background: red;\r\n  }\r\n\r\n  #div2 {\r\n    width: 100px;\r\n    height: 100px;\r\n\r\n    margin-top: 100px;\r\n\r\n    background: green;\r\n  }\r\n</style>\r\n\r\n<div id=\"div1\">\r\n  <div id=\"div2\"></div>\r\n</div>\r\n```\r\n\r\n最后的结果就是, `div2` 完全贴在了 `div1` 的最上边, 而我们的本意是 `div2` 会距离 `div1` 顶部 `100px` 来着...\r\n\r\n出现这种情况的原因, 就是 `div2` 和 `div1` 的 `margin-top` 出现了叠加的情况。\r\n\r\n解决办法也是一句话 ：\r\n\r\n```\r\n创建了块级格式化上下文的元素，不和他的自己发生 margin 层叠\r\n```\r\n\r\n也就是说要触发一次 `BFC`\r\n\r\n可以使用 `float`, `overflow`, `dispaly : table-cell/table-caption/inline-block`, `position` 触发 `BFC`\r\n\r\n#### 9. z-index 的使用场景及失效场景\r\n\r\n我们一般使用 `z-index` 来控制定位元素的层叠顺序, `z-index` 的值越高，表示其优先级越高。\r\n\r\n首先需要明确的是, `z-index` 只对定位元素有效。 => 必须设置了 `position` 属性\r\n\r\n失效的情况也都大同小异\r\n\r\n1. 设置 `z-index` 的元素没有设置定位属性\r\n2. 比较的不是同一层级的, 父级的 `z-index` 比其他元素低，而想在自己上设置高的优先级以盖过父级的同级元素\r\n\r\n\r\n#### 10. relative, absolute, fixed 是干啥的\r\n\r\n首先可以理解为三者都会脱离文档流。 是的, 我觉得 `relative` 也会脱离文档流！\r\n\r\n其次说下他们都相对于谁...\r\n\r\n- relative : 相对于本身位于文档流的位置, 但是实际的展示是受 `left`, `top` 这些属性控制的 (PS:我之前一直以为 `left` 和 `top` 只可以附加在 `absolute` 和 `fixed` 上...)\r\n- absolute : 相对于第一个设置了定位属性的父级\r\n- fixed : 相对于 `viewport` 视窗"}}
{"actor":{"display_login":"amnhh"}}