1.网络中使用最多的图片格式有哪些
JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 在ps以jpeg格式存储时,提供11级压缩级别。
1)jpeg是有损压缩,png是无损的。正因如此,同一图像质量,png文件的大小,大于jpeg文件。
2)png支持透明效果(alpha),jpeg不支持。
2. 请简述 css 盒子模型
一个 css 盒子从外到内可以分成四个部分: margin(外边距), border(边框), padding(内边距),content(内容)。 默认情况下, 盒子的 width 和 height 属性只是设置 content(内容)的宽和高。
盒子真正的宽应该是: 内容宽度+左右填充+左右边距+左右边框。
盒子真正的高应该是: 内容高度+上下填充+上下边距+上下边框。
3.视频/音频标签的使用
视频:<video src=”></video>
视频标签属性:
src 需要播放的视频地址
width/height 设置播放视频的宽高,和 img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频 (缓存) 与 autoplay 相冲突, 设置了 autoplay 属 性, perload 属性会失效。
muted 静音模式
音频:音频属性和视频属性差不多,不过宽高和 poster 属性不能用
<audio> <source src=” type=”> </audio>
4.HTML5 新增的内容有哪些
1. <canvas>标签替代Flash
Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件。<canvas>标签使得开发者只要使用一个标签就能和用户产生UI交互。虽然目前<canvas>标签还不能实现Flash的所有功能。
2.新增<header> 和<footer> 标签HTML5设计的一个原则是更好的体现网站的语义性,所以增加了<header>和<footer>这样的标签,用来明确表示网页的结构。
3.新增<section> 和<article> 标签与<header>, <footer>类似,<section>和<article>也有利于清晰化网页的结构,更有利于SEO。
4.新增<menu> 和<figure> 标签
<menu>可以被用于创建传统的菜单,也可以用于工具栏和上下文菜单。<figure>标签使得网页文字和图片的排版更专业。
5.新增<audio> 和<video> 标签
这两个标签可能是HTML5里面最有用的两个标签了。顾名思义,这两个标签是用来播放音频和视频的。
6. HTML5对<form> 和<forminput> 标签进行了大量修改,添加了很多新的属性,也修改了很多属性。
5.Html5 新增的语义化标签有哪些
Header页面头部 main页面主要内容 footer页面底部
Nav导航栏 aside侧边栏 article加载页面一块独立内容
Section 相当于div figure加载独立内容(上图下字) figcaption figure的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签 (必须配合 open 属性)
Embed 加载插件的标签 video 加载视频 audio 加载音频(支持格式ogg,mp3,wav)
语义化标签优点: 1.提升可访问性 2.有利于seo 3.结构清晰,利于维护。
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
优点:简单,代码少,兼容性好
缺点:内部宽高超过父级 div 时,会出现滚动条
5.伪元素清除法
给塌陷的元素添加伪对象
.father::after{
Content:“随便写”;
Clear:both;
display:block;
Height:0;
Overflow:hidden;
Visibility:hidden
}
优点:写法固定,兼容性高
缺点:代码多
6.双伪元素清除浮动(推荐)
.clearfix:before,
.clearfix:after {
display: table;
content: " " ; /*不用有内容也可以*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点:不仅可以清除浮动,也可以解决高度塌陷的问题(给父盒子添加类名clearfix)
8.定位的属性值有何区别
Position 有四个属性值: relative absolute fixed static
relative 相对定位 不脱离文档流,相对于自身定位
absolute 绝对定位,脱离文档流相对于父级定位
fixed 固定定位,脱离文档流,相对于浏览器窗口定位
static 默认值,元素出现在正常的流中
9.子元素如何在父元素中居中
水平居中
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 的区别
标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大,标准模式下总宽度=width+margin(左右)+padding(左右)border(左右)
怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度,怪异模式下总宽度=width+margin(左右)(就是说width已经包含了padding和border值)
标准模式下如果定义的DOCTYPE缺失,则在ie6、ie7、ie8下汇触发怪异模式。当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;当设置为box-sizing:border-box时,将采用怪异模式解析计算。