面试总结之html+css

最近面试了一些公司，和技术总监聊了一些前端技术方面的内容。回来之后我总结了一下，大致可以分为三个模块：第一、Html与css 方面；第二、浏览器解析方面；第三、js方面。打算，分为三篇博文，根据自己的理解和大家分享。由于作者水平有限，希望大家多提意见和建议！

　　今天，和大家分享html与css相关的知识。我把这个方面有细分为四小点，1.行内元素块元素有哪些特点以及转换方式；2.定位；3.盒子模型；4.css选择器。下面就做条做分析：

　　1、行内元素和块元素

　　先解释一下块元素吧，块元素就是指那些，独立在一行的元素，他们后面会自动带有换行符。比如像div , p ,form , ul , li , ol , dl 等。它们的出现，往往独自占领一行。在没有设置宽度的情况下，默认宽度总是其父元素的宽度。

　　行内元素呢，就是指那些不会独立出现在一行，单独使用的时候后面不会有换行符的元素。比如像span, strong, img, a 等。这些元素，默认的高宽，总是其内容的高宽。并且，margin和padding值，只有左右有效。

　　行内元素和块元素的互换，也是前端面试经常问到的。行内元素转换成块元素，只要设置其display属性为block即可。反过来，块元素转换成行内元素呢？只要将其display属性设置为inline即可。感兴趣的童鞋，可以亲自试试。

　　2、定位

　　定位的问题，一般会这样问：position有几个值，都分别代表什么意思？这样说的话，估计大家就明白了吧。一共有5个值，分别是：absolute fixed relative static inherit。很多童鞋都会忽略inherit，在此提醒一下。下面就来分别解释一下：

　　absolute　生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

　　fixed 　　生成绝对定位的元素，相对于浏览器窗口进行定位。

　　relative　　生成相对定位的元素，相对于其正常位置进行定位。

　　static　　默认值。没有定位，元素出现在正常的流中

　　inherit　　规定应该从父元素继承 position 属性的值

这里要多说一句，有很多新人搞不清楚absolute和relative，relative是相对其自身的位置变动的。absolute是会向上找其父元素，直到找到不是static定位的元素进行定位。一般在使用absolute的时候，都会给其父元素设置position:relative属性，使其基于父元素定位！

　　3、盒子模型

　　内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模型都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。通俗的讲，就是margin border padding content 这四个属性。在理解盒子模型的时候，需要注意的就是整个盒子的高度和宽度。举个例子说明一下，比如我有一个div宽高都是100px，当我设置其padding属性为20px时，其宽高会变成140px。这点，往往会有很多新人忽略！

　　4、css选择器

　　写了这么多，终于到最后一个问题了，还有点小累呢，我的小手啊... 为了省事，还是截一张图搞定吧，哈哈，太特么机智了！还有点小激动呢。好了，看下图吧：