前端基础知识
HTML
1、对语义化的理解
- 对开发者友好，让人更容易读懂，利于代码可读性
- 对机器友好，让搜索引擎更容易读懂，利于seo
、
2、html5新增的元素
- 新增localstorage，sessionstorage。localstorage存在本地，sessionstorage关闭页面时会被清除，大小为5MB
- 更好的多媒体支持，
- 拖放；提供ondragstart，ondragover，ondrop等方法
CSS
css题目
1、盒子模型
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子的宽度和高度的计算方式由box-sizing属性控制
标准盒子模型：content-box（默认值）盒子的宽度 = width + padding + border + margin
IE盒子模型：border-box，宽高包括content和padding还有border，内容的宽度由width - (padding + border ) 才可以得到
2、BFC
BFC块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。计算BFC的高度时，浮动元素也参与计算
触发条件：
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素
BFC布局规则: - 浮动的元素会被父级计算高度(父级元素触发了BFC)
- 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
- margin不会传递给父级(父级触发BFC)
- 属于同一个BFC的两个相邻元素上下margin会重叠
可以解决的问题 - 清除浮动
- 垂直外边距重叠问题
- 自适用两列布局
什么是BFC？看这一篇就够了
3、两栏、三栏布局
两栏布局：左侧固定，右侧自适应
flex:
.container{
display: flex;
}
.left{
width: 150px;
height: 600px;
background-color: black;
}
.right{
flex: 1;
background-color: brown;
height: 600px;
三栏布局：
.container{
display: flex;
}
.left{
width: 150px;
height: 600px;
background-color: black;
}
.main{
flex:1;
background-color: brown;
height: 600px;
}
.right{
width: 150px;
height: 600px;
background-color: black;
4、css实现三角形、扇形
三角形：
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
扇形：
原理其实和三角形一模一样，只是盒子为圆形
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
border-radius: 50%;
}
5、css选择器权重
- !important
- 行内样式
- id选择器(#myid)
- 类选择器(.myclassname)
- 标签选择器(div,h1,p)
- 子选择器(ul < li)
- 后代选择器(li a)
- 伪类选择(a:hover,li:nth-child)
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。
6、css响应式
1）rem
function refreshRem() {
var docEl = doc.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
2）使用第三方插件pxtorem、px2rem等结合rem，将px转化为rem
7、css布局有哪些
flex布局：
Flex 意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
Grid 布局：
网格是最强大的 CSS 布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。可以说是flex布局的升级版。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
Table 布局：
table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。
标签与js的对应:
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
8、css哪些属性可以继承
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse
9、伪类、伪元素
伪类的分类：状态伪类和结构性伪类
常见的状态伪类主要包括：
- :link 应用于未被访问过的链接；
- :hover 应用于鼠标悬停到的元素；
- :active 应用于被激活的元素；
- :visited 应用于被访问过的链接，与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
常见的结构性伪类包括：
- :first-child 选择某个元素的第一个子元素；
- :last-child 选择某个元素的最后一个子元素；
- :nth-child() 选择某个元素的一个或多个特定的子元素；
- :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
- :nth-of-type() 选择指定的元素；
- :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
- :first-of-type 选择一个上级元素下的第一个同类子元素；
- :last-of-type 选择一个上级元素的最后一个同类子元素；
- :only-child 选择的元素是它的父元素的唯一一个子元素；
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :empty 选择的元素里面没有任何内容。可以用于空值提醒等
常见的伪元素选择器（伪类一个: 伪元素两个::） - ::first-letter 选择元素文本的第一个字（母）。
- ::first-line 选择元素文本的第一行。
- ::before 在元素内容的最前面添加新内容。
- ::after 在元素内容的最后面添加新内容。
- ::selection匹配用户被用户选中或者处于高亮状态的部分
- ::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效10、css3新特性
10、CSS3的新特性大致分为以下六大类
- CSS3选择器
- CSS3边框与圆角
- CSS3背景与渐变；background:lineargradient()
- CSS3过渡；transition
- CSS3变换；rotate()旋转，translate()平移，scale( )缩放
- CSS3动画；animation属性
11、移动端1px实现
为什么css的1px不等于设备的1px?
当前移动设备屏幕的像素密度越来越高，手机屏幕尺寸没有发生变化，但屏幕的分辨率却提高了一倍，即同样大小的屏幕上，像素多了一倍。那么我们获取到的 CSS 像素就不是真实的物理像素点了，于是便有了设备像素比dpr（设备像素/css像素）的概念。由于前端代码中的使用的是 CSS 像素，手机会根据 dpr 换算成实际的物理像素大小来渲染页面。比如 iPhone6 的设备像素比 dpr = 2 ，相当于一个 CSS 像素等于两个物理像素，即 1px 由 2个物理像素点组成。
主要有两个比较适合的方案： - 使用伪元素 + CSS3``缩放的方式
.line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 1px;
background: #b3b4b8;
transform: scale(0.5);
transform-origin: 0 0; // 该属性允许改变被转换元素的位置, 默认值为50% 50% 0
}
该方案的优点在于，针对老项目使用缩放的形式可以快速实现 1px 的效果。
- 使用 动态 viewport + rem 布局 的方式（即 Flexible 实现方案）
建议先理解viewport的概念会更清晰
viewport 深入理解
老项目修改代价过大，只适用于新项目。（还是有点不理解，需要回过头再复习一次）
最后一次探究1px
12、px、em、rem的区别
px（像素，相对于显示器屏幕分辨率而言）
em（相对当前元素内文本的字体尺寸，会继承父元素大小）
rem （相对HTML根元素，最常用的单位）
13、清除浮动
清除浮动主要是为了解决子元素浮动父元素高度会塌陷为零的问题。
1）、给父元素content添加一个伪类
.content::after {
content: " ";
display: block;
clear: both;
}
这个方法比较清晰，也提高了易读性。推荐这个。
2）、
给父元素添加一个夯余元素
缺点：添加了一个无关元素，代码阅读受影响，不符合语义化
3）、父元素也添加浮动
.content {
background-color: black;
width: 100%;
float: left;
}
缺点：虽然可以解决问题，但是后面要添加有不需要浮动的子元素，则影响其显示。
4）、给父元素添加overflow: hidden;
.content {
background-color: black;
border: 2px solid red;
overflow: hidden;
}
缺点：一旦包含非浮动的子元素，则会影响其显示。
14、link和@import的区别
- link属于html标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css提供的。
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
- 兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
- 权重问题:@import的权重要高于link。
- DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式