JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以
jpeg 格式存储时，提供 11 级压缩级别
2. 请简述 css 盒子模型
一个 css 盒子从外到内可以分成四个部分：margin（外边距），border
（边框），padding（内边距），content（内容）。默认情况下，盒子的
width 和 height 属性只是设置 content（内容）的宽和高，
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框
3. 视频 / 音频标签的使用
视频：
视频标签属性：
src 需要播放的视频地址
width/height 设置播放视频的宽高，和 img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属
性，perload 属性会失效。
muted 静音模式
音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用
4.HTML5 新增的内容有哪些
新增语义化标签
新增表单类型
表单元素
表单属性
表单事件
多媒体标签
5.Html5 新增的语义化标签有哪些
语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护
Header 页面头部 main 页面主要内容 footer 页面底部
Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须
配合 open 属性）
Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式
ogg，mp3，wav）
6.Css3 新增的特性
边框：
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（
repeat 平铺 round 铺满
stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定
位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（
x，y）指定元素在二维空间的位移 scale（
n）
定义缩放转换
3D 转换方法：
Perspective（
n）为 3D 转换 translate rotate scale 过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画
7. 清除浮动的方式有哪些？请说出各自的优点
高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时
候父元素就会产生高度塌陷。
清除浮动方式 1：给父元素单独定义高度
优点：快速简单，代码少 缺点：无法进行响应式布局
清除浮动方式 2：父级定义 overflow：hidden；zoom：1（针对 ie6 的
兼容）
优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时
要注意
清除浮动方式 3：在浮动元素后面加一个空标签，clear：both；height：
0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化
清除浮动方式 4：父级定义 overflow：auto
第 5 页 第 6 页
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条
清除浮动方式 5：万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}
优点：写法固定，兼容性高
缺点：代码多
8. 定位的属性值有何区别
Position 有四个属性值：relative absolute fixed static
Relative 相对定位 不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流 相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
Static 默认值，元素出现在正常的流中
9. 子元素如何在父元素中居中
水平居中： 第 7 页
1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置
浮动，否则居中失效
2.子父元素宽度固定，父元素设置 text-align：center，子元素设置
display：inline-block，并且子元素不能设置浮动，否则居中失效
水平垂直居中：
子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素
margin-top 和 margin-left 减去各自宽高的一半
子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素
margin：auto
父元素设置 display：table-cell vertical-align：middle，子元素设置
margin：auto
子元素相对定位，子元素 top，left 值为 50%，transform：translate
（
-50%，-50%）
子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：
translate（
-50%，-50%）
父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；
justfy-content：center
10.Border-box 与 content-box 的区别
Content-box 标准盒模型 width 不包括 padding 和 border
Border-box 怪异盒模型 width 包括 padding 和 border 第 8 页
11. 元素垂直居中
1.设置子元素和父元素的行高一样
2.子元素设置为行内块，再加 vertical-align：middle
3.已知父元素高度，子元素相对定位，通过 transform：
translateY（
-50%）
4.不知道父元素高度，子绝父相，子元素 top：50%，transform：
translateY（
-50%）
5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
6.给父元素 display：
table，子元素 display：
table-cell，vertical-align：
middle
7.给父元素添加伪元素
8.弹性盒，父元素 display：flex，子元素 align-self：center
链接：https://www.waimaiguai.com/technology/article/5866382
来源：外卖怪
比如我现在要滑动到此p标签区域，可先给p标签加上一个id，导航处的a标签利用它的href属性，如<a href="#scroll"></a>
<p id="scroll"></p>
可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。下面各举一例，
鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>纯CSS下拉菜单</title>
<style type="text/css">
a{
font-size:12px
text-decoration:none
color:#000000}
li ul{
display:none
margin-left:5px}
li:hover ul{
width:306px
padding:20px
height:250px
display:block
}
li:hover .fira{border-bottom:#FFFFFF 1px solid
}#kpk{
position:relative
width:420px
}
#kpk>li{
float:left
list-style:none
margin-right:20px
}
#kpk>li .fira{
border:1px #c6c6c6 solid
}
.seca{
position:absolute
z-index:1
left:-5px
top:23px
border:1px #c6c6c6 solid
height:250px
width:306px
padding:20px
height:250px
}
.fira{
width:70px
display:block
line-height:22px
background-color:white
text-align:center
z-index:2
}</style>
</head><body>
<div>
<ul id="kpk">
<li>
<a href="#" class="fira">首页</a>
<ul class="seca" rel="first">
<li><A href="#" target=_self>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.首页揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.首页建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接一</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接一揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接二</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接二揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接三</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接三揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>41</li>
<li>42</li>
<li>43</li>
</ul>-->
</li>
</ul>
</div>
</body>
</html>
锚点点击例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>左右布局</title>
<style type="text/css">
#nav{
width:303px
height:200px
border:1px solid #CCCCCC
}
#column a {
float:left
width:100px
border-right:1px solid #CCC
border-bottom:1px solid #CCC
font:bold 14px/30px Arial, Helvetica, sans-serif
color:#000
text-decoration:none
text-align:center
}
#contant {
width:303px
height:162px
overflow:hidden
}
ul {
margin:0
padding:0
list-style-type:none
padding:4px 0 0 5px
}
li {
font-size:12px
overflow:hidden
padding-left:2px
line-height:27px
}
</style>
</head>
<body>
<div id="nav">
<div id="column"><a href="#localnew">本地新闻</a><a href="#innernew">国内新闻</a><a href="#enterment" >娱乐新闻</a></div>
<div id="contant">
<ul id="localnew">
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS</a></li>
<li><a href="#">我喜欢CSS</a></li>
</ul>
<ul id="innernew">
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程 </a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
</ul>
<ul id="enterment">
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工 </a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
</ul>
</div>
</div>
</body>
</html>
楼主自行copy代码到本地查看，样式微调。。。
