1. 请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

首先,使用浮动,是为了更方便的布局。

然后,浮动会使元素脱离文档流,使之包围其元素的父元素不占据空间,出现高度为0(高度塌陷)。所以需要清除浮动

清除浮动的方式大概有6种:

  • 1. 添加额外的标签,比如在浮动元素末尾添加一个空标签<div style="clear:both"></div>
  • 2. 父元素设置 overflow:hidden,通过设置父元素overflow值设置为hidden;在IE6中还需要触发 hasLayout ,例如 *zoom:1;
  • 3. 父元素设置 overflow:auto 属性 ,同样IE6需要触发hasLayout,和2差不多
  • 4. 父元素也设置浮动
  • 5. 父元素设置display:table
  • 6. 父使用:after 伪元素,实现方式.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

2. position的值relative和absolute定位原点是?

relative定位原点是原来所在的位置为原点

注:relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute定位原点是离自己最近的一级position设置为absolute或者relative的父元素的左上角为原点的。如果自己的所有父元素都没设置position,那么就以body为定位原点。

注:absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

3. css优先级算法如何计算?

  • * 元素标签中定义的样式(Style属性),加1,0,0,0
  • * 每个ID选择符(如 #id),加0,1,0,0
  • * 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
  • * 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
  • 算法:当遇到多个选择符同时出现时候 按选择符得到的Specificity值逐位相加, {数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最终计算得的specificity, 然后在比较取舍时按照从左到右的顺序逐位比较,大的优先级越高。

需注意的:

  • 1. !important的优先级是最高的,但出现冲突时则需比较”四位数“;
  • 2. 优先级相同时,则采用就近原则,选择最后出现的样式;
  • 3. 继承得来的属性,其优先级最低;
  • !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

4. png、jpg、gif这些图片格式有什么特点,分别什么时候用?

png采用无损压缩,能在保证最不失真的情况下尽可能压缩图像文件的大小,可以储存透明,尺寸比jpg要大很多,不支持动画。适用于小图标。

jpg采用有损压缩,会使图像数据质量下降,并且在编辑和重新保存JPG格式图像时,这种下降损失会累积,尺寸比png小。适用于摄影图片,以及色彩丰富的图片。

gif可插入多帧,实现动画效果,可设置透明色。一般只作为动态图像格式使用

5. 常见的CSS Hack 有哪些方式,怎么写?

方式一:条件注释法

  • 只在IE下生效<!--[if IE]> 这段文字只在IE浏览器显示 <![endif]-->
  • 只在IE6下生效<!--[if IE 6]> 这段文字只在IE6浏览器显示 <![endif]-->
  • 只在IE6以上版本生效 <!--[if gte IE 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示 <![endif]-->
  • 只在IE8上不生效<!--[if ! IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
  • 非IE浏览器生效 <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->

方式二:类内属性前缀法

hack 写法 实例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q) IE9(S) IE9(Q) IE10(S) IE10(Q)
* *color 青色 Y Y Y Y N Y N Y N Y
+ +color 绿色 Y Y Y Y N Y N Y N Y
- -color 黄色 Y Y N N N N N N N N
_ _color 蓝色 Y Y N Y N Y N Y N N
# #color 紫色 Y Y Y Y N Y N Y N Y
\0 color:red\0 红色 N N N N Y N Y N Y N
\9\0 color:red\9\0 粉色 N N N N N N Y N Y N
!important color:blue !important;color:green; 棕色 N N Y N Y N Y N Y Y

方式三:选择器前缀法

  • *html *前缀只对IE6生效
  • *+html *+前缀只对IE7生效
  • @media screen\9{...}只对IE6/7生效
  • @media \0screen {body { background: red; }}只对IE8有效
  • @media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
  • @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
  • @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

6. 什么是盒子模型?

网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒子模型有两种:IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;

7. 简单写几个行内元素、块级元素?两者区别是什么?

行内元素:a b span img input select strong

块内元素:div ul ol li dl dt dd h1 h2 h3 h4 p

行内块元素常见的有: img input td

两者区别:

  • (1). 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列; 块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。
  • (2). 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。
  • (3). 行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

8. px和em、rem的区别

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

rem特点 rem是CSS3新增的一个相对单位(root em,根em)。比如默认根元素是16px,那么1rem = 16px。