1,行内元素有哪些?块级元素有哪些?空元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul li
行内元素: a b br i span input select
空元素:即没有内容的HTML元素,例如:br、meta、hr、link、input、img
css盒模型:content,padding,border ,margin(盒模型顺序)
行内元素的margin padding是无效的,需要display:inline
用display:inline-block 强制将块级元素转为行内元素。注意有3px间距。letter-spacing可以消除这个间距
2,描述css reset的作用和用途。
reset重置浏览器的css默认属性 浏览器的品种不同,样式不同,然后重置,让他们统一。
3,如何减轻服务器对图片请求的压力
使用雪碧图,减少服务器请求图片的数量
4,CSS实现垂直水平居中
HTML结构:
<div class="wrapper">
<div class="content"></div>
</div>
CSS:
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
5,简述一下src与href的区别
href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
6、什么是css hack ?css hack解决的问题?
CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSS hack就是让你记住这个标准),以达到应用不同的CSS样式的目的
CSS hack用来解决有些css属性在不同浏览器中显示的效果不一样的问题(参考文档:http://www.kwstu.com/Admin/ViewArticle/201409011604277330)
不同浏览器的内核:IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto,Firefox:gecko内核;
7、px和em的区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
8,有哪些方式可以对一个DOM设置它的CSS样式?
外部样式表,引入一个外部css文件
内部样式表,将css代码放在标签内部
内联样式,将css样式直接定义在 HTML 元素内部
9、CSS都有哪些选择器? 派生选择器(用HTML标签申明)
id选择器(用DOM的ID申明)
类选择器(用一个样式类名申明)
属性选择器(用DOM的属性申明,属于CSS2,IE6不支持,不常用,不知道就算了)
除了前3种基本选择器,还有一些扩展选择器,包括
后代选择器(利用空格间隔,比如div .a{ })
群组选择器(利用逗号间隔,比如p,div,#a{ })
选择器越特殊,选择指向越准确,优先级越高。
css 奇数、偶数选择器。奇数:p:nth-child(odd);偶数:p:nth-child(even)
10,rgba()和opacity的透明效果有什么不同?
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
11,Sass、LESS是什么?大家为什么要使用他们?
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
12、什么是外边距重叠?重叠的结果是什么?
答案:
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
1. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时,折叠结果是两者的相加的和。