谈谈你对CSS盒模型的认识
CSS盒模型
标准模型
IE模型
弹性盒模型
多列盒模型
标准模型和IE模型的区别
宽度和高度的计算方式不同。
- 标准模型的宽度和高度只是content部分
- IE模型的宽度和高度包含border padding 和content。
CSS是如果设置IE模型和标准模型
box-sizing:content-box; //标准盒模型 浏览器默认的盒模型
box-sizing:border-box; //IE盒模型
JS如何设置获取盒模型对应的宽和高
取内联样式的宽和高
- dom.style.width
- dom.style.height
IE中实时获取元素的宽和高
- dom.currentStyle.width/height
现代浏览器获取元素宽和高
- window.getComputedStyle(dom).width/height
很少有人知道的获取方式
- document.getElementById('new_header').getBoundingClientRect().width/height
------- 根据盒模型解释边距重叠-----------
BFC：块级格式化上下文
BFC的特点/原理
- BFC在页面上是一个容器，外面的元素不会影响里面的
- 同一个BFC中垂直方向上边距会发生重叠->解决垂直margin重叠问题
- BFC的元素不会与浮动的box发生重叠->解决左右两列布局中，左侧浮动，右侧不浮动，左右重叠的问题
- 计算BFC的高度的时候，浮动元素也会参与计算->解决浮动元素父级高度塌陷的问题
如何创建BFC
- float不为none
- position：fixed absolute
- display:inline-block,table-cell,table-caption
- overflow不为visible
BFC使用场景
- 解决垂直margin重叠问题
- 解决左右两列布局中，左侧浮动，右侧不浮动，左右重叠的问题
- 解决浮动元素父级高度塌陷的问题
CSS的优先级
- important > style > id > class/属性/伪类 > 元素/伪元素 > 其他
伪元素和伪类的区别
- 伪元素是真的有元素
- 伪类是表示状态
- 伪元素用双冒号，伪类是单冒号
HTML元素的嵌套关系
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素
- 行内元素一般不能包含块级别元素
- html5中
a可以包含div元素
HTML5有什么变化
- 新的语义化元素
- 表单增强
- 新的api（离线 音频 视频 图形 实时通信 本地存储 设备能力）
- 分类和嵌套变更
- em和i的区别：em是语义化的标签 表示强调 i是纯样式的标签，表示斜体 html5 i不推荐使用，一般用作图标
doctype是什么
- DTD是告诉浏览器我是什么文档类型，浏览器根据DTD判断用什么引擎进行解析
- doctype是用来声明DTD的
常见的doctype有哪些
- html5
<!DCOTYPE html>
- html4.01的严格模式
- html4.01的传统模式
哪些元素可以自闭和
- 表单元素 input
- 图片 img
- hr br
- meat link
html和dom的关系
- HTML是“死”的，实际是字符串，所谓的结构是看起来有结构
- DOM是通过浏览器解析HTML得来的树形结构
- JS维护的是DOM不是HTML
propery和attribute的区别
- attribute是“死”的
- property是“活”的
内联元素的间隙问题
什么叫标签语义化
合理的标签做合适的事情
- 平时写的代码都是语义化话的代码
- 标题就写h1-h5
- 文章就写article
- 段落就用p标签
html的发展史
- 后台来写html,table标签布局
- 美工阶段 div+css布局不够语义化
- 前端阶段 h1 p article比较专业
好处
- 开发者容易理解
- 机器容易理解（搜索 读屏）
- 有助于SEO
都有哪几类标签
块级元素block
divph1-h6ulliolarticalsectionasideheaderfootermainnav
行内元素inline
spana
行内块元素 inline-block
selectinputimage
这三类标签有什么区别
- 块级别元素独占一行，可以设置宽高
- 行内元素不能独占一行，默认在同一行排列，不能设置宽高
- 行内块元素同时具备行内元素和块级元素的特点
这三类标签怎么转换
通过设置display属性进行转换，display:block/inline/inline-block
display有哪些值
- display:block
- display:inline
- display:inline-block
- display:none
- display:flex
- display:table/table-cell/table-row
- display:grid
display:none是让元素元素隐藏，那么除了display:none还有什么方法可以让元素隐藏
- display:none
- visibility:hidden
display:none和visibility:hidden有什么区别
display:none元素不会占据原来的位置，visibility:hidden元素还会占据原来的位子
- opacity：0
opacity：0的兼容处理：ie678不兼容怎么办
使用filter
filter除了能设置透明度还能做什么
- 做滤镜 生成模糊度 反色
flex
- 什么时候会用到flex
- 除了这种方式能居中还有哪些
- 响应式布局还可以做什么
- 都有哪些盒模型
让一个div消失在视野中，发挥想象力，有哪些办法
说一下，你觉得自己擅长哪些
说一下，这个需求怎么做
掌握盒子水平垂直中的五大方案
- 定位：三种
- display:flex
- javascript
- display:table-cell
1.这种问题在我之前的项目中是非常常见的，刚开始我只用了哪种，后来随着CSS的兴起，flex这种方式非常方便，后来通过看掘金看博客，发现XX方案也可以实现
布局
三栏布局，左右固定，中间自适应
- 高度已知
浮动
清除浮动的方法
应用在包含浮动元素的父级元素上
- 空div
div{clear:both;}
- 创建BFC:
overflow:auto/hidden
float:left/right
- 伪元素
.clearfix:after{
content:'';
display:block;
clear:both;
height:0;????
overflow:hidden;????
}
.clearfix:after{
content:'';
clear:both;
display:table;
}
定位
flex
表格布局
网格布局
圣杯布局
左右宽度固定，中间自适应
- 圣杯布局
- 双飞翼布局
- 左右固定中间自适应布局
- calc
- flex
- 定位
移动端响应式布局三大方案
media
rem
flex
vh /vw
请说明z-index的工作原理，适用范围
- 文档流
- 定位
谈谈你对HTML5的理解
如何使一个div中的文字垂直居中，且该文字的大小根据屏幕大小自适应
不考虑其他因素，下面哪里渲染性能比较高
清除浮动的方法
增加空标签
创建BFC
浮动
伪元素
conent : '';
如何美化checkbox
- label[for] + id
- 隐藏原生的input
- :checked+label
