行内元素,行内块元素以及块级元素的区别

文章目录[x]
  1. 1:行内元素
  2. 2:块级元素
  3. 3:行内块元素

行内元素

顾名思义,行内元素就是不换行,与其他内联元素共行。HTML常用的行内元素有:
span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)等
行内元素可以设置元素的高度与宽度,但宽度只与内容有关,用line-height控制高度,不可设置整体高度和宽度,padding左右起作用,上下不会影响行高,margin左右作用起作用,上下不起作用。
举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 20px;
            font-size: 30px;
            margin-top:10px;
            padding-top:20px ;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">A1</a>
        <a href="#">A2</a>
        <a href="#">A3</a>
        <a href="#">A4</a>
    </div>
</body>
</html>


可以看到,对行内元素设置宽高是无用的,同样padding,margin的上下属性也是无用的

块级元素

总是从新行开始,独占一行,HTML常用的块级元素有:
div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等
块级元素默认宽度是父容器宽度的100%,可以设置高与宽,可以设置margin和padding任意方向
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。
上面的例子中若给a元素添加display:block属性,就可以实现想要的结果

行内块元素

不独占一行的块级元素,在某种程度上可实现与浮动的相似的效果,但是inline-block占据文档流,所以不会产生父容器坍塌问题。HTML中的按钮元素button(默认display:inline-block)。
同样,上面的例子中若给a元素添加display:inline-block属性,也可以实现想要的结果

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00