一、元素分类特性展示在此前的课程中，我们还有一些遗留问题没有解决，例如：有些元素不管宽度多少，都是独立占一行显示，有些元素则可以共同占用一行显示;有些元素可以设置宽度和高度，有些元素不能设置宽度和高度;有限元素可以设置上下的外边距，有些元素则不能设置;通过上述问题，我们可以推断出，html元素是有不同类别的。我们来写一个实例，代码如下所示:再通过css，分别对h1，img，a三个标签设置如下属性：边框外边距宽高可以得出以下结论：h1标签可以设置宽高，可以设置所有外边距，独立成行;img标签可以设置宽高，可以设置外边距，不独立成行;a标签不可以设置宽高，不可以设置上下外边距，不独立成行;从这个示例中，可以推断出，h1，img，a标签属于三中类型。分类总结html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述：块元素：可以设置宽高，可以设置所有外边距，独立成行。行内块元素（内联块元素）：可以设置宽高，可以设置外边距，不独立成行。行内元素（内联元素）：不可以设置宽高，不可以设置上下外边距，不独立成行。元素归类在我们常用的标签中，按元素的分类，如下所示。块元素：h、div、ul、li、p、form;行内块元素（内联块元素）：img、input;行内元素（内联元素）：a、span;元素类型转换通过display属性，可以将元素的类型转换成其他类型，例如如下的css样式；就可以将a标签转换成块元素，然后就可以对其指定宽度和高度了，这样我们就可以实现一个有宽度和高度的链接元素了。chrome调试工具在chrome浏览器中按f12键可以查看网页详情，包括html、css相关的信息，可以用来配合网页代码的调试和查看。二、浮动布局了解了元素的分类之后，我们再来看下一个问题，我们之前讲解的盒子模型，都是用div作为容器来存放网页的内容，而div是块元素，那么如何让两个div在同一行显示呢，可以使用float属性来实现。示例代码如下所示：float属性float属性可以让块元素与其他元素在同一行显示，我们将两个div元素都设置float:left属性，这样两个div就可以在同一行显示了。通过float属性也可以将一个行内元素或者款元素设置为右对齐，例如融职教育首页的
转载请注明：http://www.aierlanlan.com/rzgz/9786.html
