内联元素和块级元素的学习

作者:课课家教育更新于： 2016-10-24 09:15:14

　　在css中有两个出镜率极高的名词就是内联元素和块级元素。如果你是CSS高手对这两个词一定司空见惯了。但对于新手而言，尤其是0基础的朋友就可能相当陌生了。如果你就是一名新手，如果你想了解一些内联元素和块级元素的内容，不妨看一看下面这篇文章。

　　一、块级元素和内联元素的定义

　　块级元素

　　顾名思义就是以块显示的元素。

　　内联元素

　　内联元素也叫内嵌元素或行内元素，一般都是基于语义级的基本元素。

　　二、常见块级元素

　　常见的块级元素有button,div,dl,dt,form,h1,h2,h3,h4,h5,hr,li,ul。

　　三、常见内联元素

　　常见的内联元素有img,a,input,textarea,b,br,span,select,label,map,strong。

　　四、块级元素和内联元素的特点

　　1.块级元素的特点：

　　①总是在新行上开始

　　②高度，行高以及外边距和内边距都可控制

　　③宽度缺省，是它的容器的100%，除非设定一个宽度

　　④它可以容纳内联元素和其他块元素

　　2.内联元素的特点：

　　①和其他元素都在一行上

　　②高，行高及外边距和内边距不可改变

　　③宽度就是它的文字或图片的宽度，不可改变

　　④内联元素只能容纳文本或者其他内联元素

　　五、内联元素与块级元素的区别

　　它们的区别主要有以下4个方面：

　　1.内联元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和内联元素，内联元素display：inline，块级元素display：block。

　　2.内联元素和其他行内元素都会在一条水平线上排列，都是在同一行的； 块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

　　3.内联元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

　　4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；内联元素不能包含块级元素，只能容纳文本或者其他行内元素。

　　六、内联元素和块级元素的应用

　　上面说了这么多，对于学过CSS的人来说一听就能明白。可对于新手来说可能还有点糊涂。那么我们用容器这一词会更容易形象理解它们的存在与用途，内联元素相当一个小容器，而块级元素相当于一个大容器，大容器当然可以放一个小容器了。就好像如果想在大容器中装一些清水同时又想在里面装一些墨水一样。我们需要用小容器装上墨水然后放入大容器里的清水中。这样一说，你在脑海中有一个初步的印象了吧。

　　我们举一个简单的实际例子，比如：

　　我想用CSS定义字母c的样式，因此我们就可以用到了。

　　七、不同浏览器内联元素与块级元素中text-align表现出来的不同：

　　在IE6/7及IE8混杂模式中，text-align:center可以使块级元素居中对齐。但在其他浏览器中，text-align:center仅作用于内联元素上。

　　解决这个问题比较好的方式就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto;margin-right:auto”，同时设置父容器的"text-align:center"。

　　以上就是课课网站给大家带来的关于内联元素和块级元素学习的全部内容。内容比较简单，非常适合新入行的朋友！学习需要一个态度，这个态度将决定你能学多少东西。如果你想了解更多CSS方面的内容，欢迎继续关注我们的课课家网站！