css ——行级元素与块级元素解析

一 . 先说说二者的本质区别吧：

行级元素是可以和其他元素处于一行，不用必须另起一行。块级元素是每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

二 .下面看看各自的特点：

块级元素

1.元素的高度、宽度、行高和顶底边距都是可以设置的。

2.元素的宽度如果不设置的话，默认为父元素的宽度。

　　 3.块级元素即使设置了宽度,仍然是独占一行。

常见块级元素：address、blockquote、center、dir、div、dl、ul、ol、li、fieldset、form、form、*hn、hr、menu、noframes、frames、noscript、p、 pre、table等。

行级元素

1.元素的高度、宽度及顶部和底部边距不可设置。

2.元素的宽度就是它包含的文字、图片的宽度，不可改变。

常见行级元素：a、abbr、acronym、b、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、samp、select、small、span、s、del、strike、strong、sub、sup、textarea、tt、u、var等。

纸上得来终觉浅，下面举个例子：

<!DOCTYPE html><html lang="en">
<head>　　<meta charset="UTF-8"><title>区别</title><style type="text/css">.div1{background-color: blue;　　　　　　　　color: #fff;}.span1{background-color: red;　　　　　　　color: #fff;}</style></head>
<body><div class="div1">我是块级元素1</div>

　　<div class="div1">我是块级元素2</div>

　　<span class="span1">我是行级元素1</span>

　　<span class="span1">我是行级元素2</span>

</body>
</html>

结果如下：

三. 二者的转换

可以在css样式中用display:inline将块级元素设为行级元素

　　同样，也可以用display:block将行级元素设为块级元素

代码示例如下：

<!DOCTYPE html>
<html lang="en">

<head>　　<meta charset="UTF-8"><title></title><style type="text/css">.div1{

　　　　　　　background-color: blue;　　　　　　　color: #fff;　　　　　　　display：inline；        }

        .span1{background-color: red;　　　　　　　color：#fff；display: block;}</style></head>
<body><div class="div1">我是块级元素1</div><div class="div1">我是块级元素2</div><span class="span1">我是行级元素1</span><span class="span1">我是行级元素2</span>

</body>
</html>

得到结果如图：

四. 行级—块级元素

如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？

此时就可以用 display:inline-block；行内块元素，既具有block的宽度高度特性又具有inline的同行特性。

转载于:https://www.cnblogs.com/baby-zuji/p/9491586.html

css ——行级元素与块级元素解析相关推荐

css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
html行级元素和块级元素以及css转换
之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...
html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
首先我们先了解一下行内元素和块级元素行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...
[css] 行内元素和块级元素有什么区别，如何相互转换？
[css] 行内元素和块级元素有什么区别,如何相互转换? 一般通过display属性来区分块级元素和行内元素,block代表块级元素,inline代表行内元素. 块级元素: 1.内容独占一行. 2.w ...
[css] clear属性只对块级元素有效么？为何无法应用于行内元素？
[css] clear属性只对块级元素有效么?为何无法应用于行内元素? block元素浮动之后已经脱离了文档流了,排列的顺序都不一样了,所以清除了之后有效果. inline-block还是在文档流里面 ...
css 行内元素与块级元素
因为老是记不清行内元素和块级元素所以把该记的放在这行内元素 css行内元素的特点: 可以和其他元素处于一行,不用必须另起一行. 元素的高度.宽度及顶部和底部边距不可设置. 元素的宽度就是它包含的文 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
css行内元素和块级元素
2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 特点:独占一行,其宽度会自动填满其父元素的宽度属性:display:block 例子:div p h(12345 ...
CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...
css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...

css ——行级元素与块级元素解析

css ——行级元素与块级元素解析相关推荐

最新文章

热门文章