昨天学习css元素显示模式

Ara～追着风跑 2022-01-15 08:08:48

<!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>元素显示模式</title>
    <style>
        /* 什么是元素显示模式
            作用:网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
            元素显示模式就是元素以什么样的方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
            HTML元素一般分为块元素和行内元素两种类型 */
        /* 2.2.1块元素 */
        /* 常见的块元素有h1~h6,p,div,ul,ol,li 其中div标签是最典型的块元素
            块元素的特点1.比较霸道，独自占一行
                        2.高度，宽度，外边距以及内边距都可以控制
                        3，宽度默认是容器（父级宽度）的100%
                        4.是一个容器及盒子，里面可以放行内或者块元素 */
        /* 注意点
        1.文字类的元素不能使用块元素
        2.p标签主要用于存放文字，因此p标签里面不能放块元素，特别是不能放div
        3.h1~h6等都是文字类块级标签，里面不能放其他块级元素 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        /* 2.2.2行内元素 */
        /* 常见的行内元素有a，strong，b，em，i，del，s，ins，u，span等
        span标签是最典型的行内元素，有的地方也将行内元素称为内联元素。 */
        /* 行内元素的特点1.相邻行内元素再一行上，一行可以显示多花个
                        2.高，宽直接设置是无效的
                        3.默认宽度就是它本身内容的宽度
                        4.行内元素只能容纳文本或其他行内元素 */
        /* 注意1.链接里面不能再放链接
                2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全 */
        
        span {
            /* 改的宽度和高度是不是没有用运行一下试试看 */
            width: 500px;
            height: 500px;
            background-color: red;
        }
        /* 行 内 块 元素*/
        /* 再行内元素中有几个特殊的标签，img，input，td 它们同时具有块元素和行内元素的特点
        1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
        2.默认宽度就是它本身内容的宽度（这是上面讲的行内元素的特点）
        3.高度，行高，外边距以及内边距都可以控制（这是上面讲的块级元素的特点吧） */
    </style>
</head>

<body>
    <div>呀呵，你整挺霸道啊</div>
    <h5>我不服</h5>
    <!-- 下面一个错误示例 -->
    <p>
        <div>呀呵，竟然错了</div>
    </p>
    <span>小王你怎么穿着品如的衣服呢</span> <strong>品如的衣服</strong>
    <span>小王</span><strong>品如的衣服</strong><br>
    <input type="text">
    <input type="text">
</body>

</html>

...全文