html和css

w3c 规范

结构化标准语言
样式标准语言
行为标准语言

h5新增哪些标签呢？

video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header

盒模型

常见的盒模型有w3c盒模型（又名标准盒模型）box-sizing:content-box和IE盒模型（又名怪异盒模型）box-sizing:border-box。
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

css3 新特性

常问：

word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
audio音频
vadio视频
RGBA和透明度

css3 边框

border-radius 圆角
box-shadow 盒子阴影
border-image 边框图片

css3 背景

background-image 背景图片
background-size 背景大小
background-origin 背景图像的位置区域
background-clip 背景剪裁属性是从指定位置开始绘制

BFC

BFC是块级格式化上下文。

计算BFC高度时，浮动元素也会参与计算、
在BFC这个元素垂直方向的边距会发生重叠
BFC的区域不会与浮动元素的box重叠
BFC在页面上是一个独立的容器，其里外的元素不会互相影响

BFC应用:
防止margin重叠
清除内部浮动
自适应两栏布局
防止字体环绕

BFC的生成条件：
根元素
float值不为none
overflow的值不为visible
display的值为inline-block,table-cell,table-caption
position的值为absolute，fixed

弹性盒

display:flex;
align-items:center;
justify-conter:center;

盒模型的种类？

标准盒模型和怪异盒模型

圣杯布局和双飞翼布局

功能相同，布局原理就是：两边固定中间自适应；实现功能方法不相同而已。

常见的伪类选择器

:first-child
:last-child
:focus
:link
:lang
:checked
:hover
:active
:visited
:nth-child(n)
:nth-of-type等

语义化标签及好处

页面结构化，
有利于后期维护，
有利于搜索引擎抓取，

文本处理问题

单行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出

display:-webkit-box !important
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)

css 定位方式有那些？

position 的值为:static,relative,absolute,fixed,sticky

默认定位： position:static

相对定位： position:relative 参照物是自身,不脱离文档流

绝对定位： position:absolute; 参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素进行定位。

固定定位： position:fixed 参照物是可视区窗口，脱离文档流

sticky 元素仅在其父元素内生效.

css 和 js

css 是样式表 js 是动态脚本语言文件后缀名不同

rem 和 em 区别

主要区别就是浏览器根据谁转化成 px 单位, rem 依据的是 html 的 font-size，1rem 等于 16px, em 依据的是父元素的 font-size @media 可以做到响应式布局

元素垂直水平居中

flex

display:flex;
align-item:center;
justify-content:center;

兼容性好，但是需要知道宽高

position:absolute;
left:50%;
top:50%;
margin-left:（+/-）50%;
margin-top:(+/-)50%;

不需要知道宽高，兼容性好，不支持IE7下的浏览器。

 position:absolute;
 top:0
 right:0;
 bottom:0;
 left:0;
 margin:auto;

使用transform:translate，兼容性不好，支持IE9+的浏览器。

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

图片在任意手机端都铺满整个屏幕

background-size:length|percentage|cover|contain;

rem和em的区别

总而言之，就是浏览器把谁转化成“px”
rem 依据的是html的font-size值。1rem=16px
em 依据的是父元素的font-size值。

浏览器内核

Trident IE浏览器
Gecko Firefox浏览器
Webkit Chrome Safari
Blink Chrome Opera

移动端1像素问题

伪元素+scale

.box{
    width:100%;
    height:1px;
    margin:20px 0;
    position:relative;
}
.box::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    height:1px;
    transform:scaleY(0.5);
    transform-origin:0 0;
    background:red;
}

<div class="box"><div>

border-image

div{
    border-width:1px 0px;
    -webkit-border-image:url(xxx.png) 2 0 stretch;
    border-image:url(xxx.png) 2 0 stretch;
}

做移动端开发有没有遇到不兼容的问题?如何解决？

使用背景图来代替img标签

   background:url(../images/icon/all.png) no-repeat center center;
   -webkit-background-size:50px 50px;
   background-size: 50px 50px;
   display:inline-block; 
   width:100%; 
   height:50px

防止手机中网页放大和缩小,设置meta标签中的viewport;

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

浮动子元素撑开父元素盒子高度

1.父元素设置为 overflow: hidden;

2.父元素设置为 display: inline-block;

###　如何解决移动端滚动条卡顿问题 安卓或者ios

\-webkit-overflow-scrolling: auto; / 当手指从触摸屏上移开，滚动会立即停止 \*/  
\-webkit-overflow-scrolling: touch; /\* 当手指从触摸屏上移开，会保持一段时间的滚动 ，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比

响应式布局

所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同选择的渲染方式也不同。换句话说就是先做好PC端的样式，然后使用css中的@media媒体查询来适配不同的终端。这里有一个比较好的习惯是将页面栅格化，啥是栅格化，bootstrap就是栅格化，栅格化就是将页面划分成一块一块的区域，然后在不同的终端适配，最后将栅格重新排列。 响应式布局需要遵循以下几点：

①页面元素宽度不是用px作为单位，而是使用百分比。

②页面框架之间使用流式布局，也就是用float属性，这样当元素超出屏幕宽度的时候会滑倒下面而不是撑出水平滚动条。

③还有就是注意图片的大小，尤其是宽度，同样使用百分比

/*当设备宽度小于800px的时候切换成移动端的布局*/    

@media screen and (max-width: 800px) {    

    .header img {    

        width: 15%;    

        height: 15%;    

    }    

    .main {    

        float: none;    

        width: 95%;    

        margin: 0 auto;    

        box-sizing: border-box;    

    }    

}

圣杯布局

body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

双飞翼布局

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

html 和 css 面试题