CSS-元素分类以及改变显示模式-六

最新推荐文章于 2022-05-02 17:39:34 发布

@浩轩

最新推荐文章于 2022-05-02 17:39:34 发布

阅读量166

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/HAOXUAN_/article/details/107386321

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

元素根据表现的特性分为：块级元素、行内元素、行内块元素

1、块级元素
div、p、ul、li、dl、dt、dd、h1~h6…
特点：
1）独占一行；
2）设置宽高有效(padding、margin、line-height)；
3）不设置宽度，默认是父亲的百分之百；

2、行内元素
span/em/i/strong/a
特点：
1）可以与其他行内元素并排；
2）人为的设置宽高无效（不支持垂直方向的margin和padding）；
3）元素靠内容撑开；

3、行内块
img/input
特点：
1设置宽高；
2可以与其他行内元素或行内块元素并排；

table 显示模式是table

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        p {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        
        span {
            width: 80px;
            height: 80px;
            font-size: 20px;
            line-height: 30px;
            background-color: skyblue;
            /* margin: 0 auto; */
            margin-top: 30px;
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <!--
        元素根据表现的特性 分为块级元素、行内元素、行内块元素
        块级元素    div、p、ul、li、dl、dt、dd、h1~h6...
            特点    1独占 一行；2设置宽高有效(padding、margin、line-height);3不设置宽度，默认是父亲的百分之百
        行内元素    span/em/i/strong/a
            特点    1可以与其他行内元素并排；2人为的设置宽高无效（不支持垂直方向的margin和padding）；3元素靠内容撑开
        行内块      img/input
            特点    1设置宽高；2可以与其他行内元素或行内块元素并排；
        table       显示模式是table
    -->
    <div>拥抱前端</div>
    <p>学习前端<span>30</span>天,坚持<span>打卡</span>。</p>

    <img src="草莓.jpg" alt=""><img src="草莓.jpg" alt="">
</body>

</html>

行内元素设置宽高是没有作用的，但能改变它所占的空间

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /*
            display 改变元素的显示模式
            display: inline;转化为行内元素
            display: block;转化为块级
            display:inline-block;转化为行内块
            display:none;隐藏元素
            */
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        a {
            display: none;
            width: 80px;
            height: 80px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <a href="http://www.baidu.com">百度</a>
    <span>span</span>
</body>

</html>

@浩轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-元素分类以及改变显示模式-六

元素根据表现的特性分为：块级元素、行内元素、行内块元素1、块级元素div、p、ul、li、dl、dt、dd、h1~h6…特点：1）独占一行；2）设置宽高有效(padding、margin、line-height)；3）不设置宽度，默认是父亲的百分之百；2、行内元素span/em/i/strong/a特点：1）可以与其他行内元素并排；2）人为的设置宽高无效（不支持垂直方向的margin和padding）；3）元素靠内容撑开；3、行内块img/input特点：1设置宽高；2可
复制链接

扫一扫