css块级元素与行内元素与行内块元素

最新推荐文章于 2023-03-02 22:07:05 发布

XINGAO丨

最新推荐文章于 2023-03-02 22:07:05 发布

阅读量639

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44749729/article/details/108377605

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

概念

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

常见元素

常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,td,th；

常见内联元素有：em,strong,span,button,input,label,code,select,img,textarea

区别

1.块级元素占据一整行，内联元素的宽度是其元素内容的宽度，多个内联元素排列会放在同一行里除非放不下，才会挤到新的一行
2.块级元素可以设置宽度width和高度height，而内联元素设置widht和height是无效的
3.块级元素可以包含块级元素和内联元素，而内联元素只能包含文本
4.块级元素可以设置margin和padding属性，行内元素只有margin-left、margin-right、padding-left、padding-right起作用
5.内联元素中间有缝隙

设置

通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现

将div改为行内元素不换行
缺点：两个行内元素中间有缝隙但是可以通过margin-left 去掉

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <div class="a">aaaa</div>
        <div class="b">bbbb</div>
    </div>
</body>
<style>
    #app {
        position: relative;
        width: 400px;
        height: 400px;
        background-color:khaki;
    }

    .a {
        display: inline;
        background-color: cornsilk;
    }
    .b{
        display: inline;
        background-color:lavenderblush ;
    }
</style>

</html>

span改为块级元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <span class="a">aaaa</span>
        <span class="b">bbbb</span>
    </div>
</body>
<style>
    #app {
        position: relative;
        width: 400px;
        height: 400px;
        background-color:khaki;
    }

    .a {
        display: block;
        background-color: cornsilk;
    }
    .b{
        display: block;
        background-color:lavenderblush ;
    }
</style>

</html>

行内块元素

结合前两种优点
display：inline-block
既可以设置宽高，又可以设置padding和margin，又可以排在一行。

XINGAO丨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css块级元素与行内元素与行内块元素

概念块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见元素常见块级元素有：h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol,ul,li,form,pre,table,
复制链接

扫一扫

专栏目录