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

时间  2019-11-18
标签 元素 学习 繁體版
原文   原文链接

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

@(css)[妙瞳]
css标准文档流：css

简称"标准流"，指的是在不使用其它的与排列和定位相关的特殊CSS规则时，各类元素的排列规则。HTML文档中元素能够分为块级元素和行内元素。html

  • 块级元素：老是以一个块的形式表现出来，而且跟同级的兄弟一次竖直排列，左右撑满。浏览器

  • 行内元素：行内元素不占据单独的空间，依附于块级元素，行内元素没有本身的区域。它一样是DOM树的一个节点，在这点上，行内元素和块级元素是没有区别的。行内元素不能够设置宽与高，但能够与其余行内元素位于同一行，行内元素内通常不能够包含块级元素。行内元素的高度通常由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a,em,strong等。app

盒子在标准流中的定位原则（见我上篇文章：聊聊盒子模型）
（1）行内元素之间的水平margin
当两个行内元素紧邻时，它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。
（2）块级元素之间的竖直margin
当两个块级元素紧邻时，它们的距离不是margin-bottom与margin-top的总和，而是二者中的较大者。
（3）嵌套盒子之间的margin
当一个div块包含在另外一个div块中时，便造成了典型的父子关系。其中子块的margin将以父块的 content为参考。
（4）将margin设置为负值
当margin设置为负值时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。框架

