美文网首页让前端飞网页前端后台技巧(CSS+HTML)
CSS图文混排之display(块级,内联,行内块)

CSS图文混排之display(块级,内联,行内块)

作者: 程序仲小仲 | 来源:发表于2017-03-21 09:27 被阅读0次

    先简述一下display的几个值:
    1,none 看不见啊看不见;
    2,block,块级元素;
    3,inline,内联元素;
    4,inline-block,行内块元素;
    5,除了以上的,还有一些 诸如table、inline-table的值,较少用到,本文也不涉及,想知道详情去w3c搜搜便可。链接在此

    本文直接仅为经验之谈,就不做详细的原理介绍了,只说特点特征。

    块级元素(block):

    可设宽高,宽度默认100%占满一行,若干个块级元素会直接以列排列。
    如果想将块级元素并列,可以添加float属性,但要注意总宽度问题。(PS:FLOAT的属性会自动设为块级元素)

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <style type="text/css">
      body {
        width: 300px;
      }
      div {
        border: solid 1px black;
      }
      div:nth-child(1) {
        height: 50px;
      }
      div:nth-child(2) {
        height: 60px;
        width: 100px;
      }
      div:nth-child(3) {
        height: 70px;
        width: 150px;
      }
      div:nth-child(4) {
        height: 80px;
        width: 200px;
      }
      </style>
    </head>
    
    <body>
      <div>自动宽度</div>
      <div>固定宽高1</div>
      <div>固定宽高2</div>
      <div>固定宽高3</div>
    </body>
    
    </html>
    

    例子很简单,效果如下:

    block 块级元素

    下面是并列的例子

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <style type="text/css">
      body {
        width: 300px;
      }
      div {
        width: 100px;
        height: 100px;
        border: solid 1px black;
        float:left;
        line-height: 100px;
        text-align: center;
      }
      img
      {
        width: 100px;
        height: 100px;
        float: left;
      }
      </style>
    </head>
    
    <body>
    ![](head.jpg)
      <div>文字</div>
    </body>
    
    </html>
    
    图文混排float

    这里稍微扩展解释下,在布局中,有一个文档流(normal flow)的概念。使用block时,元素处于文档流内,而float时则脱离出了文档流。脱离后,文档流里的其它元素将不认可它占有的布局。嗯..下面截取一些w3c的解释。

    css浮动

    内联元素(inline):

    偶尔我也会称呼内联元素为“文本流元素”。常见的如<span>< a >,其它类型的元素通过display:inline可以设置为内联元素。
    下面的例子,可以对比inline和block的区别,inline布局的结果和float很像,但仍然有很多不同之处。例如下例中的“文字3”,如果文字3是float模式的话,只会另一起一行,而不会如文本流般拆开。

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>demo</title>
      <style type="text/css">
      body {
        width: 300px;
        border: solid 1px blue;
      }
      div {
        width: 100px;
        height: 100px;
        border: solid 1px black;
        line-height: 100px;
        text-align: center;
      }
      img
      {
        width: 100px;
        height: 100px;;
      }
      div:nth-of-type(1),img:nth-of-type(1)
      {
        display: block;
      }
      div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
      {
        display: inline;
      }
      div:nth-of-type(3)
      {
        font-size: 30px;
        line-height: 50px;
        height: 5px;
      }
      </style>
    </head>
    
    <body>
     ![](head.jpg)
      <div>文字1</div>
     ![](head.jpg)
      <div>文字2</div>
      ![](head.jpg)
      <div>文字3</div>
    </body>
    
    </html>
    
    inline和block的对比

    可能细心的朋友已经发现了,inline元素是不能设置宽高的。内容大小由font-size决定,如果另外要设置高度则需要通过line-height设置。

    行内块元素

    往日里图文混排,我最喜欢用的其实就是这个属性。行内块元素可以说是综合了内联元素和块级元素的特点,话不多说,直接上例子:

    上一个例子30行处做此改变:
      div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
      {
        display: inline-block;
      }
    
    行内块元素

    聚焦到文字2、3和第二、三个头像,发现他们是并列的,并且宽高属性生效。同时从文字2你头像2,可以很明显看出一个上下的错位。很多初学者无论如何也解决不了这个错位,即便你使用marrgin padding等属性。其实要解决很简单:

    在30行下面插入一句:
      div:nth-of-type(2),img:nth-of-type(2),div:nth-of-type(3),img:nth-of-type(3)
      {
        display: inline-block;
        vertical-align: top;
      }
    
    增加垂直置顶

    所以感觉上,行内块就是可设宽高的行内元素,受控制文本的属性影响,如vertical-align、text-align 等。

    在body样式下加入text-align:center看效果。
      body {
        width: 300px;
        border: solid 1px blue;
        text-align: center;
      }
    
    增加文字居中样式

    在我看来,灵活掌握这三种元素类型,是初学者CSS的一次小进阶。灵活运用它们基本可以解决大部分的DIV布局需求了。

    相关文章

      网友评论

        本文标题:CSS图文混排之display(块级,内联,行内块)

        本文链接:https://www.haomeiwen.com/subject/yulbgttx.html