CSS学习知识整理(五)Css display(显示)
2023-09-11 14:20:19 时间
display的作用
display的作用:规定了元素以何种方式展示。
浏览器支持
所有主流浏览器都支持 display 属性。
**注释:**如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。
但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
CSS Display - 块和内联元素
块元素是一个元素,占用了全部宽度,在前后都是换行符。
块元素的例子:
<h1>
<p>
<div>
内联元素只需要必要的宽度,不强制换行。
内联元素的例子:
<span>
<a>
相关文章
- Java程序猿的JavaScript学习笔记(12——jQuery-扩展选择器)
- 学习新方法:加强探索性测试技能
- 80%的人都没看过的【软件测试】零基础到精通完整版学习路线+资料包
- 适合新人学习的iOS官方Demo
- 【CSS】 Css背景图片及背景渐变综合知识和技巧大全(代码实例)
- Nginx学习笔记
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- 【前端学习之HTML&CSS进阶篇】-- CSS第四篇 -- 样式总结与补充
- 【前端学习之HTML&CSS】-- CSS第二篇 -- 常见样式声明
- 【前端学习之HTML&CSS】-- CSS第一篇 -- 为网页添加样式
- 【前端学习之HTML&CSS】-- HTML第七篇 -- 图片元素与多媒体元素
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
- BLAS库学习
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- CSS学习笔记
- 2014第16周三CSS布局再学习摘录
- Java学习-068-多线程01:继承 Thread 类
- 【hadoop学习项目】9. 存在依赖关系的多个MapReduce处理
- CSS学习篇核心之——盒子模型
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(一)Css 简介、语法与创建
- 学习 HTML+CSS 这一篇就够了
- css基础教程【学习笔记】
- 【机器学习】支持向量机(SVM)算法
- 学习笔记(17):Python网络编程&并发编程-Process对象的其他属性或方法
- 【深度学习】——2021年FPN特征金字塔
- html css的简单学习(二)