发表于： 2017-04-15 13:23:07
1 549
今天完成任务1，总结下：
一、布局
刚开始设 html 和 body 元素宽度都为100%，然后给body一个 padding 值，效果达到了，但是仔细一看出现了横向的滚动条。
原来百分比单位是相对于父元素的 content-box计算。
后来经过调整父元素的 margin 和 padding值都为 0，宽度100%，调整子元素的 margin 值达到效果。
二、清除浮动
用 after 伪元素清除浮动，一开始怎么也没效果，父元素高度塌陷。后来才知道 应该用父元素的 after元素，而我用的最后一个子元素的 after 元素。
三、viewport
知道了 CSS 像素和物理像素
Viewport : 字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出)这样利于移动 web 站点跨设备显示效果基本一致.
布局视口（layout viewport）、视觉视口（visual viewport）没彻底弄清楚，只知道这么写：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
返回列表
评论