display属性介绍

news/2024/11/25 18:24:12/

display:display属性设置元素如何被显示

1、display分类

  • display: none; ---------------让标签消失(隐藏元素并脱离文档流),即此元素不会被显示。
  • display: inline; ---------------内联元素(内联表签),此元素前后没有换行符。
  • display: block; ---------------块级元素(块级标签),此元素前后会带有换行符。
  • display: inline-block; -------既有inline的属性也有block属性,即行内块元素。
  • display:inherit;-----------规定应该从父元素继承 display 属性的值。

 

2、块级元素和内联元素

block元素:

  • block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度
  • block元素可以设置width和height属性。块级元素即使设置了宽度,仍然是独占一行
  • block元素也可以设置margin和padding属性

inline元素:

  • inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
  • inline元素的宽度是自身内容的宽度(默认有多少占多少)
  • inline元素设置width和height属性无效
  • inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

inline-block元素:

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)设置inline-block属性,使其既具有block的可设置宽度和高度特性又具有inline的同行特性。


http://www.ppmy.cn/news/877668.html

相关文章

新电脑验机步骤(2)

接上文《新电脑验机步骤》 👉点击转跳 提前将图吧工具箱下载好,存放在U盘或手机里。(文末附下载链地址) 文章目录 硬件信息查看CPU工具CPU-ZAIDA64 GPU工具磁盘工具屏幕工具附 硬件信息查看 CPU工具 一般情况下我们仅使用CPU-Z和…

DisplayX检测显示屏(附链接)

DisplayX检测显示屏: 在购买电脑显示屏,对显示屏的显示效果还是十分关注的,毕竟直接影响了我们的使用体验。 了解最多的可能也就是鲁大师的测试显示屏功能,但是鲁大师这个软件怎么说呢!有点小流氓,所以呢…

第12章 STM32+BH1750光照传感器+OLED模块显示环境光照强度

今天给大家介绍一块嵌入式毕设中也经常用到的一款传感器——BH1750光照传感器,如下图。(该传感器的购买链接和代码我已放在资料里,想要资料的同学,评论区留下邮箱即可)相比光敏传感器,它可以直接输出环境光…

C++ 文本文件处理

C 文本文件处理 文件流对象 #include <iostream>#include <fstream>#include <string>std::ifstream&#xff1a;用于从文件中读取数据的输入文件流类std::ofstream&#xff1a;用于向文件中写入数据的输出文件流类std::fstream&#xff1a;同时具有读写功…

《photoshopCS4中文版完全自学手册》视频教程

[转自]http://68ps.5d6d.com/thread-9518-1-4.html 《photoshopCS4中文版完全自学手册》视频教程是一本&#xff0c;能在短短一个星期&#xff0c;把你从一个不懂photoshop CS4变成photoshop CS4专家的级别的视频教程给你一只笔&#xff0c;你能成为毕加索么&#xff0c;不能&…

2018年计算机基础应用教程,全国计算机等级考试一级教程:计算机基础及Photoshop应用(2018年版)...

《全国计算机等级考试一级教程&#xff1a;计算机基础及Photoshop应用(2018年版)》是根据教育部考试中心颁布的《全国计算机等级考试一级Photoshop考试大纲(2018年版)》编写的&#xff0c;以AdobePhotoshopCS5为教学内容&#xff0c;主要内容包括&#xff1a;计算机基础知识&am…

《Adobe Photoshop CS5中文版经典教程(全彩版)》—第2课2.3节概述

本节书摘来自异步社区《Adobe Photoshop CS5中文版经典教程&#xff08;全彩版&#xff09;》一书中的第2课2.3节概述&#xff0c;作者【美】Adobe公司,更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.3 概述Adobe Photoshop CS5中文版经典教程&#xff08;全彩版&a…

XP系统装PhotoShop的CS3版本

XP系统装PhotoShop的CS3版本&#xff0c;可用 XP系统装PhotoShop的CS版本 在XP系统下&#xff0c;装了一次PhotoShop的CS版本&#xff08;我这里装的是CS3&#xff09;&#xff0c;这里说一下经历。在网上查的说目前最新的PhotoShop版本已不再适配XP系统。Adobe宣称&#xff0…