`
qdpurple
  • 浏览: 275743 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div display: blok/none 总结

阅读更多

本文为转帖, 原帖请看:

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代码:

.divcss{display:block}

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>
  
</div>

clip_image004[8]_thumb

可以看出这就是三行,可以看出宽度默认设置成其容器的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对应代码:

<ul
<li>我父级ul没有divcss5样式</li
<li>我是独行</li
<li>我是独行</li
</ul>
  
<ul class="divcss5"
<li>我父级ul有divcss5样式</li
<li>我站成一排</li
<li>我在divcss5下li站成一排</li
</ul>

演示结果图:

clip_image006_thumb[1]

说明:设置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>

 

分享到:
评论

相关推荐

    Blok-Tech:Opdracht Blok Tech,匹配的应用程序

    目录安装程序Om gebruik te kunnen maken van mijn存储库和Github页面克隆: git clone https://github.com/dannyfrelink/Blok-Tech.gitVervolgens软件包在deze文件夹中可按层次安装: nvm installOm mijn服务器的...

    Blokweb:Dit是Mijn网站或FeD blok网站

    过程 Auteur: -Noah Makmel- Markdown秘籍:Hulp 。 Nb。 斯巴达州歌剧院的标准结构。 范杰·普杰斯的诉讼程序。 最佳实践网站。 Mijn opdracht: ://www.nolabel.com/ 布龙内利斯特 ...-samen met je groepje o

    Blok-Tech:布洛克科技

    Blok-Tech | 求职者Blok Tech:相匹配的应用程序,前端开发和后端开发概念游戏匹配者是跨平台匹配的游戏玩家,他们是游戏玩家。 Doormiddel van een破冰船是Verege游戏玩家的反攻之地。 比赛的对手,足球比赛的联络...

    blokkfont:用于 http 的 Github 存储库

    全部归功于Los Gordos ... 用法 将其包含在您的项目中 您可以将blokkfont.css用于 rawgit 链接,也可以使用blokkfont_original.css直接从包含字体,基本 URL 是...link href="https://gitcdn.xyz/repo/octoshrimpy/blok

    前沿开发:Blok网站

    过程 Auteur: -Carolinie Subramamiam- Markdown秘籍:Hulp 。 Nb。 斯巴达州歌剧院的标准结构。 范杰·普杰斯的诉讼程序。 Besteedt de tijd voor pracht en praal aan je网站。 布龙内利斯特 ...

    blok-tech:Blok tech,Babs Luidinga

    区块技术20/21 巴布斯·卢丁加(Babs Luidinga) 欢迎 欢迎来到我的区块技术资料库! 对于区块技术,我们的任务是基于HTML,CSS,JS,NODE.js和... 在区块技术课程中,您有3门课程,即项目技术,前端开发和后端开发。

    blokweb:Blok Web前端开发网站

    流程报告作者:安娜·维安宁(Anna Vianen) Markdown秘籍: 。 Nb。 标准结构和spartan格式完全可以。 它与您的过程报告的内容有关。 花些时间在您的网站上盛况空前。... 我了解该结构的工作原理。...

    Blok-Tech-Team

    游戏配对者 概念 游戏匹配者是跨平台匹配的游戏...git clone https://github.com/M4TThys123/Blok-Tech-Team.git cd npm install npm start (便携式计算机的终端设备的jeb命令和运行命令) Opdracht Wij Zijn Door M

    blok-tech

    配套应用 阻止技术分配; 专注于匹配功能和Node.JS 它有什么作用? 这个应用程序专注于为蒸汽用户提供与相同偏好的人建立联系的体验。... $ git clone https://github.com/jortdus/blok-tech.git # Go into the r

    project-tech:专案技术

    Dit是blok tech中的de Repository voor项目技术。 表中的内容 装置 执照 装置 Wanneer和ge maken van dit项目,涉及Node.js和npm软件包安装程序。 Volg hieronder de volgende踩踏。 Om dit project op te halen ...

    stemwijzer-B7W21:stemwijzer Blok 7周21

    在IT行业中,JavaScript是一种至关重要的编程语言,尤其在网页开发领域。"stemwijzer-B7W21"可能是一个特定的教学资源或者项目,专注于第七块内容的第二十一周的学习计划,这通常意味着它包含了深入学习JavaScript的...

    blok-tech:主要技术blok-tech是het maken van een配套应用程序

    标题中的“blok-tech”似乎是指一个特定的技术项目或平台,专注于创建配套应用程序。这个项目的重点在于利用技术来构建能够与主应用或者其他系统协同工作的辅助工具。从标签中我们可以看出,“JavaScript”是该项目...

    blok:一个简单的 Pythonista + 编辑静态站点生成器

    适用于 iPad 和 iPhone 上的 Pythonista + 编辑的简单静态站点生成器:在编辑中编写并发送到 blok。 如果您有反馈或实际使用它,请告诉我! 欢迎拉取请求。 这个怎么运作 在build_site() ,读取每个帖子,转换为 ...

    AP_Blok_D:Javascript区块D Johan van de Glind

    【标题】"AP_Blok_D:Javascript区块D Johan van de Glind" 提示我们这是一个关于JavaScript编程的学习资源,由Johan van de Glind教授或创建。JavaScript是一种广泛使用的客户端和服务器端编程语言,用于实现网页的...

    blok-tech-team4

    "blok-tech-team4"这个项目可能是一个团队合作的成果,专注于利用JavaScript技术来创建动态、交互式的Web应用程序。下面将详细介绍JavaScript以及它在实际项目中的应用。 1. JavaScript基础:JavaScript是一种解释...

    space-blok-wp:1-4人游戏,玩家必须用球打破3D方块结构

    Space Blok 是一款 1-4 人游戏,其目标是通过摧毁游戏块来收集尽可能多的积分。 该游戏利用开源 BEPUphysics 库为游戏对象提供 3D 模拟和逼真的碰撞处理。 该项目托管在 GitHub: : 有关游戏的更多信息,请参阅 ...

    AU2_Blok_SSL_Troubleshooting_with_Wireshark_and_Tshark

    AU2_Blok_SSL_Troubleshooting_with_Wireshark_and_Tshark.

    Acer Emachines E732 (Quanta ZRD).pdf

    本文档对应的知识点为:计算机系统结构、 blok 图设计、主板设计、PC hardware 设计。 1. 计算机系统结构: 根据文档中的系统块图,可以看到整个系统由多个模块组成,包括中央处理器(CPU)、存储器(Memory)、...

    blokweb-frontend:前端开发网站voor blok网站

    过程 埃斯特·范·穆伊登 Markdown秘籍:Hulp 。 Nb。斯巴达州歌剧院的标准结构。范杰·普杰斯的诉讼程序。最佳实践网站。 布龙内利斯特 -布朗1- -布朗2- ... -dit ging goed&dit was lastig- ...Dit

    techblok:al het werk voor blok tech(blok 3)范·汤姆·克拉斯209

    Inhoud自述文件 Wat het project doet Wat de feature doet Installeren Testen功能 做项目 研究风格 清洁代码artikel JavaScript设计模式artikel 1个构建工具 托管服务 预约定价安排 线框上传 ...

Global site tag (gtag.js) - Google Analytics