display的属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block、none、inline这三个值。,display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的,要了解display之前,来了解一些块级元素和内联元素。
1、块级元素
①总是在新行上开始(块元素独占一行);
②高度,行高以及外边距和内边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素
比如:p、div、h1、ul等。
1、内联元素
①和其他元素都在一行上;
②高,行高及外边距和内边距不可改变;
③宽度就是它的文字或图片的宽度,不可改变
④内联元素只能容纳文本或者其他内联元素
比如:a、em、img、span等。
而display就是改变这些元素的固有属性,规定元素应该生成的类型,以达到自己布局网站的效果。 经常用到有下面四个:
none 此元素不会被显示
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。
当然还有很多属性,一般比较少用,主要有以下方面:
|
list-item |
此元素会作为列表显示。 |
|
run-in |
此元素会根据上下文作为块级元素或内联元素显示。 |
|
compact |
CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
|
marker |
CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
|
table |
此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
|
inline-table |
此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
|
table-row-group |
此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
|
table-header-group |
此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
|
table-footer-group |
此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
|
table-row |
此元素会作为一个表格行显示(类似 <tr>)。 |
|
table-column-group |
此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
|
table-column |
此元素会作为一个单元格列显示(类似 <col>) |
|
table-cell |
此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
|
table-caption |
此元素会作为一个表格标题显示(类似 <caption>) |
|
inherit |
规定应该从父元素继承 display 属性的值。 |
display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。
display的属性的更多相关文章
- display:table- cell属性的练习
display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说 sorry了,这一事实也是大大制 ...
- IE6/IE7不识别display:inline-block属性怎么办
ie6,ie7的haslayout属性是个让人头疼的问题.在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行.还有一种方法就是设置li为display: ...
- <display:table>属性解释
参考官方网站:http://www.displaytag.org/1.2/displaytag/tagreference.html 所有属性: cellpadding,cellspacing,clas ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- display的属性值测试
由于在学习CSS的display的属性值只针对block.inline.inline-block和flex进行过了解,并且自己观察得知列表中li的display属性是list-item,而想要触发BF ...
- display:box属性
在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代dis ...
- 用jquery的.val() 给具有style="display:none;" 属性的标签写值的问题。
今天写项目, 碰到奇怪现象, 用jquery的val()函数怎么都无法给标签赋值,而我确定是否赋值是通过浏览器控制台来看的.其实这种方式不准确,因为具有 style="display:non ...
- css的尺寸、display的属性、以及浮动和清除浮动的方法
css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- OpenGL ES3使用MSAA(多重采样抗锯齿)的方法
昨晚花费了我2个多小时的时间终于把OpenGL ES3.0中的MSAA给搞定了.在OpenGL ES2.0中,Khronos官方没有引入标准的MSAA全屏抗锯齿的方法,而Apple则采用了自己的GL_ ...
- java 读取CSV数据并写入txt文本
java 读取CSV数据并写入txt文本 package com.vfsd; import java.io.BufferedWriter; import java.io.File; import ja ...
- Spring cloud微服务安全实战-6-1本章概述
这一章来讲一下,微服务之间的通讯安全. 当前这个架构还存在的问题 在网关上做限流还是有一些问题的.例如我的订单服务限流是100,库存服务限流也是100.但是我的订单服务会调用我的库存服务.那么在网关这 ...
- boost写的异步客户端样例代码修改为支持断开重连的代码
考虑到boost的工业级强度,因此就直接用了,代码的官方示例地址:https://www.boost.org/doc/libs/1_55_0/doc/html/boost_asio/examples/ ...
- Spring Cloud 如何实现服务间的调用 4.2.3
如果存在多个服务时,要怎么通过注册中心来实现服务之间的调用呢?接下来将通过一个用户和订单之间的调用案例,来演示Eureka Server中服务之间的调用. 搭建订单服务工程 在父工程xcservi ...
- Python - Django - ORM 多对多表结构的三种方式
多对多的三种方式: ORM 自动创建第三张表 自己创建第三张表, 利用外键分别关联作者和书,关联查询比较麻烦,因为没办法使用 ORM 提供的便利方法 自己创建第三张表,使用 ORM 的 ManyToM ...
- Slf4j与log4j及log4j2、logbak的关系及使用方法
Slf4j与log4j及log4j2的关系及使用方法 slf4j slf4j仅仅是一个为Java程序提供日志输出的统一接口,并不是一个具体的日志实现方案,就比如JDBC一样,只是一种规则而已,所以单独 ...
- 你应该知道的4个DSP开发支持库
引言 在dsp开发中,为了节省开发时间和难度,TI将一些成熟的算法封装为模块,供开发者使用.如果能充分利用这些算法支持库,对于加快dsp开发进程与提高代码质量.稳定性有非常大的帮助. Digital ...
- eNSP配置基本与高级访问控制列表
首先我们进行基本的acl控制 拓扑图如下所示 首先我们对路由器进行基本ip配置 并在路由器上设置ospf协议 添加相邻的网段 在路由器上运行了ospf协议后 使用display ip route-ta ...
- LeetCode 258. 各位相加(Add Digits)
258. 各位相加 258. Add Digits 题目描述 给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. LeetCode258. Add Digits 示例: 输入: 3 ...