html 内联元素和html 块级元素简述及差别

块级元素(block)特点
•一直占有1行,主要表现为另起1行刚开始,并且其后的元素也务必另起1行显示信息;
•宽度(width)、高宽比(height)、内边距(padding)和外边距(margin)都可以操纵;

内联元素(inline)特点
•和邻近的内联元素在同1行;
•宽度(width)、高宽比(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不能更改,便是里边文本或照片的尺寸;

块级元素关键有

拷贝编码
编码以下:

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul

内联元素关键有

拷贝编码
编码以下:

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var

可变元素(依据左右文关联明确该元素是块元素還是内联元素)

拷贝编码
编码以下:

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的运用
运用CSS大家能够解决上面报表里HTML标识分类的限定,随意地在不一样标识/元素上运用大家必须的特性。

关键用的CSS款式有下列3个
•display:block -- 显示信息为块级元素
•display:inline -- 显示信息为内联元素
•dipslay:inline-block -- 显示信息为内联块元素,主要表现为同行业显示信息并可改动宽高內外边距等特性
大家常将<ul>元素再加display:inline-block款式,本来竖直的目录便可以水平显示信息了。

题外话:近期梳理相关块级元素和内联元素差别的相关专业知识,在网上找了很多有关的文章内容,发现大伙儿的了解好像都有误,我自身亲身检测了下,发现了很多的难题
1.内联元素的margin-left / margin-right及padding-left / padding-rigtht是能够操纵的,因此能够根据这4个特性来操纵内联元素的宽度。
2.内联元素的內部还可以放块级元素标识,并且內部的块级元素标识会撑大外界的内联标识,因此能够根据放块元向来操纵内联元素的高宽比(在网上详细介绍的是内联元素只能放文字及别的内联元素)
比如:

拷贝编码
编码以下:

<a>
<div style="width:100px;height:100px;">检测</div>
</a>