导图社区 显示模式
这是一篇关于显示模式的思维导图,主要内容包括:修改、显示模式,inline-block,inline,block。通过思维导图的形式,系统地梳理了与显示模式相关的HTML元素、CSS属性、排版布局问题、修改方法以及应用场景,旨在帮助读者更好地理解和应用显示模式在前端开发中的相关知识。
这是一篇关于原型对象(prototype)的思维导图,主要内容包括:原型链,原型继承,简介,属性,访问,作用,内存结构。原型对象是一个特殊的对象,它用于在创建新对象时提供属性和方法的共享。在基于原型的编程语言中,新创建的对象会继承一个原型对象的属性和方法,从而实现代码的复用和对象的继承。
这是一篇关于单例模式(Singleton)的思维导图,主要内容包括:其他实现方式,实现步骤(3步),实现方式。通过思维导图的形式,系统地展示了单例模式在Java中的不同实现方式、特点、使用场景以及与其他概念的关联,为理解和应用单例模式提供了全面的指导。
这是一篇关于列表样式的思维导图,通过思维导图的方式,系统地展示了HTML列表元素可以应用的多种样式选项,包括列表类型、样式图片、样式位置等,以及如何通过CSS的list-style相关属性来控制这些样式。
社区模板帮助中心,点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
显示模式
block
块元素
特点
独占一行
默认宽度:撑满父元素内容区
margin为0时
默认高度:由内容决定
可以通过CSS设置宽高
例如
主体结构
<html>、<body>
排版
<h1-h6>、<hr>、<p>、<pre>、<div>
列表
<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格
<table>、<tbody>、<thead>、<tfood>、<tr>、<caption>
表单
<form>、<option>
inline
行内元素
不独占一行
默认宽度:由内容决定
不能用CSS设置宽高
margin-top/bottom 设置无效
被视作文本
span
文本
<br>、<em>、<strong>、<sup>、<sub>、<del>、<ins>
<a>、<label>
inline-block
行内块元素
图片
<img>
单元格
<td>、<th>
表单控件
<input>、<textarea>、<select>、<button>
框架
<iframe>
幽灵空间问题
描述
行内块元素下留有空间
原因
行内块元素,被作为文本,默认x基线对齐,因此空白区域 为字体预留空间。
解决
A. 设置vertical-align 为 top/bottom 对齐
B. 设置为块元素,display : block
C. 设置父元素 font-size: 0
属性
元素之间空白问题
两个元素之间,回车换行,有一个空格效果
父元素 font-size : 0px
修改 显示模式
display
值
line
line-block
none
不占位隐藏
flex
css3,设置为伸缩容器 或 开启 伸缩布局
table
flow-root
该元素生成一个块级元素盒,其会建立一个新的块级格式化下文,定义格式化上下文的根元素。
visibility
show(默认值)
hidden
占位隐藏