目录
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
position的值relative和absolute定位原点是?
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
display:inline-block 什么时候会显示间隙?
overflow: scroll时不能平滑滚动的问题怎么处理?
png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
CSS
介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
(1)、有两种, IE 盒子模型、W3C 盒子模型;
(2)、盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)、区 别: IE的content部分把 border 和 padding计算了进去;
CSS选择符有哪些?哪些属性可以继承?
1、id选择器( # myid)
2、类选择器(.myclassname)
3、标签选择器(div, h1, p)
4、相邻选择器(h1 + p)
5、子选择器(ul > li)
6、后代选择器(li a)
7、通配符选择器( * )
8、属性选择器(a[rel = "external"])
9、伪类选择器(a:hover, li:nth-child)
可继承的样式: font-size,font-family,color,,ul,li,dl,dd,dt;
不可继承的样式:border,padding,margin width,height;
CSS优先级算法如何计算?
- 就近原则;
- 优先级为:!important > id > class > tag;
- important 比 内联 优先级高;
CSS3新增伪类有那些?
举例:
- p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素;
- p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素;
- p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素;
- p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素;
- p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素;
- :after 在元素之前添加内容,也可以用来做清除浮动;
- :before 在元素之后添加内容;
- :enabled
- :disabled 控制表单控件的禁用状态;
- :checked 单选框或复选框被选中;
如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?
给div设置一个宽度,然后添加margin: 0 auto属性
div {
width:200px;
margin:0 auto;
}
居中一个浮动元素
// 确定容器的宽高 宽500 高300 的层
// 设置层的外边距
.div {
width: 500px;
height: 300px;//高度可以不设
margin: -150px 0 0 -250px;
position: relative; //相对定位
background-color: pink; //方便看效果
left: 50%;
top: 50%;
}
让绝对定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值?说明他们的作用
- block 像块类型元素一样显示;
- none 此元素不会被显示;
- inline-block 像行内元素一样显示,但其内容像块类型元素一样显示;
- list-item 像块类型元素一样显示,并添加样式列表标记;
- table 此元素会作为块级表格来显示;
- inherit 规定应该从父元素继承 display 属性的值
position的值relative和absolute定位原点是?
absolute 生成绝对定位的元素,相对于值不为 static的第一个父元素进行定位;
fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位;
relative 生成相对定位的元素,相对于其正常位置进行定位;
static 默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明);
inherit 规定从父元素继承 position 属性的值;
CSS3有哪些新特性?
- 新增各种CSS选择器(: not(.input):所有 class 不是“input”的节点);
- 圆角(border-radius:8px);
- 多列布局(multi-column layout);
- 阴影和反射(Shadow\Reflect);
- 文字特效(text-shadow、) ;
- 文字渲染(Text-decoration) ;
- 线性渐变(gradient);
- 旋转(transform);
- 增加了旋转,缩放,定位,倾斜,动画,多背景;
- transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用纯CSS创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
png24位的图片在iE6浏览器上出现背景,解决方案是做成png8;
各个浏览器默认的margin和padding不同。解决方案是加一个全局的 {margin: 0; padding: 0;} 来统一;
浮动ie产生的双倍距离 #box{ float: left; width: 10px; margin:0 0 0 100px;}
IE下,获取属性方式不同,解决方法:统一通过getAttribute()获取自定义属性;
IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性;解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数;
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示;可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决;
超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有 hover 和 active 了;解决方法:改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了;
为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
淘宝的样式初始化代码:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin:0; padding:0;
}
body, button, input, select, textarea {
font:12px/1.5tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
}
address, cite, dfn, em, var {
font-style:normal;
}
code, kbd, pre, samp {
font-family:couriernew, courier, monospace;
}
small {
font-size:12px;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
legend {
color:#000;
}
fieldset, img {
border:0;
}
button, input, select, textarea {
font-size:100%;
}
table {
border-collapse:collapse; border-spacing:0;
}
css定义的权重
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
/*权重为1*/
div {
}
/*权重为10*/
.class1 {
}
/*权重为100*/
#id1 {
}
/*权重为100+1=101*/
#id1 div {
}
/*权重为10+1=11*/
.class1 div {
}
/*权重为10+10+1=21*/
.class1 .class2 div {
}
// 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
使用 CSS 预处理器吗?喜欢那个?
stylus(stylus,SASS、LESS没有本质区别,只因为团队前端都是用的SASS)
CSS优化、提高性能的方法有哪些?
压缩
::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
?
如何修改chrome记住密码后自动填充表单的黄色背景 ?
?
你对line-height是如何理解的?
行高
如果需要手动写动画,你认为最小时间间隔是多久,为什么?
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
display:inline-block 什么时候会显示间隙?
移除空格、使用margin负值、使用font-size: 0、letter-spacing、word-spacing
overflow: scroll时不能平滑滚动的问题怎么处理?
?
png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
?
什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)
如果静态文件都放在主域名下,那静态文件请求的时候都带有的cookie的数据提交给server的,非常浪费流量, 所以不如隔离开。
因为cookie有域的限制,因此不能跨域提交请求,故使用非主要域名的时候,请求头中就不会带有cookie数据, 这样可以降低请求头的大小,降低请求时间,从而达到降低整体请求延时的目的。
同时这种方式不会将cookie传入Web Server,也减少了Web Server对cookie的处理分析环节, 提高了webserver的http请求的解析速度。
什么是CSS 预处理器 / 后处理器?
- 预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性, 还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
- 后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的 是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。