CSS布局

盒模型的宽度计算

offsetWidth=（内容宽度+内边距+边框），无外边距（当在样式中使用Box-sizing：border-Box时，设置的width就是包括了内边距和边框的盒子模型的宽度了。offsetWidth（只读属性）

margin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠；空白内容的p也会重叠；重叠后留下大的那个margin值，所以答案是15px

margin负值问题

margin-top/left负值，元素向上/左移动；margin-right/bottom负值，右/下方的元素左/上移，自身不受影响

BFC理解与应用

Block format context，块级格式化上下文；一块独立渲染区域，内部元素的渲染不会影响边界以外的元素。布局中常用

形成BFC的常见条件：float不是none；position不是absolute或fixed；overflow不是visible；display是flex或inline-block等。

作用：清除浮动

float布局

圣杯布局和双飞翼布局：使用float布局；两侧使用margin负值（使盒子向左/右移动），以便和中间内容横向重叠；防止中间内容被两侧覆盖，用padding或者margin方式

手写clearfix

.clearfix:after{
content:'';
diplay:table;
clear:both;
}

flex布局实现一个三点骰子

flex-direction：主轴方向，横向or纵向；justify-content：主轴对齐方式，从开始/结束/居中/两端对齐；align-items；flex-wrap；align-self

CSS定位

absolute和relative定位

absolute相对于带有定位的父级元素定位，如果找不到，就相对于浏览器body定位；relative相对于自身移动

居中对齐

水平居中

inline元素：text-align：center；block元素：margin：auto；absolute元素：left：50%+margin-left负值

垂直居中

inline元素：line-height的值等于height值；absolute元素：top：50%+margin-top负值；absolute元素：transform（-50%，-50%）；absolute元素：top，left，bottom，right=0+margin：auto

line-height如何继承

父元素或body元素写具体值，如30px，则继承该值；写比例，如2/1.5，则继承该比例，则行高为自身的line-height×这个比例（继承再计算）；写百分比，则继承该百分比计算出来的结果（在父级元素中计算出来的那个结果，计算在继承），如上图，答案是40，20×200%

响应式布局

响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

rem是什么

是一个长度单位（相对长度单位，相对于根元素（类似于百分比，根元素的值×rem值），常用于响应式布局）。长度单位还包括px（绝对长度单位，最常用），em（相对长度单位，相对于父元素，不常用）。把rem当成和px一样的单位，用的地方和用途一样。

响应式布局的常用方案

media-query：根据不同的屏幕设置根元素font-size；使用rem去做相应的长度计算，基于根元素的长度单位。

css-响应式-vw/vh

rem的弊端：“阶梯性”。当有多个时，无法针对每一个进行rem的计算。

网页视口尺寸（移动端）：屏幕高度：window.screen.height；网页视口高度：window.innerHeight；body高度：document.body.clientHeight

vh：网页视口高度的1/100；vw：网页视口宽度的1/100；vmax取两者最大值，vmin取两者最小值

总结