代码演示以下：ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        ul{
            border:1px solid red;
        }
        li{
            border:1px solid green;
        }
        strong{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <ul>
        <li>第1个列表的第1个项目内容</li>     
        <li>第1个列表的第2个<strong>项目内容</strong>,内容更长一些，
        目的是演示自动折行的效果。</li>
    </ul>
    <ul>
        <li>第2个列表的第1个项目内容</li>
        <li>第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行
        的效果。</li>
    </ul>  
</body>
</html>

页面效果：学习

如上代码所示，其内容是body中有两个列表（ul），ul列表中又各有两个列表项目（li）。一共有四层，顶层为body，第二层为ul，第三层为li，第四层为文本。ul和li都为块级元素，而strong则为行内元素，从 DOM 的角度来看，块级元素和行内元素是没有区别的，都是树上的一个节点，而从 CSS 的角度来看，两者就有不少的区别，块级元素有属于本身的区域，而行内元素没有！就如页面效果图所示。标准流就是 CSS 规定的默认的块级无素和行内元素的排列方式。
从body标记开始，依次把其中的子元素放到适当的位置。若是一个html更为复杂，层次更多，那么也和这个同样，直至全部的元素被检查一遍，分配到相应的区域。在这个过程，一个一个的盒子天然地造成一个序列，同级别的盒子依次排列在父级盒子中，就像一条河流有干流和支流同样，这就是被称为“流”的缘由。

行内元素的特色：字体

  • 和其余行内元素都在一行上；
  • 设置宽度width无效，宽度是根据它的内容而定。
  • 设置高度height无效，能够经过line-height来设置。高度随字体大小而变。
  • 设置margin只有左右margin有效，上下无效。
  • 设置padding只有左右padding有效，上下无效。
  • 行内元素只能容纳文本或者其余的行内元素。

块级元素的特色：spa

  • 老是在新行上开始；
  • 高度、行高以及外边距和内边距均可控制；
  • 宽度缺省是它容器的100%，除非设定一个宽度；
  • 它能够容纳行内元素和其余块级元素；

假如我对strong的line-height进行设置，效果以下：3d

strong{
        border:1px solid #000;
        line-height:50px;
    }

页面效果：


由上所示，line-height的设置，行内元素strong的高度改变。

假如咱们对strong的height进行设置，效果以下：

strong{
        border:1px solid #000;
        height:50px;
    }

页面效果：


由上所示，height的设置，行内元素strong的高度并未改变。

代码：

li{
        border:1px solid green;
        margin-left:20px;
        margin-right:20px;
        margin-top:20px;
        margin-bottom:20px;
    }
    strong{
        border:1px solid #000;
        margin-left:20px;
        margin-right:20px;
        margin-top:20px;
        margin-bottom:20px;
    }

页面效果图：

由上可示，对于行内元素strong而言，margin-left和margin-right有效，可是margin-top和margin-bottom失效。对于块级元素li而言，上下左右的margin都有效。

代码：

li{
        border:1px solid green;
        padding-left:20px;
        padding-right:20px;
        padding-top:20px;
        padding-bottom:20px;
    }
    strong{
        border:1px solid #000;
        padding-left:20px;
        padding-right:20px;
        padding-top:30px;
        padding-bottom:20px;
    }

页面图：


由上所示，对于行内元素strong而言，padding-left和padding-right有效，可是padding-top和padding-bottom失效,只是上下的范围扩大，但是对其余元素内容并无改变。对于块级元素li而言，上下左右的padding都有效。

行内元素和块级元素的区别：

  • 行内元素会在一条直线上排列，都是同一行的，水平方向排列，
    块级元素各占据一行，垂直方向排列。块级元素重新行开始结束接着一个断行。

  • 块级元素能够包含行内元素和块级元素。行内元素不能包含块级元素。

  • 行内元素与块级元素属性的不一样，主要是盒模型属性上

  • 行内元素设置width无效，height无效(能够设置line-height)，margin上下无效，padding上下无效，而块级元素都有效。

  • text-align属性是二者表现的又以不一样之处

在W3C CSS2.1规范第16.2节 对text-align 有详细地描述：

值： left | right | center | justify | inherit

初始值：匿名值，由'direction'的值而定，若是'direction'为'ltr'则为'left'，若是'direction'为'rtl'则为'right'。
应用于: 块级元素，表格单元格，行内块元素
继承性: 是

计算后的值：初始值或指定值

这个特性描述了如何使一个块元素的行内内容对齐。

注意一点，标准里说这个属性是用来对齐行内内容的，因此，不该该对块级内容起做用。

解释一下，行内内容是说由行内元素组成的内容，好比 SPAN 元素，IFRAME元素和元素样式的　‘display : inline’ 的都是行内元素；块级内容跟则是由块级元素构成，DIV 是最经常使用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素能够在一行并排显示。

这样，咱们对这个特性的认识应该就清楚了。可是，虽然标准里这么规定，那么是否是全部浏览器都遵照呢？答案是否认的。

IE6/7及IE8混杂模式中，text- align:center可使块级元素也居中对齐。其余浏览器中，text-align:center仅做用于行内内容上。

解决上面的问题比较好的方式，就是为全部须要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，因此还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不须要居中对齐，则还须要为其设置“text-align:left”。

代码：

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>CSS</title>
            <style>
                body{
                    width:800px;
                    border:1px solid #000;
                }
                div.wrapper{
                    /*margin:0 auto;*/
                    width:500px;
                    border:1px solid red;
                    text-align: center;
                }
                div.box1{
                    border:1px solid red;
                
                }
                div strong{
                    border:1px solid green;
                }
            </style>
        </head>
        <body>
            <div class="wrapper">
                <div class="box1">
                    <strong>我是行内元素</strong>
                </div>
                <p>我是块级元素</p>
            </div>
        </body>
        </html>

页面：
IE8/Firefox/Chrome/Safari/Opera:

IE6/IE7:

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style>
            body{
                width:800px;
                border:1px solid #000;
            }
            div.wrapper{
                margin:0 auto;
                width:500px;
                border:1px solid red;
            }
            div.box1{
                border:1px solid red;
                text-align:center;
            
            }
            div strong{
                border:1px solid green;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box1">
                <strong>我是行内元素</strong>
            </div>
            <p>我是块级元素</p>
        </div>
    </body>
    </html>

IE8/Firefox/Chrome/Safari/Opera:

IE6/IE7：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        body{
            width:800px;
            border:1px solid #000;
        }
        div.wrapper{
            margin:0 auto;
            width:500px;
            border:1px solid red;
            text-align:center;
        }
        div.box1{
            border:1px solid red;
        }
        div strong{
            border:1px solid green;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">
            <strong>我是行内元素</strong>
        </div>
        <p>我是块级元素</p>
    </div>
</body>
</html>

IE6/IE7/IE8/Firefox/Chrome/Safari/Opera:

块级元素、行内元素分别汇总以下：

Examples of block level elements

block level elements|Element    Description
<address>           information on author
<blockquote>                long quotation
<button>            push button
<caption>           table caption
<dd>                definition description
<del>               deleted text
<div>               generic language/style container
<dl>                definition list
<dt>                definition term
<fieldset>          form control group
<form>              interactive form
<h1>                heading
<h2>                heading
<h3>                heading
<h4>                heading
<h5>                heading
<h6>                heading
<hr>                horizontal rule
<iframe>            inline subwindow
<ins>               inserted text
<legend>            fieldset legend
<li>                list item
<map>               client-side image map
<noframes>          alternate content container for non frame-based rendering
<noscript>          alternate content container for non script-based rendering
<object>            generic embedded object
<ol>                ordered list
<p>             paragraph
<pre>               preformatted text
<table>             table
<tbody>             table body
<td>                table data cell
<tfoot>             table footer
<th>                table header cell
<thead>             table header
<tr>                table row
<ul>                unordered list

Examples of inline elements

inline elements  |  Element Description
<a>                 anchor
<abbr>                  abbreviated form
<acronym>               acronym
<b>                 bold text style
<bdo>                   I18N BiDi over-ride
<big>                   large text style
<br>                    forced line break
<button>                push button
<cite>                  citation
<code>                  computer code fragment
<del>                   deleted text
<dfn>                   instance definition
<em>                    emphasis
<i>                 italic text style
<iframe>                inline subwindow
<img>                   Embedded image
<input>                 form control
<ins>                   inserted text
<kbd>                   text to be entered by the user
<label>                 form field label text
<map>                   client-side image map
<object>                generic embedded object
<q>                 short inline quotation
<samp>                  sample program output, scripts, etc.
<select>                option selector
<small>                 small text style
<span>                  generic language/style container
<strong>                strong emphasis
<sub>                   subscript
<sup>                   superscript
<textarea>              multi-line text field
<tt>                    teletype or monospaced text style
<var>                   instance of a variable or program argument

块级元素列表

<address>   定义地址
<caption>   定义表格标题
<dd>            定义列表中定义条目
<div>           定义文档中的分区或节
<dl>            定义列表
<dt>            定义列表中的项目
<fieldset>  定义一个框架集
<form>          建立 HTML 表单
<h1>            定义最大的标题
<h2>            定义副标题
<h3>            定义标题
<h4>            定义标题
<h5>            定义标题
<h6>            定义最小的标题
<hr>            建立一条水平线
<legend>    元素为 fieldset 元素定义标题
<li>            标签订义列表项目
<noframes>  为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>  定义在脚本未被执行时的替代内容
<ol>            定义有序列表
<ul>            定义无序列表
<p>         标签订义段落
<pre>           定义预格式化的文本
<table>         标签订义 HTML 表格
<tbody>         标签表格主体（正文）
<td>            表格中的标准单元格
<tfoot>         定义表格的页脚（脚注或表注）
<th>            定义表头单元格
<thead>         标签订义表格的表头
<tr>            定义表格中的行

行内元素列表

<a> 标签可定义锚
<abbr>  表示一个缩写形式
<acronym>定义只取首字母缩写
<b> 字体加粗
<bdo>   可覆盖默认的文本方向
<big>   大号字体加粗
<br>    换行
<cite>  引用进行定义
<code>  定义计算机代码文本
<dfn>   定义一个定义项目
<em>    定义为强调的内容
<i> 斜体文本效果
<img>   向网页中嵌入一幅图像
<input> 输入框
<kbd>   定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp>  定义样本文本
<select>建立单选或多选菜单
<small> 呈现小号字体效果
<span>  组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>   定义下标文本
<sup>   定义上标文本
<textarea>多行的文本输入控件
<tt>    打字机或者等宽的文本效果
<var>   定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块级元素或者内联元素

<button>    按钮
<del>           定义文档中已被删除的文本
<iframe>    建立包含另一个文档的内联框架（即行内框架）
<ins>           标签订义已经被插入文档中的文本
<map>           客户端图像映射（即热区）
<object>    object对象
<script>    客户端脚本

行内元素转换为块级元素

display:block; (字面意思表现形式设为块级)
 display:inline;
 display:inline-block;

能够经过修改样式display属性改变元素是以块级仍是行内元素呈现，当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。

若是想让一个元素能够设置宽度高度，又让它以行内形式显示，咱们能够设置display的值为inline-block。

经过css设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。
可是浮动元素比较特殊，因为浮动，其旁边可能会有其余元素的存在。而“list-item”（列表项

  • ），会在其前面生成圆点符号，或者数字序号。

    假若有不足或者错误的地方，欢迎指正哟。-------妙瞳

    • 相关文章