HTML,CSS,浏览器 相关

网络中使用最多的图片格式有哪些？

• jpeg,gif,png最流行的是jpeg格式，可以把文件压缩到最小在ps以jpeg格式存储 时，提供11级压缩级别

请简述CSS盒子模型

• 一个css盒子从外到内可以分成四个部分：margin外边距，border边框，padding内边距，content内容。默认情况下，盒子的width和height属性只是设置content内容的宽和高。
• 盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
• 盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框

视频、音频标签的使用

• 视频：
• 视频变迁属性：
• src需要播放的视频地址
• width/height设置播放视频的宽高，和img标签的宽高属性一样
• autoplay是否自动播放
• controls是否显示控制条
• poster没有播放之前显示的展位图片
• loop是否循环播放
• perload遇见在视频（缓存）与autoplay相冲突，设置了autoplay属性，perload属性会失效
• muted静音模式
• 音频：音频属性和视频属性差不多，不过宽高和poster属性不能用《audio>》《source src="" type=""》《/audio》

HTML5新增的内容有哪些？

• 新增语义化标签
• 新增表单类型
• 表单元素
• 表单事件
• 多媒体标签

html5新增的语义化标签有哪些？

• 语义化标签的优点：
• 1、提升可访问性
• 2、seo
• 3、解构清晰，有利于维护
• Header页面头部
• main页面主要内容
• footer页面底部
• nav导航栏
• aside侧边栏
• article加载页面一块独立内容
• section相当于div
• figure加载独立内容（上图下字）
• figcaption fihure的标题
• hgroup标题组合标签mark高亮显示
• dialog加载对象框标签（必须配合open属性）
• embed加载插件的标签
• video加载视频
• audio加载音频

css3新增的属性

• 边框：
• border-radios添加圆角边框
• border-shadow给框添加阴影（水平位移，垂直唯一，模糊半径，阴影尺寸，阴影颜色，inster(内、外部阴影））
• 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）
• 渐变：
• liner-gradient()线性渐变
• radial-gradient()径向渐变
• 文本效果：
• word-break:定义如何换行
• word-wrap:允许场的内容可以自动换行
• text-overflow:指定当文本溢出包含他的元素，应该干啥
• text-shadow文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
• 转换：
• transform应用于2d3d转换，可以将元素旋转，缩放，移动，倾斜
• transfrom-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-name为@keyframes动画名称
• animation-duration-duration动画需要花费的时间
• animation-timing-function动画如何完成一个周期
• animation-delay动画启动前的延迟间隔
• animation-iteration-count动画播放次数
• animation-fireaction是否轮流反向播放动画

清除浮动的方式有哪些？请说出各自的优点

• 高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷
• 清除浮动方式
• 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;
}

• 优点：写法固定，兼容性高，
• 缺点：代码多

定位的属性值有何区别？

• position有四个属性，relative absolute fixed static
• relative相对定位，不脱离文档流，相对于自身定位
• absolute绝对定位，脱离文档流，相对于父级定位
• fixed固定定位，脱离文档流，相对于浏览器窗口定位
• static默认值，元素出现在正常的流中

子元素如何在父元素中居中？

• 水平居中
• 1、子父元素宽度固定，子元素设置margin:auto,并且子元素不能设置display:inline-block，并且子元素不能设置浮动，否则居中失效
• 水平垂直居中：
• 2、子元素相对于父元素绝对定位，子元素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;justify-content :center;align-item:center;justify-content:conter;

border-box与content-box区别

• content-box标准盒模型 width不包括padding和border
• border-box 怪异盒模型 width包括padding和border

元素垂直居中

• 设置子元素和父元素的行高一样
• 子元素设置为行内块，再加vertical-align:mddle
• 一直父元素高度，子元素相对定位，通过transform：Translate Y（-50%）
• 不知道父元素高度，子绝父相，子元素top:50%,transform:translateY(-50%)
• 创造一个隐藏结点，让隐藏节点的height为剩余高度的一半
• 给父元素display:table子元素display:table-cell,vertical-align:middle
• 给父元素添加伪元素
• 弹性盒，父元素display:flex,子元素align-self:center

如何让浏览器显示小于12px的文字

• 本来添加谷歌私有属性 -webkit-text-size-adjust:none,现在 -webkit-transform:scale()

css选择器有哪些，哪些属性可以继承，优先级如何计算？