本文为转帖, 原帖请看:
http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html
几点, display:block: 自动换行
display:none : 隐藏div内容,与 hidden相比, 不占用位置.
摘抄:
2、display的值有哪些
Css display值与解释
参数:
block :块对象的默认值。用该值为对象之后添加新行。之前也添加一行。
none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :内联对象的默认值。用该值将从对象中删除行。如果其前后都是inline的则在同一行
compact :分配对象为块对象或基于内容之上的内联对象
marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用
inline-table :将表格显示为无前后换行的内联对象或内联容器
list-item :将块对象指定为列表项目。并可以添加可选项目标志
run-in :分配对象为块对象或基于内容之上的内联对象
table :将对象作为块元素级的表格显示
table-caption :将对象作为表格标题显示
table-cell :将对象作为表格单元格显示
table-column :将对象作为表格列显示
table-column-group :将对象作为表格列组显示
table-header-group :将对象作为表格标题组显示
table-footer-group :将对象作为表格脚注组显示
table-row :将对象作为表格行显示
table-row-group :将对象作为表格行组显示
3、css display:block
Display:block是我们常用的,block也是Display默认的值。
block元素(即默认display:block)的特点是:
· 总是在新行上开始;
· 该对象随后的内容自动换行;
· 高度,行高以及顶和底边距都可控制;
· 宽度缺省是它的容器的100%,除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。(意思是他们默认显示方式是block)
实例1.
CSS代码:
Html对应运用代码:
< span class = "divcss" >我的后面文字会换行</ span >我是被前面的divcss对应CSS属性换行。
|
< span >不会被换行,因为我没有被设置display:block</ span > |
对应结果截图:
实例2.
< div style = "width:200px;margin:0;background-color:#CCCCCC" >
|
< p style = "display:block;margin:0;" >the first line</ p >
|
< p style = "display:block;margin:0;width:40%" >the second line</ p >
|
< div style = "margin-top:2px;margin-bottom:2px;margin-left:10px;margin-right:10px;height:20px;" >test div</ div >
|
可以看出这就是三行,可以看出宽度默认设置成其容器的100%,也可以设置成其他百分比。
4、css display:none
此display的none值,我们也常常使用,用于隐藏对象内容,被隐藏的对象也不会占用自身固有宽度高度空间。
例如在导航条的二级菜单中就会使用此属性显示和隐藏二级菜单。
5、css display:inline
Display:inline,我们常常在li中使用它。功能是让li排成一排(称:删除行)。
接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。
CSS代码
ul.divcss li{ display : inline } |
解释:ul.divcss对应li CSS样式属性为display:inline
inline元素(即默认display:inline)的特点是:
· 和其他元素都在一行上;
· 高,行高及顶和底边距不可改变;
· 宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子
Html对应代码:
< li >我父级ul没有divcss5样式</ li >
|
< li >我在divcss5下li站成一排</ li >
|
演示结果图:
说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式.
inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:
1. 让一个inline元素从新行开始;
将需要新开一行的元素的display设置成block.
2. 让块元素和其他元素保持在一行上;
将块元素的display的属性设置成inline.
3. 控制inline元素的宽度(对导航条特别有用);
4. 控制inline元素的高度;
<script type="text/javascript"></script>
<script type="text/javascript"></script>
分享到:
相关推荐
目录安装程序Om gebruik te kunnen maken van mijn存储库和Github页面克隆: git clone https://github.com/dannyfrelink/Blok-Tech.gitVervolgens软件包在deze文件夹中可按层次安装: nvm installOm mijn服务器的...
过程 Auteur: -Noah Makmel- Markdown秘籍:Hulp 。 Nb。 斯巴达州歌剧院的标准结构。 范杰·普杰斯的诉讼程序。 最佳实践网站。 Mijn opdracht: ://www.nolabel.com/ 布龙内利斯特 ...-samen met je groepje o
Blok-Tech | 求职者Blok Tech:相匹配的应用程序,前端开发和后端开发概念游戏匹配者是跨平台匹配的游戏玩家,他们是游戏玩家。 Doormiddel van een破冰船是Verege游戏玩家的反攻之地。 比赛的对手,足球比赛的联络...
全部归功于Los Gordos ... 用法 将其包含在您的项目中 您可以将blokkfont.css用于 rawgit 链接,也可以使用blokkfont_original.css直接从包含字体,基本 URL 是...link href="https://gitcdn.xyz/repo/octoshrimpy/blok
过程 Auteur: -Carolinie Subramamiam- Markdown秘籍:Hulp 。 Nb。 斯巴达州歌剧院的标准结构。 范杰·普杰斯的诉讼程序。 Besteedt de tijd voor pracht en praal aan je网站。 布龙内利斯特 ...
区块技术20/21 巴布斯·卢丁加(Babs Luidinga) 欢迎 欢迎来到我的区块技术资料库! 对于区块技术,我们的任务是基于HTML,CSS,JS,NODE.js和... 在区块技术课程中,您有3门课程,即项目技术,前端开发和后端开发。
流程报告作者:安娜·维安宁(Anna Vianen) Markdown秘籍: 。 Nb。 标准结构和spartan格式完全可以。 它与您的过程报告的内容有关。 花些时间在您的网站上盛况空前。... 我了解该结构的工作原理。...
游戏配对者 概念 游戏匹配者是跨平台匹配的游戏...git clone https://github.com/M4TThys123/Blok-Tech-Team.git cd npm install npm start (便携式计算机的终端设备的jeb命令和运行命令) Opdracht Wij Zijn Door M
配套应用 阻止技术分配; 专注于匹配功能和Node.JS 它有什么作用? 这个应用程序专注于为蒸汽用户提供与相同偏好的人建立联系的体验。... $ git clone https://github.com/jortdus/blok-tech.git # Go into the r
Dit是blok tech中的de Repository voor项目技术。 表中的内容 装置 执照 装置 Wanneer和ge maken van dit项目,涉及Node.js和npm软件包安装程序。 Volg hieronder de volgende踩踏。 Om dit project op te halen ...
在IT行业中,JavaScript是一种至关重要的编程语言,尤其在网页开发领域。"stemwijzer-B7W21"可能是一个特定的教学资源或者项目,专注于第七块内容的第二十一周的学习计划,这通常意味着它包含了深入学习JavaScript的...
标题中的“blok-tech”似乎是指一个特定的技术项目或平台,专注于创建配套应用程序。这个项目的重点在于利用技术来构建能够与主应用或者其他系统协同工作的辅助工具。从标签中我们可以看出,“JavaScript”是该项目...
适用于 iPad 和 iPhone 上的 Pythonista + 编辑的简单静态站点生成器:在编辑中编写并发送到 blok。 如果您有反馈或实际使用它,请告诉我! 欢迎拉取请求。 这个怎么运作 在build_site() ,读取每个帖子,转换为 ...
【标题】"AP_Blok_D:Javascript区块D Johan van de Glind" 提示我们这是一个关于JavaScript编程的学习资源,由Johan van de Glind教授或创建。JavaScript是一种广泛使用的客户端和服务器端编程语言,用于实现网页的...
"blok-tech-team4"这个项目可能是一个团队合作的成果,专注于利用JavaScript技术来创建动态、交互式的Web应用程序。下面将详细介绍JavaScript以及它在实际项目中的应用。 1. JavaScript基础:JavaScript是一种解释...
Space Blok 是一款 1-4 人游戏,其目标是通过摧毁游戏块来收集尽可能多的积分。 该游戏利用开源 BEPUphysics 库为游戏对象提供 3D 模拟和逼真的碰撞处理。 该项目托管在 GitHub: : 有关游戏的更多信息,请参阅 ...
AU2_Blok_SSL_Troubleshooting_with_Wireshark_and_Tshark.
本文档对应的知识点为:计算机系统结构、 blok 图设计、主板设计、PC hardware 设计。 1. 计算机系统结构: 根据文档中的系统块图,可以看到整个系统由多个模块组成,包括中央处理器(CPU)、存储器(Memory)、...
过程 埃斯特·范·穆伊登 Markdown秘籍:Hulp 。 Nb。斯巴达州歌剧院的标准结构。范杰·普杰斯的诉讼程序。最佳实践网站。 布龙内利斯特 -布朗1- -布朗2- ... -dit ging goed&dit was lastig- ...Dit
Inhoud自述文件 Wat het project doet Wat de feature doet Installeren Testen功能 做项目 研究风格 清洁代码artikel JavaScript设计模式artikel 1个构建工具 托管服务 预约定价安排 线框上传 ...