• 什么是行内元素的盒模型

    目录

    行内元素的盒模型

    display

    可选值：

     visibility

                    可选值：

    行内元素的盒模型

    行内元素不支持设置宽度和高度

    但是这并不是说明行内元素没有内容区

    而是通过width和height不能改变内容区的大小

    行内元素的内容区是由他里面的内容决定的，并不能手动进行修改

    行内元素可以设置padding，但是垂直方向不会影响页面的布局

    行内元素可以设置border，垂直方向的border不会影响页面的布局

    行内元素可以设置margin，垂直方向的margin不会影响布局

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         
    10.  
    11.         
    12.         .box1{
    13.             width: 200px;
    14.             height: 200px;
    15.             margin-top: 500px;
    16.             background-color: aqua;
    17.             
    18.  
    19.         }
    20.         span{
    21.             width: 100px;
    22.             height: 100px;
    23.         background-color: blue;
    25.         
    26.         }
    27.         
    28.     style>
    29. head>
    30. <body>
    31.     <span>我是行内元素span>
    32.     <div class="box1"> div>
    33.     
    34. body>
    35. html>

    display

    display:用来设置元素显示的类型

    可选值：

                    inline

                                    将元素设置为行内元素

                    block

                                    将元素设置为块元素

                 inline-block

                                    将元素设置为行内块元素（行内块既可以设置宽度和高度，又不会独占一行）

                    table:

                                    将元素设置为一个表格

                    none:

                                    元素不再页面中显示（既不显示也不会再占据位置，要与hidden区别开）

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         
    10.  
    11.         
    12.         .box1{
    13.             width: 200px;
    14.             height: 200px;
    15.             margin-top: 500px;
    16.             background-color: aqua;
    17.             
    18.  
    19.         }
    20.         span{
    21.             display: block;
    22.             width: 100px;
    23.             height: 100px;
    24.         background-color: rgb(238, 0, 255);
    25.         
    26.         }
    27.         
    28.     style>
    29. head>
    30. <body>
    31.     <span>我是行内元素span>
    32.     <div class="box1"> div>
    33.     
    34. body>
    35. html>

     

    none举例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         
    10.  
    11.         
    12.         .box1{
    13.             width: 200px;
    14.             height: 200px;
    15.             margin-top: 500px;
    16.             background-color: aqua;
    17.             
    18.  
    19.         }
    20.         span{
    21.            display: none;
    22.             width: 100px;
    23.             height: 100px;
    24.         background-color: rgb(238, 0, 255);
    25.         
    26.         }
    27.         
    28.     style>
    29. head>
    30. <body>
    31.     <span>我是行内元素span>
    32.     <div class="box1"> div>
    33.     
    34. body>
    35. html>

     visibility

    visibility:用来设置元素的显示状态

                    可选值：

                                    visible ：

                                                    默认值，元素在页面中正常显示

                                    hidden：

                                                    元素在页面中隐藏，不显示，但是依然占据页面的位置

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         
    10.  
    11.         
    12.         .box1{
    13.             width: 200px;
    14.             height: 200px;
    15.             margin-top: 500px;
    16.             background-color: aqua;
    17.             
    18.  
    19.         }
    20.         span{
    21.            visibility: hidden;
    22.             width: 100px;
    23.             height: 100px;
    24.         background-color: rgb(238, 0, 255);
    25.         
    26.         }
    27.         
    28.     style>
    29. head>
    30. <body>
    31.     <span>我是行内元素span>
    32.     <div class="box1"> div>
    33.     
    34. body>
    35. html>

     

  • 相关阅读:
    Python绘图系统16：动态更新tkinter组件
    USB 四种传输方式的通信API
    人工智能导论网课笔记与实战
    【kafka】九、kafka消费者分区分配策略
    Java版ORM最初雏形
    Git 的基本使用(笔记)
    有关HashMap的介绍
    Seata 1.5.2 源码学习
    深度学习基础知识 nn.Sequential ｜ nn.ModuleList ｜ nn.ModuleDict
    【无标题】
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127622827