html基础之元素的分类

弧弧弧
362 阅读3分钟

html基础之元素的分类

块级元素 display: block / table

常见的块级元素：
div h1-h6 p ul li ol table form tr td th

块级元素的特点

  1. 独占一行，不管其内容的宽度，默认会撑满父级元素的宽度

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 400px;
        }
        .child {
            height: 100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div>我是child下面的元素</div>
    </div>
   
</body>
</html>

    为parent设置宽度为400px,则child的宽度会撑满parent的宽度，也为400px，同时child元素不会跟下面的div元素在同一行 image-20210318200258365.png

    注意：无论块级元素的宽度设置为多少，它始终都会独占一行

  2. 块级元素允许设置width,height,margin,padding,boder

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 3px;
            border: 2px solid blue;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div class="demo">
    </div>
</body>
</html>

image-20210318201010670.png

image-20210318201027234.png

  1. 一般情况下，块级元素能包含块级元素，行内元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: pink;
            padding: 3px;
            border: 2px solid blue;
            margin: 4px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <div>我是块级元素</div>
        <span>我是行内元素</span>
    </div>
</body>
</html>

image-20210318201322687.png

行内元素

display: inline;

常见的行内元素

a em b br img label span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <a href="">a 标签</a>
    <em>我</em>
    <b>们</b>
     <label>我是label标签</label>
    <img src="./cat.jpg" alt="">
    <span>我是span标签</span>
   
</body>
</html>

image-20210318210659576.png

行内元素的特点：

  1. 不能独占一行，与其他元素排成一行，宽度和高度由元素内容的大小而决定
  2. 一般情况下行内元素设置width,height不生效，可设置border
  3. 行内元素只能设置padding-left,padding-right,margin-left,margin-rigth为有效,而设置padding-top,padding-bottom,margin-top,margin-bottom不会产生边距效果
  4. 行内元素只能包括文字或行内元素，行内块元素，不能包括块级元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a, span {
            width: 300px;
            height: 100px;
            background-color: #ddd;
            margin: 200px 100px;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
   
    <span>我是span标签</span>
    <a>我是a标签</a>
    
</body>
</html>

效果：

image-20210318213307151.png

image-20210318213314271.png

从上面的效果中可以看出，行内元素设置width,height失效，并且margin-top/bottom不生效，margin-left/right生效，padding-left/right生效，padding-top不生效，但是好像padding-bottom好像生效了，难道行内元素设置paddin-bottom会产生边距效果？

image-20210318214054619.png

行内元素设置padding-bottom不会产生边距效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a, span {
            width: 300px;
            height: 100px;
            background-color: #ddd;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
   
    <span>我是span标签</span>
    <a>我是a标签</a>
    <div>我是行内元素下层的div元素，我是行内元素下层的div元素</div>
</body>
</html>

效果：

image-20210318214537857.png 由图片可知，padding-bottom并不会产生边距效果，但是又引发出了问题，为什么border-top不生效了？

下面看看另一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 150px;
            background-color: green;
        }
        span, a {
            width: 300px;
            height: 100px;
            padding: 150px 50px;
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <!-- <div class="demo">我是div元素</div> -->
    <span class="index">我是span标签</span>
    <a class="index">我是a标签</a>
</body>
</html>

效果：

image-20210318221145650.png

border-top还是没有生效

将上面div元素的注释取消，效果

image-20210318221351564.png

image-20210318221452402.png

可以发现span标签的border-top不是不生效，而是不在当前的视口区域了，上面span标签上面还空着(还没使用)150px的高度，而这150px的高度恰好是其设置的padding-top的高度，当div元素的高度设置为150px，使用了之前空着的150px的高度，所以border-top就看得到了。

对行内元素设置paddin-bottom/top的总结：

  1. 会留出相对应高度区域
  2. 但在此区域内，不会产生边距效果（兄弟节点可在此区域进行渲染）

为什么img标签可设置宽高？

img属于行内元素，行内元素不能设置宽高，但是img却可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>
<body>
   <img src="./cat.jpg">
</body>
</html>

image-20210318223102502.png

可替换元素

可替换元素的内容不受当前css样式的影响。css可以影响其渲染的位置，但不会影响可替换元素自身的内容，可替换元素自身的内容由元素的标签和属性决定

可替换元素一般具有内在尺寸所以具有width和height，可以设定。如果不指定img的width和height时，就按其内在尺寸显示，即图片被保存时的宽度和高度。

img元素是替换元素，img里面的内容由src和alt决定，具有内在尺寸，所以可以设置大小。

行内块元素

dispaly:inline-block;

常见的行内块元素

select  textarea input 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       input,select,textarea {
           width: 200px;
           height: 100px;
           margin: 10px;
           padding: 10px;
       }
       textarea {
           /* 可设置textarea与input、select对齐 */
           vertical-align: middle;
       }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入内容">
    <textarea name="textarea" id="" cols="30" rows="10"></textarea>
    <select name="select" id="select"></select>
    <span>我是span元素</span>
    <div>我是div元素</div>
</body>

</html>

image-20210318231302325.png

image-20210318231312488.png

image-20210318231320170.png

特点：

  1. 和相邻的行内元素、行内块元素在同一行显示，与块级元素不在同一行
  2. 默认宽高是其内容本身的宽高
  3. 宽度、高度、行高、外边距以及内边距都可以手动设置
avatar
文章
阅读
粉丝