CSS重点
布局（1）
盒子模型的宽度如何计算
offsetWidth = 内容宽度 + 内边距 + 边框 ，不包含外边距。
如果加了 box-sizing: border-box; 那么设置的width就是包含 内容宽度 + 外边距 + 边框的宽度
margin纵向重叠的问题
例如：
margin负值的问题
margin-top 和 margin-left 负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移动，自身不受影响
布局（2）
BFC的理解和应用
Block format context, 即块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成 BFC 的常见条件：
1、float不是none；
2、position是absolute或者fixed；
3、overflow不是visible
BFC的常见用途：清除浮动
float布局的问题
手写clearfix（主要是 clear: both）
.clearfix::after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* 兼容 IE 低版本需要，可不写 */
}
圣杯布局和双飞翼布局的目的：
1、三栏布局，中间一栏最先加载和渲染（内容最重要）
2、两侧内容固定，中间内容随着宽度自适应
3、一般用于PC网页
圣杯布局和双飞翼布局的技术总结：
1、使用float布局；
2、两侧使用margin负值，以便和中间内容横向重叠；
3、防止中间内容被两侧覆盖，可以用padding或者margin方式来实现；
flex的问题
flex-direction：主轴方向
justify-content：水平居中
align-items： 垂直居中
flex-wrap： 是否换行
align-self : 子元素在交叉轴（也就是副轴）的对齐方式
CSS定位
absolute和relative 分别依据什么定位？
relative依据自身定位
absolute依据最近一层的定位元素定位；
居中对齐有哪些实现方式？
flex垂直居中对齐
position定位，top和left各50%，再用translate减去自身宽高度的一半
文字居中：text-align: center; 文字高度居中：line-height 与 height 保持一致； block元素水平居中： margin: auto；等等 ...
CSS图文样式
line-height如何继承
1、写具体数据，如： 30px，则继承该值；
2、写比例，如 2 或者 1.5，则继承该比例；
3、写百分比，如200%，则继承计算出来的值（考点）；
例如： body{ font-size: 20px; line-height: 200% }; p { font-size: 16px }; <body> <p></p> </body>，问 p 标签的line-height是多少： 40px
css响应式
rem：是一个长度单位，相对根元素（html）,常用于响应式布局
响应式布局的常用方案：
1、首先通过媒体查询（media-query），根据不同的屏幕宽度设置根元素 font-size; 例如：html { font-size: 20px; }
2、rem，基于设置的根元素的显贵单位；
或者可以直接在页面加载之初，获取屏幕宽度，然后通过计算，动态设置HTML的根元素font-size；（个人认为比较实用）
vw与vh： vm是视口宽度，vh为视口高度；都分为 100 份，1vh = 1 / 100视口高度；
vmax 取两者最大值，vmin 取两者最小值；（两者指的是宽度和高度的意思）
window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body高度
伪类和伪元素的区别
常用伪类 伪类 :link :hover 伪元素 ::before ::after
可以同时使用多个伪类，但是只能使用一个伪元素
浙公网安备 33010602011771号