HTML/CSS

122px

offsetWidth = 内容宽度 + 内边距 + 边框  （无外边距）

如果让 offsetWidth 等于 100px，改怎么做？<br>加上 box-sizing: border-box; offsetWidth 值就是内容宽度

15px

<ul><li>相邻元素的 margin-top 和 margin-bottom 会发生重叠</li><li>空白内容 &lt;p&gt;&lt;/p&gt; 也会重叠</li></ul>

<ul><li>margin-top 负值，元素向上移动</li><li>margin-left 负值，元素向左移动</li><li>margin-right 负值，右侧元素左移，自身不受影响</li><li>margin-bottom 负值，下方元素上移，自身不受影响</li></ul>

<span style="font-size: inherit;">什么是 BFC?<br><ul><li>Blcok Format Context，块级格式化上下文</li><li>一块独立渲染的区域，内部元素的渲染不会影响到边界以外的元素</li></ul></span>

形成 BFC 的常见条件：<br><ul><li>float 不是 none </li><li>position 是 absolute 或 fixed</li><li>overflow 不是 visible</li><li>display 是 flex 或 inline-block等</li></ul>

BFC 的常见应用<br><ul><li>清除浮动（为父元素设置 overflow: hidden;）</li></ul>

圣杯布局和双飞翼布局的目的：<br><ul><li>三栏布局，中间一栏最先加载和渲染（内容最重要）<br></li><li>两侧内容固定，中间内容随着屏幕宽度自适应<br></li><li>一般用于 PC 网页</li></ul>

圣杯布局

双飞翼布局

圣杯布局和双飞翼布局的技术总结：<br><ul><li>使用 float 布局</li><li>两侧使用 margin 负值，以便和中间内容横向重叠</li><li>防止中间内容被两侧覆盖，一个用 padding 一个用 margin</li></ul>

<ul><li><span style="font-size: inherit;">flex-direction 主轴方向（row | row-reverse | column | column-reverse）</span></li><li><span style="font-size: inherit;">flex-wrap 换行（nowrap | wrap | wrap-reverse）</span></li><li><span style="font-size: inherit;">flex-flow</span>&nbsp;flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap（&lt;flex-direction&gt; || &lt;flex-wrap&gt;）</li><li>justify-content 主轴对齐方式（flex-start | flex-end | center | space-between | space-around）</li><li>align-items 交叉轴对齐方式（flex-start | flex-end | center | baseline | stretch）</li><li><span style="font-size: inherit;">align-self 子元素在交叉轴的对齐方式（auto | flex-start | flex-end | center | baseline | stretch）</span></li></ul>

设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

阮一峰 Flex 布局教程：语法篇（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

定位元素：bsolute relative fixed 直到 body

<ul><li>inline 元素：text-align: center;</li><li>block 元素：margin: auto;</li><li>absolute 元素：left 50% + margin-left 负值（负值为子元素宽度的一半，需要知道子元素的宽高）</li></ul>

<span style="font-size: inherit;">inline 元素：line-height = height</span><br>

absolute 元素：<br><ul><li>top 50% + margin-top 负值（负值为子元素高度的一半，需要知道子元素的宽高）<br></li><li><span style="font-size: inherit;">left top 50% + transform: translate(-50%, -50%);（无需知道子元素宽高，但需要注意浏览器兼容性）</span></li><li><span style="font-size: inherit;">top right bottom left = 0 + margin: auto;（终极方案，666）</span></li></ul>

p 标签行高40px

<ul><li>window.screen.height // 屏幕高度</li><li>window.innerHeight // 网页视口高度（去掉浏览器头尾，网页呈现的高度）</li><li>document.body.clientHeight // body 高度</li></ul>

<ul><li><span style="font-size: inherit;">vw 网页视口宽度的1%</span></li><li><span style="font-size: inherit;">vh 网页视口高度的1%<br></span></li><li>vmax 取两者最大值；vmin 取两者最小值</li></ul>

<ul><li>window.innerHeight === 100vh</li><li>window.innerWidth === 100vw</li></ul>