html、css学习总结
html5、css3有哪些新特性？
语义化更好的内容标签（header,nav,footer,aside,article,section）
localStorage和sessionStorage
拖拽释放(Drag and drop) API
音频、视频 API(audio,video)
画布(Canvas) API
地理(Geolocation) API
1.什么是标签语义化？
答：合理的标签干合适的事情，便于开发者阅读，同时让浏览器更好的读懂代码
2.都有哪些标签，都是啥意思？
答：块级标签（display：block）:div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、 th、tr、tfoot
行内标签（display：inline）：a、span、small、strong、em、i、code
行内块级标签（display：inline-block）：img、input
3.块级标签和行内标签有什么区别？
答：1.相邻的行内标签会在同一行排列；而各个块级标签总是独占一行，垂直向下排列；
2.行内标签不可以设置宽高，宽度高度随行内文本内容的变化而变化，但是可以设置行高（line-height），同时设置外边距（margin）上下无效，左右有效，内填充 （padding）上下无效，左右有效；块级标签可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制；
3.块级标签可以包含行内标签和块级标签；行内标签不能包含块级标签，只能容纳文本或者其他行内标签。
4.如何转换？
答：通过修改display属性值来切换块级标签（display：block）和行内标签（display：inline）以及行内块级标签（display：inline-block）。
5.display除了这几个值还有哪些？
答：display还有none（隐藏dom）、flex（弹性）、table（表）
6.display：none
让元素隐藏，还可以怎么做？
答：还有visibility：hidden、opacity：0
display：none和visibility：hidden的区别？
答：visibility: hidden是让元素隐藏，但是位置还是占着，display：none则是在网页中不占任何的位置。
opacity在IE678下的兼容处理？
答：兼容用fliter
filter还能做哪些事情？
答：filter滤镜：对比度、饱和度、阴影、色相、透明度
Rgba()和 opacity 的透明效果有什么不同？
opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。
7.display：flex
项目中什么时候用到了flex？
答：弹性布局、div水平垂直居中（justify-content: center、align-items:center）
flex属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items
除了这种方式居中还有哪些？
答：1.绝对定位（position：absolute）、偏移量为0（top、right、bottom、left）、margin：auto 缺点：定位元素必须要有宽高
2.绝对定位（position：absolute）、上左偏移量50%（top、left）、transform: translate(-50%,-50%) 缺点：有兼容性问题
3.绝对定位（position：absolute）、上左偏移量50%（top、left）、上左外边距各负高宽的一半（margin） 缺点：定位元素要考虑宽高
4.js实现就是模拟css写样式（子元素绝对定位，获取父元素和子元素宽和高的差值的一半，得到左和上的偏移量）
5.display:table-cell、vertical-align：middle、text-align：center（控制文本居中的方法） 缺点：父级必须有固定宽高
都有哪些盒子模型？
答：标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列布局盒模型，使用box-sizing转换
8.布局方案有哪些？
答：左右固定、中间自适应
圣杯布局：1.给父元素分别设左右内边距，内边距距离为左右两个固定盒子的宽
2.给中间自适应盒子100%宽度
3.三个盒子都向左浮动
4.左边固定盒子设置左外边距-100%，设置相对定位，左偏移量为自身宽度
5.右边盒子设置右外边距为自身宽度的负数
双飞翼布局：1.给中间自适应盒子100%宽度
2.中间自适应盒子的子元素设置左右外边距分别为两个固定盒子的宽度
3.三个盒子都向左浮动
4.左边固定盒子设置左外边距-100%
5.右边盒子设置右外边距为自身宽度的负数
calc布局:中间盒子宽度设置calc(100%，左右两边盒子宽度之和) 兼容到IE9 css不写表达式，所以不支持这种写法
flex布局：父元素（display:flex、justify-content:space-between）、左右固定子元素（flex：0 0 宽度）、中间自适应子元素（flex：1）
定位布局：父元素相对定位，中间自适应盒子设置左右外边距分别为两个固定盒子的宽度，左右固定盒子绝对定位，top:0，左固定盒子left:0,右固定盒子right：0
9.移动端响应式布局开发有哪些？
答：media、rem、flex、vh/vw
10.说下rem,em,px的区别？
答：一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，那么进行任何元素的设置，都需要知道父元素的字体大小，而rem是相对于根元素html的字体大小进行设置的，更为方便。
11.请说明z-index的工作原理，适用范围？
答：z-index这个属性控制着元素在z轴上的表现形式，适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
12.什么是BFC？
答：BFC（block formatting context）直译为“块级格式化上下文”，它是一个独立的CSS渲染区域或者说是一个独立的隔离容器，容器内的元素不会影响容器外的元素。浮动（除none）、定位（absolute，fixed）、display、overflow（除visible ）都能形成BFC
13.形成BFC的条件？
答：1、浮动元素，除none以外的值。2、定位元素position（absolute，fixed）。3、display（inline-block,table-cell,table-caption） 4、overflow除visible以外的值
14.文字溢出省略？
答：white-space:nowrap,overflow:hidden,text-overflow:elipsis
15.css中有哪些属性是可以继承的？
答：所有元素可继承（visibility和cursor）、内联元素可继承（line-height、color、font、direction等）、块状元素可继承（text-indent和text-align）
16.说下transform、transition?
答：transform是控制元素变形的一个css属性，transform有4个方法，分别是translate平移、rotate旋转、scale缩放、skew斜切。
transition能让css的某些属性能够在一定时间内平缓的过渡，transition主要包含四个属性值，执行变换的属性，变换延续的时间，变换的速率变化，变换延迟时间
17.CSS 清除浮动的几种方法（至少两种）？
答：1.使用额外标签法（不推荐使用）
2.使用 overflow 清除浮动（不推荐使用）
3.使用伪元素清除浮动(用的最多)
.clearfix:after { content:""; height:0; line-height:0; display:block; clear:both; visibility:hidden; /_将元素隐藏起来_/ 在页面的 clearfix 元素后面添加了一个空的块级元素 （这个元素的高为 0 行高也为 0 并且这个元素清除了浮动） } .clearfix { zoom:1;/_为了兼容 IE6_/ }
18.页面导入样式时，使用 Link 和@Import 有什么区别？
答：Link 属于 html 标签，而@import 是 CSS 中提供的。在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS。
19.移动端 1px 问题的解决办法？
媒体查询 + transfrom
/* 2倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } /* 3倍屏 */ @media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } }
20.设置元素浮动后，该元素的 display 值是什么？
答：自动变成 display:block
21.过渡（transition）与动画（animation）的区别是什么？
transition 可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性
animation 可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
22.css选择器有哪些？
答：id、类、标签、相邻（+）、子（>）、后代（li a）、通配符（*）、属性、伪类（:）、伪元素（::）
23.优先级？
！important > 内联样式>id>类>标签>通配符
24.vw和vh？
vh and vw：相对于视口的高度和宽度的百分比
25.DOM中有几种类型的节点？
文档节点（Document）、元素节点（Element）、属性节点（Attribute）、文本节点（Text）
