CSS3基础教程(七) - 博客详情

1.什么是块级元素

块级元素(block element),是指独占一行，不能与其他任何元素并列。可以设置宽高，如果不设置宽度，那么宽度将默认变为父级的100%。块级元素中可以包含块级元素和行内元素。

常见的块级元素如下：

address – 地址
div – 常用块级容易，也是CSS layout的主要标签
dl – 定义列表
form – 交互表单
h1~h6 – 大标题
hr – 水平分隔线
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表
li - 列表项

2.什么是行内元素

行内元素(inline element),和其他元素都在一行,不能设置宽高以及内边距都是不可控的，宽高就是内容的高度，不可以改变。行内元素只能行内元素，不能包含块级元素。

常见的行内元素有：

a – 链接
abbr – 缩写
b – 粗体(不推荐)
br – 换行
em – 强调
i – 斜体
img – 图片
input – 输入框
select – 下拉列表
span – 常用内联容器，定义文本内区块
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
u – 下划线

3.块级元素与行内元素的转换

我们可以通过display属性将块级元素(比如div)和行内元素进行相互转换。 display：inline; 将块级元素变为行内元素。 display：block; 将行内元素变为块级元素。

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>块级元素和行内元素</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }

        #box1{
            background-color: lightskyblue;
        }

        #box2,#box4{
            background-color: lightgreen;
        }

        #box3,#box5{
            background-color: lightcoral;
        }

        span{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }

        #sp1{
            background-color: lightpink;
        }

        #sp2, #sp4{
            background-color: lightseagreen;
        }

        #sp3, #sp5{
            background-color: burlywood;
        }

        .mydiv{
            display: inline;
        }

        .myspan{
            display: block;
        }

    </style>
</head>
<body>

<div id="box1">DIV1</div>
<div id="box2">DIV2</div>
<div id="box3">DIV3</div>

<span id="sp1">SPAN1</span><span id="sp2">SPAN2</span><span id="sp3">SPAN3</span>

<div class="mydiv" id="box4">DIV4</div>
<div class="mydiv" id="box5">DIV5</div>
<span class="myspan" id="sp4">SPAN4</span><span class="myspan" id="sp5">SPAN5</span>

</body>
</html>

运行效果：

4.inline-block

inline-block也是和inline一样的效果，所以两个盒子在一行显示，但是与inline不同的是:inline-block对width和height同样生效。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>display: inline</title>

  <style>
    span {
      /*添加display: inline-block;*/
      display: inline-block;
      width: 100px;
      height: 100px;
      margin-top: 20px;
      margin-bottom: 20px;
      background-color: lightskyblue;
    }

    div {
      background-color: lightgrey;
    }
  </style>

</head>
<body>
<div>
  <span>Hello HTML</span>
  <span>Hello HTML</span>
  <span>Hello HTML</span>
</div>
</body>
</html>

运行效果：

block、inline和inline-block之间的区别如下表所示：