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

    目录

    行内元素的盒模型

    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>

     

  • 相关阅读:
    ICPC 2019-2020 North-Western Russia Regional Contest
    2022亚太数学杯数学建模竞赛A题（思路分析......)
    Everything 一款功能强大的搜索工具
    计算机毕业设计Java球馆预约管理系统(源代码+数据库+系统+lw文档)
    从零开始 Spring Cloud 15：多级缓存
    Git 内容学习
    现在的发票有发票专用章吗？如何验证发票真伪？百望云为您详解！
    C#.NET Framework RSA 私钥签名 公钥验签（验证签名） ver:20230612
    本地录像视频文件如何推送到视频监控平台EasyCVR进行AI视频智能分析？
    【7 同步原语】
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127622827