Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作

2,417 阅读3分钟

前言

持续总结输出中,今天分享的是Web前端,CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性

1、块级元素

特点:

  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高

代表标签: • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

代码参考:

<!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">
    <style>
        /* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>治愈理财迷茫,创造复利人生</div>
    <div>富有的习惯,决定你一生的财富!</div>
</body>
</html>

在这里插入图片描述

2、行内元素

特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高(替换元素除外)

代表标签:

• a、span 、b、u、i、s、strong、ins、em、del......

代码参考:

<!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">
    <style>
        /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
        span {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <span>富有的习惯,决定你一生的财富!</span>
    <span>治愈理财迷茫,创造复利人生</span>
</body>
</html>

请添加图片描述

3、行内块元素

特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高(替换元素除外)

代表标签:

• a、span 、b、u、i、s、strong、ins、em、del......

代码参考:

<!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">
    <style>
        /* 行内块: 一行显示多个; 加宽高生效 */
        img {
            width: 100px;
            height: 100px;
        }
        input{
            width:100px;
            height:24px;
        }
        div{
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <img src="./images/2.jpg" alt="">
    <img src="./images/2.jpg" alt="">

    <div>
        <input type="text">
        <input type="text">
    </div>
    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div>
       <button>提交</button>
       <button>重置</button>
    </div>  
</body>
</html>

在这里插入图片描述

4、元素显示模式转换

改变元素默认的显示特点,让元素符合布局要求

属性效果使用频率
display:block转换成为块级元素较多
display:inline-block转换成为行内块元素较多
display: inline转换成为行内元素较少

代码参考:

转换成为块级元素

<!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>Document</title>
    <style>
        /* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
        span {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 块 */
            display: block;
        }
    </style>
</head>
<body>
    <span>富有的习惯,决定你一生的财富!</span>
    <span>治愈理财迷茫,创造复利人生</span>
</body>
</html>

请添加图片描述

转换成为行内块元素

<!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>Document</title>
    <style>
        /* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */
        div {
            width: 300px;
            height: 100px;
            background-color: pink;

            /* 行内块 */
            display: inline-block;

        }
    </style>
</head>
<body>
    <div>治愈理财迷茫,创造复利人生</div>
    <div>富有的习惯,决定你一生的财富!</div>
</body>
</html>

请添加图片描述

转换成为行内元素

<!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>Document</title>
    <style>
        /* 块: 独占一行; 宽度默认是父级100%; 添加宽高都生效 */
        div {
            width: 300px;
            height: 100px;
            background-color: pink;

            /* 行内 */
            display: inline;
        }
    </style>
</head>
<body>
    <div>治愈理财迷茫,创造复利人生</div>
    <div>富有的习惯,决定你一生的财富!</div>
</body>
</html>

请添加图片描述

4、HTML嵌套规范注意点

块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等......

但是: p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

但是:a标签不能嵌套a标签

参考代码

<!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>Document</title>
</head>
<body>
    <!-- p 和 h标题不能相互嵌套 -->
    <p>
        <h1>理财就是理生活</h1>
    </p>
    <!-- p里面不能包含div -->
    <p>
        <div>治愈理财迷茫,创造复利人生!</div>
    </p>
     <!-- a标签里面不能嵌套a标签 -->
    <a>理财<a>理生活</a></a>
</body>
</html>

在这里插入图片描述

5、居中方法总结

在这里插入图片描述

6、CSS 特性

1. 继承性

子元素有默认继承父元素样式的特点(子承父业)

以继承的常见属性(文字控制属性都可以继承)

  1. color
  2. font-style、font-weight、font-size、font-family 3. text-indent、text-align
  3. line-height
  4. ......

注意点:

• 可以通过调试工具判断样式是否可以继承

继承失效的特殊情况

如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式

1. a标签的color会继承失效 • 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了

2. h系列标签的font-size会继承失效 • 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了

2. 层叠性

特点

  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意点:

  1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

6、综合案例

  1. 普通导航-效果图
<!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>Document</title>
    <style>
        /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
        a {
            text-decoration: none;
            width: 100px;
            height: 50px;
            border-radius: 4px;
            background-color: orange;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        a:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- a*5 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">首页</a>
    <a href="#">前端</a>
    <a href="#">后端</a>
    <a href="#">移动开发</a>
    <a href="#">人工智能</a>
</body>
</html>

请添加图片描述

  1. 五彩导航-效果图
<!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>Document</title>
    <style>
        a {
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
        .one {
            background-image: url(./images/bg1.png);
        }

        .two {
            background-image: url(./images/bg2.png);
        }

        .three {
            background-image: url(./images/bg3.png);
        }

        .four {
            background-image: url(./images/bg4.png);
        }

        .one:hover {
            background-image: url(./images/bg5.png);
        }

        .two:hover {
            background-image: url(./images/bg6.png);
        }

        .three:hover {
            background-image: url(./images/bg7.png);
        }

        .four:hover {
            background-image: url(./images/bg8.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">首页</a>
    <a href="#" class="two">前端</a>
    <a href="#" class="three">后端</a>
    <a href="#" class="four">人工智能</a>
</body>
</html>

请添加图片描述

6、总结

在这里插入图片描述

最后分享一句金句:

不要只注重形式上的修辞而放弃了实质上的思考。《沉思录》 ——马可.奥勒留

本次的分享就到这里了!!!