首页 > 其他分享 >CSS——display(元素显示)

CSS——display(元素显示)

时间:2022-10-10 15:33:48浏览次数:47  
标签:块级 元素 CSS inline display block

 display是可以更改默认的元素类型,默认的类型一般有:

1. 块级元素(block element)

特点:

  • 块级元素总是从新行开始,并占据可用的全部宽度。
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

2. 行内元素(inline element)

特点:

  • 行内元素不从新行开始,仅占据所需的宽度
  • <span>
  • <a>
  • <img>

3. 使用display转换元素

li {
  display: inline;
}

span {
  display: block;
}
  • inline(转换成行内元素)
  • block(转换成块级元素)
  • inline-block(转换成行内块元素)
  • none(不进行显示)

dispaly:none 和 visibility:hidden 的区别,前者不会占用相关的。而后者是隐藏后也会占用相应的空间,只是不显示而已。

 

标签:块级,元素,CSS,inline,display,block
From: https://www.cnblogs.com/xinbing/p/16775897.html

相关文章

  • vue中如何使用定义好的变量设置css样式
    前言在做项目的时候,通常会遇到需要在HTML标签上绑定变量来设置样式,对于这种需求,共有两种情况。实现第一种情况如果是对于代码中实实在在存在的HTML标签,我们可以直......
  • 30、css介绍
    30.1、css概述:css是CascadingStyleSheet的简称,中文称为层叠样式表,是用来控制网页数据表现的,可以使网页的表现与数据内容分离;30.2、css的四种引入方式:1、行内式:(1)在标记的st......
  • 深入理解css 笔记(3)
    过去经常将网页的根元素字号设置为0.625em或者62.5%。这样是为了将全局的font-size改成10px。这样设计师希望字号14px时,只需要写成1.4rem就好了。还使用了相对单......
  • css3的flex布局使用
    flex-direction:容器主轴的方向;值:row(默认:x轴由左到右)、column(y轴由上到下)、row-reverse(x轴由右到左)、column-reverse(y轴由下到上)flex-wrap:项目是否换行;值:nowrap(默认:不换行......
  • CSS——background(背景)
    background-color(背景颜色)在块级标签中,显示一整行背景颜色,在行内块中,显示设置的长宽背景颜色在行内中,显示文字内的背景颜色body{background-color:lightblu......
  • vue css 背景图 路径 记得加波浪号 background-image: url("~@/assets/images/d.jpg")
    vuecss背景图路径记得加波浪号background-image:url("~@/assets/images/d.jpg");为什么不加波浪号,图片显示不出来哟......
  • CSS——color(颜色)
    color1.设置字体的颜色:.head{ color:#333;} 2.属性后可跟的值:RGB每个参数(red、green 以及 blue)定义了0到255之间的颜色强度。调节三个值得出不......
  • 【前端必会】适合首页的滚动过渡(CSS transition)
    背景经常看到一些首页的过渡效果不错,闲来无事,实现个基本效果直接上代码<body><divid="1"class="blockbuild-in-scale-up"><h1>Hello1</h1></div><divid="2"c......
  • 查找数组中元素
    输入一个固定长度的数组,并输入一个要查找的数,给出能不能检索到的伪代码并测试integernumbers[6]Write"Enter6integernumbers,oneperline"Setindexto0While(......
  • html css JavaScript web网页设计期末作业 共5页【视频演示】
    ......