块级元素和内联元素

最新推荐文章于 2024-03-31 19:45:48 发布

Statikk_Shiv

最新推荐文章于 2024-03-31 19:45:48 发布

阅读量166

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_22242915/article/details/79171929

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML块级元素

块级元素和内联元素的区别，简单的讲就是：
内联不占行，如input，a，b，td，a，img你会发现写多个input的时候，它们都排在同一行
块级元素，占行，如h1，p，ul，table。你会发现写多个div的时候，它们都各自占一行。

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽度始终是与浏览器宽度一样，与内容无关；
它可以容纳内联元素和其他块元素。

HTML内联元素

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
内联元素只能容纳文本或者其他内联元素。不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用

块级元素内联元素试验

未设置宽高的DIV，默认宽度未浏览器可视宽度，高度无

<head>
        <meta charset="UTF-8">
        <title>块级元素</title>
        <style>
            #no_width_height{
                border: 2px;
                border-color: blueviolet;
                border-bottom-style: groove;
            }
        </style>
    </head>
    <body>
        <br />
        <br />
        <br />
        <br />
        <div id="no_width_height">

        </div>
    </body>

这里写图片描述

子元素没有设置宽高，父元素设置宽高，子元素100%填充父元素宽度。即子元素的offsetWidth（offsetWidth=border+width+padding）=父元素的width。但是高度不填充

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                border: 1px;
                border-style: groove;
                width: 400px;
                height: 300px;
                border-color: blueviolet;
            }

            #son{
                border: 1px;
                border-style: groove;
                border-color: chartreuse;
                height: 80px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son">

            </div>
        </div>
    </body>

这里写图片描述

关于DIV的试验

子元素未设置宽高时，宽度默认为父元素宽度，但是加了padding：30%后不会撑开

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                border: 1px;
                border-style: groove;
                width: 400px;
                height: 300px;
                border-color: blueviolet;

            }

            #son{
                border: 1px;
                border-style: groove;
                border-color: chartreuse;
                padding: 30%;
                background-color: #7FFF00;

            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son">
                hello word!!
            </div>
        </div>
    </body>

这里写图片描述
2. 当父元素有宽度的时候，margin与padding的百分比都是相对于其父元素的width而言

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                border: 1px;
                border-style: groove;
                width: 400px;
                height: 300px;
                border-color: blueviolet;
                background-color: aqua;
                padding: 10%;
            }

            #son{
                /*border: 1px;
                border-style: groove;
                border-color: chartreuse;*/
                /*padding: 30%;*/
                background-color: #7FFF00;

            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="son">
                hello word!!
            </div>
        </div>
    </body>

father块

这里写图片描述

子元素padding 属性改为padding: 40%;
子元素padding 属性改为padding: 70%;

span

未设置宽高的span标签

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #son{
                border: 1px;
                border-style: groove;
                border-color: #8A2BE2;
            }
        </style>
    </head>
    <body>
        <div id="father">
        <span id="son">

        </span>
        </div>
    </body>

这里写图片描述
2. 给父元素加上height:50px;

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                background-color: bisque;
                height: 50px;
            }
            #son{
                border: 1px;
                border-style: groove;
                border-color: #8A2BE2;
            }
        </style>
    </head>
    <body>
        <div id="father">
        <span id="son">

        </span>
        </div>
    </body>

这里写图片描述

自身加上height:60px;

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #father{
                background-color: bisque;
                height: 50px;
            }
            #son{
                border: 1px;
                border-style: groove;
                border-color: #8A2BE2;
                height: 60px;
            }
        </style>
    </head>
    <body>
        <div id="father">
        <span id="son">

        </span>
        </div>
    </body>

这里写图片描述

* 1，2，3试验了内联元素不支持宽高重点内容 *

1、行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3、行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width 无效，height无效(可以设置line-height)，margin上下无效，padding上无效。
参考https://www.cnblogs.com/Remix/p/4549396.html

Statikk_Shiv

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级元素和内联元素

HTML块级元素块级元素和内联元素的区别，简单的讲就是：内联不占行，如input，a，b，td，a，img你会发现写多个input的时候，它们都排在同一行块级元素，占行，如h1，p，ul，table。你会发现写多个div的时候，它们都各自占一行。总是在新行上开始，占据一整行；高度，行高以及外边距和内边距都可控制；宽度始终是与浏览器宽度一样，与内容无关；它可以
复制链接

扫一扫

专栏目录