1.1HTML/CSS面试题

（HTML/CSS面试题）

1. 行内元素（行级元素、内联元素）、行内块元素、块元素各有什么区别。

行内元素margin和padding左右间距在各个浏览器中解析的都完整,上下间距那就是杯具,各个浏览器解析还不一样,设置个背景貌似人家又认了,但是他周围的元素当他设置的上下间距不存在,所以在以后的项目中,不给行内元素设置上下的margin和padding了
总结：想让自己独占一行就会块级元素(div,dl,dt,dd,ul,li...)，想让元素和其它元素在一行就用行内元素(span,a,img)，他们之间可以通过样式来转换disply:block;display:inline;
另一个属性：
display:inline-block;
将对象呈递为内联元素，与其它的元素同处一行，但是内部又呈现出块级元素，也就是可以设置宽和度，打破了块级元素和内联元素的区别，此属性，IE8，FF3，其它的标准浏览器都识别，IE6，IE7，FF2不识别此属性，但是在IE6,7下面使用又好像识别了，是因为他触发了IE的haslayout，(类似于zoom:1),所以从表现上来说他们支持这个属性.（可以拿块级元素来试验，块级元素使用了这个属性就没有相应的功能了），FF2{display:moz-inline-box}//有可能会导致文本对齐问题
如果块状元素(div..)表现这种属性,与外部沟通是内联,内部又是块状的可以这样设置(display:inline;zooom:1)或 div{display:inline-block;//先触发layout}div{display:inline;}这两个顺序不能颠倒了,不然就失效了

 1.块级元素总是独自占一行，前面和后面就好像有个换行符，内联元素总是和其它的内联兄弟占一行
2.块级元素可以设置宽和高度值，内联元素就不行了，他们的宽和高总是随着自身的内容自动扩大和缩小
3.块级元素的margin和padding都正常，内联元素左右maring和左右padding正常，上下不正常不识别，也就是说不能通过margin-top和padding-top来改变行高

html元素的分类

块状元素、内联元素和内联块状元素。

2. 清除浮动有哪些方法

1. 使用空标签清除浮动

<ul>
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
<br style="clear:both">
</ul>

2. 使用overflow属性

<ul style="overflow:auto;zoom:1">
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
</ul>

3. 使用after伪对象清除浮动
after伪对象非IE浏览器支持，所以并不影响IE/WIN浏览器。具体的写法可以参照以下的示例，但需要有几点的注意。
1.该方法中必须为需要清除浮动元素的伪对象中设置height:0;否则该元素会比实际高出若干像素。
2.content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content设为"."

<style type="text/css">.listinfo:after:{display:block;clear:both;content:"";visibility:hidden;height:0;}c<class="listinfo">/
<li>SSS</li>
<li>OOO</li>
<li>SSS</li>
</ul>

3. 盒子模型有哪些常用的属性，如何使用这些属性。

1. margin
margin 简写属性在一个声明中设置所有当前或者指定元素外边距属性。该属性可以有 1 到 4 个值。

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。
语法结构
margin:5px auto;意思上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
margin:1px 四边统一边距
margin:1px 1px 上下边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距

注释：允许使用负值。

2. padding
CSS padding 属性定义元素边框与元素内容之间的空白区域，不可见。如果想调整盒子的大小可以调整内容区，内边距，边框。CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
有两种方法可以设置盒子内边框的大小，第一种是分别设置四个方向的内边距，第二种是使用简写属性可同时设置多个方向的内边距（要注意设置的顺序）
一、使用单独属性设置各个方向的内边距

1. padding-top 上内边距的宽度
2. padding-left 左内边距的宽度
3. padding-right 右内边距的宽度
4. padding-bottom 下内边距的宽度

代码如下（示例）

<style>
#box1{
padding-top:10px; 
padding-left:20px;
padding-right:30px; 
padding-bottom:40px;
overflow: hidden;
width: 100px;
height: 150px;

background-color：#bcf

border:20px skyblue solid;

}
</style>
<div id="box1">
</div>

简写属性（使用padding可以可以同时设置四个边框的样式，规则和border-width一样，按照 top-right-bottom-left的顺序）
指定四个值，分别设置给上10px，右20px，下30px，左40px。顺时针方向；
padding-width：10px 20px 30px 40px；
指定三个值，第一个值10px设置给上，第二个20px设置给左和右，第三个30px设置给下内边距；
padding-width：10px 20px 30px；
指定两个值，第一个值10px设置给上下内边距，第二个值20px设置给左右内边距；
padding-width：10px 20px ；
指定一个值，四个内边距使用同一个值，上下左右都是10像素；
padding-width：10px ；
3. border
（一）值复制（简写样式）

指定四个值，分别设置给上，右，下，左。顺时针方向；
div{border-style:soild;border-width:10px 20px 30px 40px}
指定三个值，第一个值10px设置给上边框，第二个值设置给左边框和右边框，第三个值设置给下边框；
div{border-style:soild;border-width:10px 20px 30px}
指定两个值，第一个值设置给上下边框，第二个值设置给左右边框；
div{border-style:soild;border-width:10px 20px}
指定一个值，四个边框使用同一个值
div{border-style:soild;border-width:10px}
（二）单独属性设置边框宽度

• border-top-width 顶部边框宽度
• border-left-width 左面边框宽度
• border-right-width 右面边框宽度
• border-bottom-width 底面边框宽度

4. box-sizing

box-sizing ：border-box 无需时刻关注padding 与 边框线。 表示了包含padding 和border 。
box-sizing ：content-box 表示content 的宽高（默认）
box-sizing ：inherit 继承