相信大部分奋战在前端的，尤其在前端攻城的过程中，有一种越陷越深的感觉，不错，一如前端深似海，从此妹子是浮云啊，前端上手容易，深入难啊！下面我就CSS中的display属性讲下我自己所积累的，与大家共享下，大神勿喷，我只是路过的。
css中display属性在W3C教程上有简要说明：http://www.w3school.com.cn/cssref/pr_class_display.asp；当然我是觉得讲的不够详细，也有部分可能没深度用过的。
display属性取值有：block,inline-block;table;inline-table,table-row,table-cell,table-caption;list-item等，这都是基本的用法，相信大家在写一些弹出框效果的时候用的最多的就是通过display：block和none属性来显示与隐藏弹窗。
如:在JQuery中可以：
$("#div").css("display":"block");来显示隐藏想要的DOC对象；
1、block与inline-block属性其实都是块级元素，不过inline-block一个是行内的块级元素；
2、table,table-row,table-cell,table-caption,list-item;
相信大部分的很少去了解这些属性值，其实这些都是对应的在表格table中的对应项跟ul标签中的li项，其中display:table其实就是一个table表格，而table-row与table-cell分别对应table表格中的tr跟td标签，list-item就是li标签；其实这些属性在移动前端开发中用的也挺多的，而且对应的也符合table标签的一些属性,如在td中vertical-align用div
display:table-cell同样可以实现，这样可以帮我们解决一些较前卫的浏览器中减少很多不必要的困扰。
ps:如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及
"inherit"。
还有： 今天同学问我在table元素中想通过js来实现表格的一行的隐藏和显示，结果他用了上述Jquery代码，结果页面乱了，后来我用了$("#div").css("display":"table-row");达到了理想效果。
当然还有一些取值，先暂时讲这么多，下次更新，我们来看一些代码及效果图：
源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>display属性详解</title>
<style type="text/css">
.table {
width: 500px;
height: 200px;
margin-left: 100px;
table-layout: fixed;
border-collapse: collapse;
}
.table td {
border: 1px solid green;
background-color: #e2e2e2;
}
.table_model {
width: 500px;
height: 20px;
margin: 0 auto;
}
.display_table {
display: table;
}
.display_caption {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
color: blue;
display: table-caption;
}
.display_row_tr {
width: 100%;
height: 50px;
display: table-row;
}
.display_cell_td {
width: 98px;
height: 48px;
display: table-cell;
background-color: pink;
border: 1px solid yellow;
}
</style>
</head>
<body>
<table class="table">
<caption>我是表格做的</caption>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div class="table_model display_table">
<div class="display_caption">我是DIV模拟表格，不用float哟！！</div>
<div class="display_row_tr">
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
</div>
<div class="display_row_tr">
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
</div>
<div class="display_row_tr">
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
</div>
<div class="display_row_tr">
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
<div class="display_cell_td"></div>
</div>
</div>
</body>
</html>
细说CSS中的display属性的更多相关文章
-
CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
-
理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
-
CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
-
转: 详解css中的display属性
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例讲解方法 ...
-
细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
-
深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
-
CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
-
Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
-
css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
随机推荐
-
tornado django flask 跨域解决办法（cors）
XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...
-
Atitit 异常机制与异常处理的原理与概论
Atitit 异常机制与异常处理的原理与概论 1. 异常vs 返回码1 1.1. 返回码模式的处理 (瀑布if 跳到失败1 1.2. 终止模式 vs 恢复模式(asp2 1.3. 异常机制的设计原理 ...
-
65.Android 三大图片缓存原理、特性对比 (转)
这是 Trinea 在 MDCC 上分享的内容(略微改动),也是源码解析第一期发布时介绍的源码解析后续会慢慢做的事. 从总体设计和原理上对几个图片缓存进行对比,没用到他们的朋友也可以了解他们在某些特性 ...
-
Saltstack数据系统Grains和Pillar（三）
Saltstack数据系统 分为Grains和Pillar 一.Grains 静态数据,当Minion启动的时候收集的MInion本地的相关信息.(包含操作系统版本.内核版本.CPU.内存.硬盘.设备 ...
-
分布式id 实现方式
1. uuid 2. twitter的Snowflake 3. MongoDB ObjectID 4. Ticket Server 5. Instagram采用的方式(UUID方式)
-
wait和waitpid的使用和区别
昨天看到一则新闻,讲的是一个游戏开发大拿猝死去世的新闻,公司发了讣告,打算接下去给他爸爸妈妈每个月10000的赡养费,很是感慨,本来中国的游戏业和国外就差距大,天妒英才啊.真心想对那些游戏公司的领导说 ...
-
Nginx log
ngx_http_log_module 模块通过指定的格式把请求写入日志.请求登陆到location处理结束的环境中.如果重定向发生在请求处理过程中,这或许与location原理不同. Example ...
-
接口json数据与数据库数据循环比对校验
创建测试计划,加载数据库驱动: 线程组: csv配置元件: 注:Filename用的是相对路径,csv文件要与jmeter脚本文件在同一目录 JDBC连接配置: jdbc请求: 用户定义的变量: ht ...
-
springMVC 使用ajax 出现No serializer found for class异常
转自 http://mxdba.iteye.com/blog/668155 google了一下,发现坛子里已经有人解答了 http://godfox.iteye.com/blog/646887 不过 ...
-
HBuilderX——编译失败：HBuilderX 安装目录不能包括 ( 等特殊字符
前言 编译小程序的时候报错,原因其实很简单,安装目录的问题! 解决 我安装到了D:\Program Files (x86),放到D盘的根目录下或者D:\Program Files只要不包含一些特殊字符 ...