1. 块级元素和行内元素分别有哪些？空(void)元素有那些？
行内元素有：
span img input select strong
块元素有：
div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：
<br> <hr> <img> <input> <link> <meta>
2. 在标准文档流里面块级元素和行内元素的区别
块级元素具有以下特点：
行内元素的特点：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距部分可改变；
- 宽度只与内容有关；
- 行内元素只能容纳文本或者其他行内元素。 不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，
内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
3. 什么是 CSS 继承? 哪些属性能继承，哪些不能？
概述
每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值
继承属性
当元素的一个 继承属性 （inherited property ）没有指定值时，则取父元素的同属性的 计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值（initial value）
所有元素可继承：visibility 和 cursor
内联元素可继承：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
终端块状元素可继承：text-indent 和 text-align
列表元素可继承：
list-style、list-style-type、list-style-position、list-style-image
不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi
4. 如何让块级元素水平居中？如何让行内元素水平居中?
1. CSS设置行内元素的水平居中
div{text-align:center} /*DIV内的行内元素均会水平居中*/`
2. CSS设置行内元素的垂直居中
div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/
3. 既要水平居中又要垂直居中
div{text-align:center; height:30px; line-height:30px}
4. CSS设置块级元素的水平居中
div p{margin:0 auto; width:500px} /*块级元素p一定要设置宽度，
才能相当于DIV父容器水平居中*/
5. CSS设置块级元素的垂直居中
div{width:500px} /*DIV父容器设置宽度*/
div p{margin:0 aut0; height:30px; line-height:30px} /*块级元素p也可以加个宽度，
以达到相对于DIV父容器的水平居中效果*
5. 用 CSS 实现一个三角形
6. 单行文本溢出加 ...如何实现?
ell{
width:100px；//必须有宽度
overflow: hidden;//超出隐藏
text-overflow: ellipsis;//显示省略符号来代表被修剪的文本
white-space: nowrap;//不换行
}
7. px, em, rem 有什么区别
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
px特点
-
IE无法调整那些使用px作为单位的字体大小；
-
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
-
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
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作为单位就行了。
em特点
- em的值并不是固定的；
- em会继承父级元素的字体大小。。
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
8. IE 盒模型和W3C盒模型有什么区别?
content-box（标准盒模型/W3C盒模型）
width = 内容的宽度
height = 内容的高度
border-box（怪异盒模型/IE 盒模型）
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
9. *{ box-sizing: border-box;}的作用是什么？
设置他以后，相当于以怪异模式解析，border和padding全会在你设置的宽度内部，
10. line-height: 2和line-height: 200%有什么区别?
区别体现在子元素继承时，如下：
父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。
父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。
11. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。
移除inline-block元素间隙方法
（1）移除标签间的空格
元素间的间隙出现的原因是元素标签之间的空格，把空格去掉间隙自然就会消失。来看以下几种写法：
写法一：
<div class="demo"><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span> </div>
写法二：
<div class="demo"> <span>我是一个span </span><span>我是一个span </span><span>我是一个span </span><span>我是一个span</span> </div>
写法三：利用HTML注释标签
<div class="demo"> <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span> </div>
（2）取消标签闭合
<div class="demo"> <span>我是一个span <span>我是一个span <span>我是一个span <span>我是一个span </div> .demo span{background:#ddd;display: inline-block;}
把span标签的结束标签去掉，这样间隙就没有了。为了兼容IE6/IE7，最后一个标签需要闭合。
<div class="demo"> <span>我是一个span <span>我是一个span <span>我是一个span <span>我是一个span</span> </div>.demo span{ background:#ddd; display: inline-block; }
12 .CSS sprite 是什么?
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
其优点在于：
减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：
图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置，；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。
13 .让一个元素"看不见"有几种方式？有什么区别?
1.display:none;
2.visibility:hidden;
3.opacity:0；
4.设置元素的position与left，top，bottom，right等，将元素移出至屏幕外
5.设置元素的position与z-index，将z-index设置成尽量小的负数
display:none;是让元素消失不占用位置。
visibility :hidden;让元素不可见，但位置还在。这种方是让元素消失了，只是依然占据着页面空间。不可以出发点击事件
opacity:0;设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件
网友评论