前端开发笔记（一）

1、有用过dl、dt、dd这三个元素吗？其表达的语义是什么？

          dl — definition lists 定义列表

          dt — definition term

          dd — definition description

     自定义列表中每个元素的标题使用<dt>定义,后面跟随<dd>用于描述列表中元素的内容，所以<dt>和<dd>几乎是成对出现的。与<ul>、<ol>相比有较好的层次性和和可读性，语义性也更加明确。

2、如何实现定宽、自适应的两列、三列布局？

    实现原理：

i.块元素要包含在一个容器里

ii.添加overflow: hidden 到容器里的元素

iii.添加 padding-bottom（足够大的值）到列的块元素

iv.添加 margin-bottom（足够大的值）到列的块元素

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了

例子：EqualHeightColumns.htm

3、display:inline-block的特点？

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的。IE下块元素如何实现display:inline-block的效果？有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。

4、input type="image"元素的作用是什么？

    <input type="image">单击会立即提交表单，并且会携带事件的坐标，因此常用来巧妙实现map功能。也就是说一个<input type="image">提交表单后，在不传递其它参数的情况下，服务器就知道事件发生的位置。

    The image INPUT tag uses an image as an input fields. The image can be used as a submit button (with a script to submit the form onclick) or to collect data from the image itself (similar to an image map, but in a form). The browser will submit the coordinates where the user clicked on the image.

    When you use the input type="image" tag, you are telling the browser to submit the x and y coordinates where the image was clicked. This allows you to add image map type functionality to your forms.