admin 管理员组文章数量: 887021
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选择器有哪些，哪些属性可以继承，优先级如何计算？
版权声明：本文标题：HTML,CSS,浏览器 相关 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1699054336h325454.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论