1. 简述<!DOCTYPE html>的作用
这句话必须放在html文件的第一行,用来声明当前文档的类型,如果没写此属性,浏览器会使用自己的怪异模式来解析渲染,写了浏览器会使用W3C标准解析
2. 常见的浏览器及其内核
Chrome: webkit blink
firefox: Gecko
IE: trident
Opera: presto
Safari: webkit
3. 常见的块级和行内
块:div,p,h1~h6,ul,ol,dl,li,dt,dd
行: span,b,i,u,label
行内块: img input button
4. b和strong标签的区别
都是默认字体加粗,区别是strong是语义化标签
5. 谈谈对语义化的理解
去掉css样式也能展示出响应的效果,有利于SEO优化,和搜索引擎更好的沟通,利于爬虫。便于团队开发维护。方便其他设备(屏幕阅读器等)渲染页面
6. 如何合并表格单元格
<table cellspacing="0"></table>
7. thead,tbody,tfoot的作用
thead将表格的第一行统一管理,tbody将表格主体统一管理,tfoot将表格最后一行进行统一管理,结构清晰
8. 常见的表单元素
form,input,textarea,select
9. 引入css的方式有几种
3种,行内样式,内部样式,外部样式
优先级:行内>内部>外部
10. 单行文本水平垂直如何居中
text-align:center;(给块级父元素)
line-height: 高度
11. 选择器优先级如何计算
在属性后面使用!important,会覆盖页面任何位置定义的样式,优先级最高
元素:1
class: 10
伪类: 10
id: 100
行内:1000
12. 哪些css属性可以继承
text-,line-,font-,color
13. 简述css模型
标准盒模型:内容(宽高)+padding+border+margin
一个元素的实际高度=高+上下padding+上下border
14. 使用border实现小三角
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: red;
15. margin外边距常见问题和解决方法
外边距传递:当两个块级元素,一个设置下外边距,一个设置上外边距,两个元素的实际间距为较大的那个
外边距塌陷:一个块级元素的第一个块级子元素,设置上外边距的时候,会带着父元素一起向下。
加上边框或上内边距,记得减掉相应高度
父元素:overflow:hidden/float/position
16. 块级标签和行内标签的区别
块:可以设置宽高,独占一行,默认纵向排列,可以设置4个方向的margin
行:不可以设置宽高,默认一行排列,超出自动换行,只能设置水平方向的margin
17. 浮动产生的问题
对自身的问题:脱离文档流,导致普通流定位元素自动补位,解决:clear:both,清除前面元素的浮动
对父元素:对父元素高度由影响
解决:
父元素overflow:hidden
父元素float:left
父元素定高
父元素的最后一个子标签添加一个空的块级标签,设置样式clear:both
.clearfix:after {
content: "";
display: block;
clear:both;
height:0;
line-height:0;
visibility:hidden;
overflow:hidden;
font-size:0;
}
18. 如何让盒子水平垂直居中
+ 定宽高
margin:0 auto;
margin-top:
position:absolute;
top: 50%;
left:50%;
margin-left: -自身宽度
margin-top:-自身高度
+ 不定宽高
position:absolute;
top: 50%;
left:50%;
transform:translate(-50%, -50%);
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
display:flex;
justify-content: center;
align-items:center;
19. 简述BFC规则
BFC直译为“块级格式上下文”,是一个独立的渲染区域,规定了其内部的盒子如何布局,与外部不相干
规则:
1.内部的盒子会在垂直方向排列
2.盒子的垂直方向距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
3.BFC就是页面上的一个独立的容器,容器内的子元素不会影响外层元素
4.浮动的盒子不叠加在BFC上
20. 图片间隙问题如何解决
display:block;
21. 常见浏览器兼容问题
a标签包着图片在ie7,自带边框
解决:
img {
_border:none;
*border:none;
border:none\0;
}
子元素定位会影响父元素的隐藏属性
解决:给父元素添加position:relative;
22. 登高布局,双飞翼布局,圣杯布局的实现原理
等高:
1. 假等高,内外边距相消法,给父元素overflow:hidden
2. 真等高:弹性盒
3. 真等高:父元素display:table;子元素display:table-cell
双飞翼布局和圣杯
区别:布局的区别,双飞翼center部分有盒子嵌套,真正的内容放在子元素
原理:浮动让左中右一行显示,通过margin-left取负值移动到相应位置
23. 简述精灵图的原理和优缺点
原理:将多个小图标放到一个大图片内,使用background-position去控制显示的图标
优点:减少http请求,提高性能
缺点:需要限定容器大小,需要计算
24. 常见图片格式和特点
jpg: 文件大小小一点,放大会模糊
png: 背景可以透明
gif:动图,背景也可以透明
svg:矢量
25. 为什么要初始化css样式,哪些样式需要初始化
共用样式提取封装,有利于代码复用,所有html都可以通过link引入,减少代码量
* {
margin:0;
padding: 0;
list-style:none;
box-sizing:border-box
}
a {
text-decoration:none;
color: #333;
}
input {
outlint:none;
}
img {
display:block;//解决间隙
width: 100%;
}
.clearfix:after {
content:"";
display:block;
clear:both;
}
26. 几种方法可以让元素消失
opacity:0;占位
display:none;不占位
visibility:hidden;占位
height:0;overflow:hidden;
transform:scale(0,0)
27. 标签应该如何合理嵌套
行不能套块,除了a,img外套层盒子
28. h5有哪些新特性,如何处理浏览器兼容
canvas,结构标签,video,audio,websocket,localstorage
结构标签尽量写类名,详见百度
29. c3 有哪些新特性
transform,transition,animation,border-radius,box-shadow...详见百度
30. c3新增选择器
E[^="value"]
E[$="value"]
E[*="value"]
31. 请你解释一下cs3弹性盒布局,以及适用场景
百度
32. 什么是less,less有什么好处
css预编辑器,是方便css开发的工具。
提供了变量,混入,嵌套,继承,函数等语法,提高开发效率
33. 常见的移动端布局解决方案
百分比布局
rem布局
响应式布局
自适应原理:都是通过相对单位来设置元素
34. 简述rem布局原理
rem是一个相对单位,永远相对于html标签的font-size属性,1rem=16px
rem布局就是利用rem此特性,通过动态的监听视口的宽度,动态修改html的font-size
35. 单行和多行文本溢出省略号
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
36. 过渡动画和帧动画的区别和使用场景
过度动画:最多两个状态,且需要事件触发
帧动画:可以多个状态,利用动画时长内某一时间具体的状态形成帧动画,无需事件触发
37. 2d和3d变形
2d:transform:translate/rotate/scale/skew
3d:transform:translate/rotate/scale
38. 什么是响应式,响应式设计的原理是什么,响应式有哪些优缺点
用一套代码,在不同的屏幕分辨率的终端上浏览网页的不同展示方式
原理:
通过媒体查询不同尺寸屏幕的分辨率,动态更改html的font-size,以达到内容适配屏幕,做到不同分辨率的屏幕展示不一样的效果
优点:
减少工作量,设计,代码,内容都只需要一份,节省时间,每个设备可以得到正确的设计
缺点:
加载更多的样式和资源,设计比较难控制,老版本浏览器兼容不好,出现一些隐藏无用的元素,加载时间长