{"action":"created","issue":{"url":"https://api.github.com/repos/zliuwd/learningnote/issues/28","repository_url":"https://api.github.com/repos/zliuwd/learningnote","labels_url":"https://api.github.com/repos/zliuwd/learningnote/issues/28/labels{/name}","comments_url":"https://api.github.com/repos/zliuwd/learningnote/issues/28/comments","events_url":"https://api.github.com/repos/zliuwd/learningnote/issues/28/events","html_url":"https://github.com/zliuwd/learningnote/issues/28","id":225486979,"number":28,"title":"css 知识查缺补漏","user":{"login":"zliuwd","id":25130704,"avatar_url":"https://avatars0.githubusercontent.com/u/25130704?v=4","gravatar_id":"","url":"https://api.github.com/users/zliuwd","html_url":"https://github.com/zliuwd","followers_url":"https://api.github.com/users/zliuwd/followers","following_url":"https://api.github.com/users/zliuwd/following{/other_user}","gists_url":"https://api.github.com/users/zliuwd/gists{/gist_id}","starred_url":"https://api.github.com/users/zliuwd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zliuwd/subscriptions","organizations_url":"https://api.github.com/users/zliuwd/orgs","repos_url":"https://api.github.com/users/zliuwd/repos","events_url":"https://api.github.com/users/zliuwd/events{/privacy}","received_events_url":"https://api.github.com/users/zliuwd/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":23,"created_at":"2017-05-01T18:09:03Z","updated_at":"2018-04-22T00:12:13Z","closed_at":null,"author_association":"OWNER","body":"因为用百分数来表示element的大小，你必须设置其父级element的大小为100%，例如：\r\n```\r\nhtml, body { height: 100%; }\r\n    \r\n.sidebar {\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n```\r\nvw & vh: view port with or height:也就是说根据你的窗口来决定element的高度与宽度，通常用来定义字体，但是有一个非常显著的问题就是，可能会overflow，这是因为在windows操作系统中，100vh or 100vw是不包含scroll bar的，在os中问题不大。这时候你可以选择 overflow的属性为hide来解决，或者定义一个函数来解决：\r\n```\r\nvar element = document.documentElement;\r\n  \r\nif(element.scrollHeight > element.clientHeight) {\r\n  // Overflow detected; force scroll bar\r\n  element.style.overflow = 'scrollbar';\r\n} else {\r\n  // No overflow detected; prevent scroll bar\r\n  element.style.overflow = 'hidden';\r\n}\r\n```\r\n详细请见：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/"},"comment":{"url":"https://api.github.com/repos/zliuwd/learningnote/issues/comments/383342926","html_url":"https://github.com/zliuwd/learningnote/issues/28#issuecomment-383342926","issue_url":"https://api.github.com/repos/zliuwd/learningnote/issues/28","id":383342926,"user":{"login":"zliuwd","id":25130704,"avatar_url":"https://avatars0.githubusercontent.com/u/25130704?v=4","gravatar_id":"","url":"https://api.github.com/users/zliuwd","html_url":"https://github.com/zliuwd","followers_url":"https://api.github.com/users/zliuwd/followers","following_url":"https://api.github.com/users/zliuwd/following{/other_user}","gists_url":"https://api.github.com/users/zliuwd/gists{/gist_id}","starred_url":"https://api.github.com/users/zliuwd/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zliuwd/subscriptions","organizations_url":"https://api.github.com/users/zliuwd/orgs","repos_url":"https://api.github.com/users/zliuwd/repos","events_url":"https://api.github.com/users/zliuwd/events{/privacy}","received_events_url":"https://api.github.com/users/zliuwd/received_events","type":"User","site_admin":false},"created_at":"2018-04-22T00:12:13Z","updated_at":"2018-04-22T00:12:13Z","author_association":"OWNER","body":"# 使用checkbox来制作toggle标签\r\n## html:\r\n```\r\n<label for=\"toggle-1\">I'm a toggle</label>\r\n<input type=\"checkbox\" id=\"toggle-1\">\r\n<div>I'm controlled by toggle. No JavaScript!</div>\r\n```\r\n## css:\r\n```\r\n/* Checkbox Hack */\r\n\r\ninput[type=checkbox] {\r\n   position: absolute;\r\n   top: -9999px;\r\n   left: -9999px;\r\n}\r\nlabel { \r\n  -webkit-appearance: push-button;\r\n  -moz-appearance: button; \r\n  display: inline-block;\r\n  margin: 60px 0 10px 0;\r\n  cursor: pointer;\r\n}\r\n\r\n/* Default State */\r\ndiv {\r\n   background: green;\r\n   width: 400px;\r\n   height: 100px;\r\n   line-height: 100px;\r\n   color: white;\r\n   text-align: center;\r\n}\r\n\r\n/* Toggled State */\r\ninput[type=checkbox]:checked ~ div {\r\n   background: red;\r\n   display:none;\r\n}\r\n```"}}
{"actor":{"display_login":"zliuwd"}}