• 7.前端笔记-CSS-元素显示模式

    HTML元素分为块元素和行内元素两种类型

    1、块元素

    常见的块元素：

    <h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    块元素的特点：
    （1）独占一行
    （2）高度、宽度、内外边距可以控制，宽度默认和父级标签一样宽
    （4）是容器（盒子），可以放其他块级元素或行级元素
    注意:

    • 文字类的块元素内不能使用块级元素，如p标签、h1-h6标签主要存放文字，所以p标签、h1~h6标签里是不能放块级元素，特别是不能放div

    2、行内元素

    也叫内联元素

    <a>
<strong>
<span>
<b>
<em>
<i>
<del>
<ins>
<u>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    特点：
    （1）相邻的行元素可以在一行展示
    （2）宽度、高度直接设置是不生效的（可以间接设置）
    （3）默认宽度是它本身内容的宽度
    （4）行内元素只能容纳文本或其他行内元素
    注意：

    1、<a>标签里不能再放<a>标签了
2、特殊情况链接<a>里可以放块级元素，但要将<a>转为块级模式更安全

    • 1
    • 2

    3、行内块元素

    行内元素中的特殊标签，也叫行内块元素。同时具有块元素和行内元素的特点

    <img />
<input />
<td>

    • 1
    • 2
    • 3

    特点：
    （1）和相邻的行内元素（行内块元素）在一行上，但是他们中间会有间隙
    （2）默认宽度就是它本身内容的宽度
    （3）可以设置宽度和高度

    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>Documenttitle>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: green;
        }

        input {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    style>
head>

<body>
    <div id="d1">块级元素宽度高度可以设置div>块级元素独占一行
    <span>行内元素1span>
    <span>行内元素2，行内元素是可以在一行展示span>
    <span>行内元素宽、高设置无效span>
    <input type="text" placeholder="行内块元素可以设置宽高">
    <input type="text" placeholder="多个可以显示在一行">
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    在这里插入图片描述

    4、元素显示模式转化

    当一个模式的元素需要另一个模式元素的特性时，需要对该元素进行模式转化。比如想要给a标签设置宽度

    转换为块级元素：
display:block;
转换为行内元素：
display:inline;
转为行内块级元素：
display:inline-block


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    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>Documenttitle>
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline;
            background-color:yellow;
        }
        #link{
            width: 100px;
            height: 100px;
            display: block;
            background-color: aquamarine;
        }
        span{
            width: 100px;
            height: 100px;
            background-color:lightsalmon;
            display: inline-block;
        }
    style>
head>
<body>
    <div>块级转行内,在一行展示1div>
    <div>块级转行内,在一行展示2div>
    <a href="#">
        <a id="link" href="#">行内转块级a>
    a>
    <span>行内转行内块span>
    <span>行内转行内块span>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    在这里插入图片描述

  • 相关阅读:
    TIA博途_Profinet通信故障诊断及常见错误解决方法汇总
    第四代智能井盖传感器：智能井盖监测传感器怎么监测井盖位移
    【面试】JVM垃圾回收
    MySQL超详细安装教程 手把手教你安装MySQL到使用MySQL 最简单的MySQL安装方式，这种方式装，卸载也简单
    HTML学习笔记Day1-快速入门
    【软件测试】别人家的才是最优秀的，一位“屌丝”的逆袭......
    Nacos在企业生产中如何使用集群环境？
    LabVIEW中的数据通信方法
    使用docker部署springboot项目并连接上mysql数据库
    Instant,LocalDate,LocalDateTime,Date,String之间转换
  • 原文地址：https://blog.csdn.net/Ambition_ZM/article/details/128028248