网络中使用最多的图片格式有哪些?
- 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新增的语义化标签有哪些?
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选择器有哪些,哪些属性可以继承,优先级如何计算?