CSS入门--元素的显示模式

最新推荐文章于 2021-09-16 19:54:54 发布

thorn豆豆

最新推荐文章于 2021-09-16 19:54:54 发布

阅读量138

点赞数

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

本文链接：https://blog.csdn.net/qq_45067479/article/details/110454123

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS入门–元素的显示模式

一.元素的显示模式分类：块元素，行内元素，行内块元素
二.
（1）块元素：
常见的块元素有< h 1>-< h 6 >,< d i v>,< ul >,< li >,< ol>等
特点：
独占一行；
高度宽度，外边距和内边距可以控制；
宽度默认是容器的100%；
是一个盒子，里面可以放行元素或者块元素
p标签主要用来放文字，不可以放div；
（2）行内元素：
常见的行内元素有：< a >< em >< span >
特点：
相邻行内元素可以在一行显示；
高宽直接设置是无效的；
默认宽度就是他本身文字内容的宽度
行内元素只能容纳文本或者其他行内元素

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素和行内元素</title>
    <style>
        div {

            background-color: pink;
        }

        a {
            color: red;
        }

        input {
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">我想买风衣</a>
        <span>还想买新手机</span>
    </div>
    <input type="text">
</body>

</html>

（3）行内块元素
常见的行内块元素：< img/ >,< input/ >,< td>-----他们同时局具有行内元素和块元素的特点：
一行可以显示多个
默认宽度是本身内容的宽度
高度宽度内外边距可以控制
（4）元素显示模式的转换：
转换成块元素：display:block
转换成行元素：display:inline
转换成行内块元素：display:inline-block

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素模式的转换</title>
    <style>
        /* <!-- 把行元素a链接转化成块元素,可以设置宽度高度 --> */
        a {
            height: 200px;
            width: 500px;
            background-color: pink;
            display: block;
        }

        /* 把块元素div转化成行元素,变成行内元素后宽度高度无效 */
        div {
            height: 500px;
            width: 500px;
            background-color: skyblue;
            display: inline;
        }

        /* 把行内元素转换成行内快元素 */
        span {
            height: 200px;
            width: 500px;
            background-color: rgb(56, 61, 67);
            display: inline-block;
        }
    </style>
</head>

<body>

    <a href="#">榴莲披萨真好吃</a>
    <div>我想吃榴莲披萨</div>
    <div>我想吃榴莲披萨</div><br>
    <span>可是小陈不给我吃</span>
</body>

</html>