CSS 显示(display的五种值)

最新推荐文章于 2024-05-22 19:36:03 发布
最新推荐文章于 2024-05-22 19:36:03 发布
阅读量100 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pckzzy111/article/details/132492989
版权 
<!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:first-of-type{
            display: none;
        }

        p:first-of-type, p:nth-of-type(2){
            display: inline;
            height: 30px;
        }

        p:nth-of-type(3){
            height: 30px;
            width: 50%;
        }

        span:nth-of-type(2){
            display: block;
            height: 30px;
            width: 50%;
            margin: 16px 0;
        }
        span:nth-of-type(3){
            display: block;
            height: 30px;
            width: 50%;
            margin: 16px 0;
        }

        span:nth-of-type(4){
            display: inline-block;
            height: 30px;
            width: 40%;
            margin: 16px 0;
        }

        span:nth-of-type(5){
            display: inline-block;
            height: 30px;
            width: 40%;
            margin: 16px 0;
        }
    </style>
</head>
<body>
    <!-- 
        标签： 网页的估计 通过标签嵌套搭建网页结构
        标签样式都可以可以替换的
        display: 
        none：不显示
        inline:行内元素  不能给与宽高
        block：块元素 可以给与宽高
        inline-block:行内块
    -->

    <span>span</span>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <span>span</span>
    <span>span</span>

    <span>span</span>
    <span>span</span>


</body>
</html>

pckzzy111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
（一）css-显示模式、基本属性、特性
前端 可乐 的博客
11-03 277
css 显示模式 、字体属性 、文本属性、css三大特性
css 元素显示隐藏的9种思路
12-28
在网页制作中，元素的显示...注意：如果要适用于任何元素需要提前储存元素的display值 <button id=show>显示</button> <button id=hide>隐藏</button> 测试文字 [removed] show.onclick =
HTML之CSS 布局 - display 属性
11-02
display 属性是用于控制布局的最重要的 CSS 属性。display 属性规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
浅谈CSS的Display属性可能的值
12-13
none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 <table>），表格
CSS 显示方式
小渣渣的博客
10-05 996
目录 1.隐藏 2.块级 3.内联 4.内联-块级 5.其他显示方式 （1）list-item (2) table （3）内联-表格 前后不换行的表格 （4）单元格 table-cell 元素的display显示方式有多种，隐藏、块级、内联、内联-块级 1.隐藏 通过display的方式隐藏一个元素 display:...
CSS系列之元素的显示与隐藏
m0_67403076的博客
03-08 4413
目录 1、元素显示和隐藏的出现的目的 2、使用场景 3、display 显示 4、visibility 可见性 5、overflow 溢出 后记 1、元素显示和隐藏的出现的目的 让一个元素在页面中消失或者显示出来。 2、使用场景 类似广告网站，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。 3、display 显示 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display: block 除了转换为块级元素之外，同时还有显示元素的意思。 特点：
JS基础 day4 | 函数
csyldjy的博客
05-28 1292
1 函数 1.1 为什么需要函数 函数： function，是被设计为执行特定任务的代码块 说明： 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于 精简代码方便复用。 比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的。 1.2 函数使用 1 函数的声明语法 eg: 函数名命名规范 和变量命名基本一致 尽量小驼峰式命名法
新手小白练习js的第四天
weixin_52692705的博客
12-05 756
主要是函数的练习
07_乘法表
Strohht的博客
04-09 84
【代码】07_乘法表。
javascript函数讲解（70%的人能听懂）
m0_67742636的博客
07-17 835
js函数讲解（只有10%的人听懂）
python入门之函数
qq_44790921的博客
02-18 367
一、函数基础 1.函数的快速体验 1.1 快速体验 所谓函数，就是把具有独立功能的代码块组织为一个小模块，在需要的时候调用 函数的使用包含两个步骤： a.定义函数--封装独立的功能 b.调用函数--享受封装的成果 函数的作用，在开发程序时，使用函数可以提高编写的效率以及代码的重用 # 封装九九乘法表 def multiple_table(): row = 1 while row <= 9: col = 1 while col &lt
详解css中的display属性
01-21
inlineblockinline-blocknone把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden 还会保留。 那么，display:inline、display:block和display:inline-block有什么区别呢？ 复制代码代码...
css之display属性之inline-block布局实现详解
11-21
CSS display 属性 注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、...
【Web前端开发基础】CSS的元素显示模式和三大特性
m0_62611367的博客
02-26 636
目标：能够认识CSS的继承和层叠特性，会计算CSS的优先级和权重比较能够使用后代选择器选择标签 选择器1 选择器2 {属性名:属性值;能够使用hover伪类选择器设置标签的鼠标悬停状态 a:hover {属性名:属性值;能够设置标签的背景颜色和背景图片背景颜色 background-color背景图片 background-image:url(“图片的路径”)能够说出常见元素显示模式分为三种块级元素 display: block行内元素 display: inline。
Css实现省略号...及悬浮层显示全部内容的方法：
热门推荐
SunPeng的博客
01-13 3万+
1、单行文本省略： overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//... 2、多行文本省略： display:-moz-box;//火狐 display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden; 注： 英文自动换行： word-wrap:break-
CSS 显示：Display
梁辰兴的博客
09-20 1405
内联元素只能容纳文本或者其他内联元素，常见内联元素有a和span。块元素和内联元素的主要区别在于它们在页面上的布局方式以及可以应用的样式。块元素通常用于构建页面的“块级”结构，而内联元素则用于调整文本或其他内联元素的样式。，这样元素既可以像内联元素一样只占用必要的宽度，又可以像块级元素一样设置宽度和高度。块元素和内联元素是CSS中两种主要的元素类型，它们在布局和样式应用上有一些区别。，元素将显示为内联元素，只占用所需的宽度，不会独占一行。是你想要显示为内联元素的元素的ID。
CSS基础知识（三）CSS元素显示模式以及三大特性
weixin_65548623的博客
04-15 578
文章目录一、CSS的元素显示模式（一）块元素（二）行内元素（三）行内块元素 一、CSS的元素显示模式 1.作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局页面 2.HTML元素一般分为块元素和行内元素 （一）块元素 1.div为最典型的块元素，还有h1-h6,p,ul,ol,li等 2.特点 比较霸道，自己独占一行 高度，宽度，外边距以及内边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器及盒子，里面可以放行内或块级元素 3.注意 文字类的元素内不能使用
css设置当字数超过限制后以省略号（...）显示
DZQ1223的博客
06-29 1万+
① -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。③ -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。
CSS浮动（CSS从入门到精通学习第四天）
最新发布
m0_49067926的博客
05-22 994
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
css中display有哪些值
04-13
CSS中display属性可以设置的值有： - none：元素不显示，并且不占据任何空间。 - block：元素显示为块级元素，独占一行。 - inline：元素显示为内联元素，与其他内联元素在同一行显示，不独占一行。 - inline-block...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值