元素显示模式转换（HTML、CSS）

短命女 2023-10-03 12:39 22阅读 0赞

### 元素显示模式转换（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素显示模式转换</title>
        <style>
            a {
        
                /* width: 100px;
                height: 100px;
                background-color: red; */
                /* 因为a为行内元素，width height的 定义无效 */
    
                /* 把行内元素转换 为 块级元素 */
                display: block;
                width: 100px;
                height: 100px;
                background-color: red;
    
            }
    
            div {
        
                /*  把div转换为行内元素 */
                display: inline;
                width: 200px;
                height: 200px;
                background-color: blue
            }
    
            span {
        
                /*  width: 100px;
                height: 100px;
                background-color: red; */
                /*  因为是行内块元素 所以 width height 无效 */
                width: 100px;
                height: 100px;
                background-color: rgb(0, 153, 255);
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
        <a href="#">元素显示模式转换</a>
        <div>块级元素</div>
        <div>块级元素</div>
        <span>行内块元素</span>
        <span>行内块元素</span>
    
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关元素显示模式转换（HTML、CSS）

元素显示模式转换（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <

短命女/ 2023年10月03日 12:39/ 0 赞/ 23 阅读

相关【web前端开发】CSS的元素显示模式

前言元素的显示模式可以更好的帮助我们布局页面,了解元素的显示模式,可以让我们布局页面时更加简单清晰什么是元素显示模式元素显示模式就是元素(标签)以什么样的方

ゞ浴缸里的玫瑰/ 2023年09月27日 13:09/ 0 赞/ 120 阅读

相关 CSS-标签的显示模式，块级元素特点、行内元素特点、行内块级元素的特点，块元素、行内元素、行内块元素之间的转换

HTML 中的标签分为三种：块级元素、行内元素、行内块级元素；通过 CSS 中的样式属性 `display` 可转换元素的显示模式块级元素（block-level）

蔚落/ 2023年08月17日 17:17/ 0 赞/ 140 阅读

相关 2.1 CSS复合选择器、元素显示模式

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

快来打我*/ 2023年01月13日 06:18/ 0 赞/ 193 阅读

相关 CSS的元素显示模式-块元素、行内元素和行内块元素

CSS的元素显示模式什么是元素显示模式元素的显示模式是元素以什么方式进行显示。比如<div>自己占一行，<span>一行可以放多个。元素显示模式的分类

ゝ一纸荒年。/ 2022年12月17日 12:59/ 0 赞/ 187 阅读

相关 HTML+CSS 元素的显示模式

什么是元素显示模式在了解元素显示模式前，我们先来举个不恰当的例子：比如在世界上的人有成万上亿，那么归根结底只有两种人就是男人和女人，偶尔还有可能有第三种人-人妖。无论是

深碍√TFBOYSˉ_/ 2022年12月09日 03:28/ 0 赞/ 159 阅读

相关 CSS的元素显示模式（块元素 & 行内元素 & 行内块元素）

文章目录 1 什么是元素显示模式 2 块元素 versus 行内元素 3 行内块元素 4 元素显示模式总结 5 元素显示模式转换

客官°小女子只卖身不卖艺/ 2022年11月17日 14:58/ 0 赞/ 232 阅读

相关 css之元素显示方式的转换（display的用法）

CSS元素的显示方式的转换 1、隐藏元素（1）display样式的none <style type="text/css"> \p1\{ displa

Dear 丶/ 2022年06月15日 05:14/ 0 赞/ 480 阅读

相关元素显示方式

1、display display:none 隐藏（消失，不占位置） display:block 显示或转换为块元素 2、visibility

￡神魔★判官ぃ/ 2022年06月14日 06:52/ 0 赞/ 166 阅读

相关如何转换css元素的显示模式

display取值：inline（行内）、block（块级）、inline-block（行内块级）下面这个实例就是将span的显示模式转换为块级，将div的显示属性转...

小灰灰/ 2020年04月26日 06:31/ 0 赞/ 870 阅读