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 ——行级元素与块级元素解析三. 二者的转换

可以在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>

得到结果如图:
css ——行级元素与块级元素解析

 四. 行级—块级元素   

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

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

上一篇:全栈一路坑之使用django创建博客


下一篇:设计模式4 外观模式 FACADE