面试总结之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选择器

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

  

最后,多说几句,这些都是基础知识,如果想融会贯通的使用的话,还需要自己多敲代码!毕竟孰能生巧!

 

有需要购置家用路由器和键盘鼠标的童鞋,不要忘记猛点宏正数码哦,在此欢迎!

 

转载请标明出处:http://www.cnblogs.com/callmesummer/p/3970437.html

 

拿出手机,打开支付宝扫一扫,再小的力量,也是一种支持:

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。