DisplayTag详解

html-display标签
标签可以分为⾏内标签和⾏间块级标签，
块级标签：占⼀⾏，如果⽗标签没有限⾼度，⼦标签会⾃动扩展⽗标签的⾼度，⾏内标签不能， 可以设置宽度⾼度 padding margin
⾏内标签：
不能设置宽度⾼度 padding margin
标签不能⾃动伸展
可以通过display灵活的将标签在⾏内和⾏间随意转换
display：inline;转换成⾏内标签
display：block;转换成块级标签
display:inline-block;即有⾏内标签的属性也有块极标签的属性
display:none;让标签消失，可以做很多功能，调⽤js
当⾏间内联标签需要设置宽度⾼度或padding margin时就要把display设置成inline-block;
<a style="border: 1px solid red; height: 40px;width: 40px;display: inline-block;">aaa</a>
<a>bbb</a>。

display：table常⽤属性解释1、官⽅⽹址：2、应⽤举例： <display:table name="requestScope.pageList" id="curPage" class="table table-striped" sort="external" requestURI="${resource}/test/list.do" export="true">3、常⽤属性：name 指向需要显⽰的List集合或者其他集合，集合中每个元素对应表格中⼀⾏，⽽元素（⼀般是bean对象）的属性对应的表格的列，如果元素是字符串，那么显⽰字符串本⾝，只有⼀列。

id 代表当前的bean对象。

也就是可以在<display:column>中得到bean中的内容。

还有⼀点，如果写了这个属性，就获得⼀个额外的属性，⾏号属性，从1开始获取⾏号⽅式是使⽤EL表达式：${XXX_rowNum},XXX代表id属性值。

class就是正常表格的class属性，⽤来引⽤CSS样式offset这个属性是⽤来显⽰List的⼀部分，作⽤是控制从List的第⼏个元素开始显⽰。

可以配合length属性使⽤。

length这个属性是⽤来显⽰List的⼀部分，作⽤是显⽰List中的多少个元素。

可以配合offset属性使⽤。

sort默认值是page，表⽰排序当前页⾯中显⽰的数据，不会排序整个list中的数据，相反若是值为list，则代表排序整个list中的数据。

defaultorder默认值是ascending,升序排列，若是值为descending，表⽰降序排列。

该属性是控制defaultsort属性的排列状况的。

defaultsort 默认以哪⼀列排序，以数字1，2，3...指明该列，实际的作⽤就是页⾯加载的时候，⽤户还没有点击的时候，就已经以该列排序了，⾄于是升序还是降序则是由defaultorder指明。

CSS中display对布局的影响以及元素display的默认值看到前端越来越多的mvc框架出现，之前偶尔还看到有OOCSS（⾯向对象的CSS编程）的⽂章。

所以可以这样理解，前端HTML页⾯的所有元素（tag），也都可以理解对象。

每个对象有⾃⾝的属性，以及每个对象与其他对象的关系。

关系中最重要也是本⽂讨论的是显⽰时候的位置关系。

每个HTML对象除了与其他HTML对象（标签）有关系之外，还有对象在显⽰时与浏览器或者windows对象的关系。

位置关系也就是页⾯的布局。

如果能将合适的对象根据需要放在合适的位置，并与其他对象和睦相处，界⾯就可以按照设计者的想法实现了。

《下⾯内容摘⾃⽹络，帮助理解和记录》根据CSS规范的规定，每⼀个⽹页元素都有⼀个display属性，⽤于确定该元素的类型，每⼀个元素都有默认的display属性值。

⽐如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；⽽span元素的默认display属性值为“inline”，称为“⾏内”元素。

div这样的块级元素，就会⾃动占据⼀定矩形空间，可以通过设置⾼度、宽度、内外边距等属性，来调整的这个矩形的样⼦；与之相反，像“span”、“a”这样的⾏内元素，则没有⾃⼰的独⽴空间，它是依附于其他块级元素存在的，因此，对⾏内元素设置⾼度、宽度、内外边距等属性，都是⽆效的。

块元素⼀般都从新⾏开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。

“form"这个块元素⽐较特殊，它只能⽤来容纳其他块元素。

如果没有css的作⽤，块元素会顺序以每次另起⼀⾏的⽅式⼀直往下排。

⽽有了css以后，就可以改变这种html的默认布局模式，把块元素摆放到想要的位置上去。

⽽不是每次都另起⼀⾏。

需要指出的是，table标签也是块元素的⼀种，table based layout和css based layout从⼀般使⽤者（不包括视⼒障碍者、盲⼈等）的⾓度来看这两种布局，除了页⾯载⼊速度的差别外，没有其他的差别。

英文display的汉语是什么意思英文display的汉语是什么意思汉语是汉族的语言，是我国的主要语言。

现代汉语的标准语是普通话。

以下是店铺精心整理的英文display的汉语是什么意思，希望对大家有所帮助。

display的汉语意思英 [dsple] 美 [dsple]第三人称单数：displays第三人称复数：displays现在分词：displaying过去分词：displayed过去式：displayed名词显示器; 展览，陈列; 陈列品，展览品; 炫耀及物动词显示; 陈列; 展开，伸展; 夸示，炫耀不及物动词 (计算机屏幕上)显示例句1. Children enjoy a fireworks display.孩子们喜爱看烟火。

2. I like the way the displays are arranged in the museum.我喜欢那个博物馆里展览品陈列的方式。

3. He made a display of his learning.他夸耀自己有学问。

display的单语例句1. Demonstrators in Hong Kong display national flags duringa protest on Sunday against Japan's decision to " buy " the Diaoyu Islands.2. Rooney believes too much has been read into England's display against the US, who were gifted their equaliser by an error by goalkeeper Robert Green.3. And judging by some of the vehicles on display, they may be right.4. This seeming hodgepodge by Zhu Jingyi turns out to bemarvelous art now on display at the Room With a View gallery in Shanghai.5. It was also a chance for the PLA to display the calibre of its military.6. The first features the display of 41 Song - and Yuan - dynasty calligraphic works and paintings not yet shown outside the Palace Museum.7. More than 240 ink paintings and calligraphic works by more than 100 artists from across the country are on display.8. The British press spoke in praise of the spectacular Beijing Olympics opening ceremony unanimously, calling it the best ever and a stunning display of China's rising confidence.9. Organized by Double Win Capital, the exhibition will display more than 100 works by 16 leading Chinese modern artists.display的词典解释1. 展示;展览;陈列If you display something that you want people to see, you put it in a particular place, so that people can see it easily.e.g. Among the protesters and war veterans proudly displaying their medals was Aubrey Rose...在抗议者和骄傲地展示勋章的退伍老兵中，就有奥布里·罗斯。

简介：Row取个别名newsInformationList 结果集Pagesize 每页显示的记录数Size 单元格大小跟单元格内容多少有关<display:column property="articleTitile" title="标题" />column 代表一行articleTitile对象属性 title 此列标题名，就想每个table列的第一行显示的内容。

Sort 排序问题例题页面：<display:table id="row" name="${newsInformationList}" class="its" pagesize="10" export="false" size="resultSize" partialList="true" sort="external"decorator="org.displaytag.decorator.TotalTableDecorator"requestURI="/admin/newsInformationListController.do?method=listByName"><display:column property="articleTitile" title="标题" /><display:column property="updateDate" title="最后跟新时间" /><display:column title="操作"><c:choose><c:when test="${row.articleType eq '0'}"><ahref="/admin/newsInformationListController.do?method=see&id=${row.id}">浏览</a>&nbsp;&nbsp;<c:if test="${loadrole=='超级管理员'}"><ahref="/admin/newsInformationListController.do?method=edit&id=${row.id}">编辑</a>&nbsp;&nbsp;</c:if><c:if test="${loadrole=='销售人员'}"><span style="text-decoration :line-through;">&nbsp;编辑&nbsp;</span></c:if></c:when><c:otherwise><ahref="/admin/newsInformationListController.do?method=seeTwo&id=${row.id}&url=${row.articleUrl}">浏览</a>&nbsp;&nbsp;<span style="text-decoration :line-through;">&nbsp;编辑&nbsp;</span></c:otherwise></c:choose><c:if test="${loadrole=='超级管理员'}"><ahref="/admin/newsInformationListController.do?method=del&id=${row.id}&u serId=${userId }">删除</a></c:if><c:if test="${loadrole=='销售人员'}"><span style="text-decoration :line-through;">&nbsp;删除&nbsp;</span></c:if></display:column></display:table>Action写法：方法内容：String actiocleName = request.getParameter("titleName");int pageNumber = ParamUtil.getInt(request, "d-16544-p",1);int pageSize = 10;Page page = new Page(pageNumber,pageSize);page=newsInformationManager.getPageForRole(page, actiocleName);List<NewsInformation> newsInformationList = page.getList();System.out.println(newsInformationList.size() + " size===========");if(newsInformationList.size()==0){model.put("newsInformationList", null);}else{model.put("newsInformationList", newsInformationList);}request.setAttribute("resultSize", page.getTotalRecord());model.put("titleName",actiocleName);model.put("newsInformationList",newsInformationList);model.put("pageNumber",pageNumber);String userId = request.getParameter("userId");request.setAttribute("userId", userId);return new ModelAndView("../view/admin/newsInformationList",model);其中有调用到page方法如下package cn.eol.sou.back.page;import java.io.Serializable;import java.util.List;@SuppressWarnings("serial")public class Page implements Serializable {private int currentPage;private int totalPage;private boolean hasNextPage;private boolean hasPrevPage;private int totalRecord;private List list;private int pageSize;private int PageNumber;private int PerPage;private void initPage(){currentPage = 1;totalPage = 0;hasNextPage = false;hasPrevPage = false;totalRecord = 0;list = null;pageSize = 20;}public Page(){initPage();}public Page(int page,int pageSize){initPage();setPageSize(pageSize);setCurrentPage(page);}public Page(int page){initPage();setCurrentPage(page);}public int getCurrentPage() {return currentPage;}public int getStartRecord(){int s = (this.currentPage-1)*this.pageSize;if(s>=this.totalRecord)return this.totalRecord;return s;}public int getEndRecord(){int s = this.currentPage*pageSize;if(s>=this.totalRecord)return this.totalRecord;return s;}public void setCurrentPage(int currentPage) {if(currentPage<=0)currentPage = 1;this.currentPage = currentPage;}public boolean isHasNextPage() {return hasNextPage;}public boolean isHasPrevPage() {return hasPrevPage;}public List getList() {return list;}public void setList(List list) {this.list = list;}public int getTotalPage() {return totalPage;}private void setTotalPage(int totalPage) {if(totalPage<=0)totalPage = 1;this.totalPage = totalPage;if(this.currentPage>totalPage)this.currentPage = totalPage;if(this.currentPage>= totalPage)this.hasNextPage = false;elsethis.hasNextPage = true;if(this.currentPage<=1)this.hasPrevPage = false;elsethis.hasPrevPage = true;}public int getTotalRecord() {return totalRecord;}public void setTotalRecord(int totalRecord) {if(totalRecord <= 0){initPage();}else{int p = totalRecord/this.pageSize;if(totalRecord%this.pageSize>0)p++;setTotalPage(totalRecord%this.pageSize>0?(totalRecord/this.pageSi ze+1):totalRecord/this.pageSize);this.totalRecord = totalRecord;}}public int getPageSize() {return pageSize;}private void setPageSize(int pageSize) {if(pageSize<=0)pageSize = 20;this.pageSize = pageSize;}public int getPageNumber() {return PageNumber;}public void setPageNumber(int pageNumber) {PageNumber = pageNumber;}public int getPerPage() {return PerPage;}public void setPerPage(int perPage) {PerPage = perPage;}}getPageForRole方法service只是直接调用的dao方法，不在写，直接写dao方法第二个参数是结果集塞选条件，无条件可为空，第一个参数及page对象代码如下注意：page必须为final类型，表示只要创建之后就不许修改，及常量！！（service参数同样）：public Page getPageForRole(final Page page,String filter){String hql="";if(filter !="" && filter!=null){hql = "from NewsInformation where articleTitile like '%"+filter+"%' order by id desc";page.setTotalRecord(getTotal("select count(*) from NewsInformation where articleTitile like '%"+filter+"%'"));}else{hql = "from NewsInformation order by id desc";page.setTotalRecord(getTotal("select count(*) from NewsInformation "));}final int start=page.getStartRecord();final int pageSize=page.getPageSize();final String sql=hql;List<NewsInformation> list = getHibernateTemplate().executeFind(new HibernateCallback(){public Object doInHibernate(Session session) throws HibernateException, SQLException {Query query = getSession().createQuery(sql);query.setFirstResult(start);query.setMaxResults(pageSize);List<NewsInformation> list = new ArrayList<NewsInformation>();list = query.list();return list;}});page.setList(list);return page;}。

CSSdisplay属性详解display的所有属性{/* CSS 1 */display: none;display: inline;display: block;display: list-item;/* CSS 2.1 */display: inline-block;display: table;display: inline-table;display: table-cell;display: table-column;display: table-column-group;display: table-footer-group;display: table-header-group;display: table-row;display: table-row-group;display: table-caption;/* CSS 2.1 *//* CSS 3 */display: inline-list-item;display: flex;display: box;display: inline-flex;display: grid;display: inline-grid;display: ruby;display: ruby-base;display: ruby-text;display: ruby-base-container;display: ruby-text-container;/* CSS 3 *//* Experimental values */display: contents;display: run-in;/* Experimental values *//* Global values */display: inherit;display: initial;display: unset;}下⾯就display的重要属性进⾏讲解，并配合⼀些相关的例⼦none是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也⽆法显⽰，相当于该元素不存在。

CSS3中的display：grid⽹格布局介绍前⾔：grid⽹格布局，就是将⽹页划分成⼀个个⽹格，可以任意组合不同的⽹格，做出各种各样的布局html<div class="content"><div class="grid">1</div><div class="grid">2</div><div class="grid">3</div><div class="grid">4</div><div class="grid">5</div><div class="grid">6</div><div class="grid">7</div><div class="grid">8</div><div class="grid">9</div></div>F12检查，选中div，就会看到，⼀个个虚线，这就是⽹格容器属性：display:grid; //默认是块元素display:inline-grid //默认是⾏内块元素注意：设置为grid后，⼦元素的float, display:inline-block,display:table-cell 等设置都⽆效了属性解释：1.⾏宽列宽grid-template-columns: 定义列数，每⼀列的列宽；（⼀排有⼏个div，每个div宽度是多少）grid-template-columns: 100px 100px 100px; //代表有三列，每列是100px的宽度，也可以⽤百分⽐grid-template-rows: 每⼀⾏的⾏⾼；（每⾏div的⾼度是多少）grid-template-rows：100px 100px 100px; //从上⾄下，每⾏⾼度为100px，如果有第四⾏，未设置就是其⾃⾝⾼度即：每⼀⾏的⾼度是⼀样，每⼀列的宽度是⼀样的，就像格⼦⼀样，就是⽹格布局重复写值，可以⽤repeat函数grid-template-columns: 100px 100px 100px; -》grid-template-columns：repeat(3,100px); //重复三次，每次100px；也可以是不固定的重复模式：grid-template-columns:repeat(2,100px 80px); //重复两次100px 80px 的模式，就是4列=== grid-template-columns：100px 80px 100px 80px;2.关键词1) auto-fill:如果容器⼤⼩不固定，⽹格⼤⼩固定，可以⽤关键词⾃动填充grid-template-columns:repeat(auto-fill,100px);//⾃动填充，每列100px宽度2)fr(fraction):倍数，如果有两列，1fr 2fr，后者就是前者的两倍grid-template-columns:1fr 2fr;grid-template-rows:50px 1fr 2fr;如图：第⼆列是第⼀列的2倍，填充整个容器的宽度对于⾏⾼，1fr就是⾃⾝内容的⾼度，第⼀⾏是50px 第⼆⾏是18px 第三⾏2倍36px，因为没有设置第四第五⾏，所以后⾯两⾏都是⾃⾝⾼度18px。

详解CSS中的display属性前⾔ display在⽹页的设计中经常⽤到，对页⾯的布局和尺⼨等内容有着很⼤影响，常⽤的主要有none、block、inline(默认值)、inline-block 等⼏个属性，本⽂详细介绍关于display的各种属性。

1.定义 display属性⽤于规定元素⽣成的框类型，影响显⽰⽅式 值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-colume | table-cell | table-caption | inherit 初始值：inline 继承性：⽆ 【注意】IE7-浏览器不⽀持table类属性值和inherit2.分类【1】block 【特征】 【1】不设置宽度时，宽度为⽗元素宽度 【2】独占⼀⾏ 【3】⽀持宽⾼ 【标签】<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul> 【不⽀持的样式】 【1】vertical-align【2】inline 【特征】 【1】内容撑开宽度 【2】并⾮独占⼀⾏ 【3】不⽀持宽⾼ 【4】代码换⾏被解析成空格 【标签】<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr> 【不⽀持的样式】 【1】background-position 【2】clear 【3】clip 【4】height | max-height | min-height 【5】width | max-width | min-width 【6】overflow 【7】text-align 【8】text-indent 【9】text-overflow3.inline-block 【特征】 【1】不设置宽度时，内容撑开宽度 【2】⾮独占⼀⾏ 【3】⽀持宽⾼ 【4】代码换⾏解析成空格 【标签】<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video> 【不⽀持的样式】 【1】clear 【IE兼容】 IE7-浏览器不⽀持给块级元素设置inline-block样式，解决⽅法如下：⾸先将其变成⾏内元素，使⽤具有⾏内元素的特性，然后触发haslayout，使其具有块级元素的特性，如此就可以模拟出inline-block的效果4.none 【特征】 隐藏元素并脱离⽂档流 【标签】<base><link><meta><title><datalist><dialog><param><script><source><style>5.list-item 【特征】 【1】不设置宽度时，宽度撑满⼀⾏ 【2】独占⼀⾏ 【3】⽀持宽⾼6.run-in 【特征】 run-in是⼀个有意思的块/⾏内元素混合，可以使某些块级元素成为下⼀个元素的⾏内部分。

display：table的⼏个⽤法DIV+CSS的布局已经让表格布局⼏乎很少⽤到，除⾮表格语义性很强的情况。

display：table解决了⼀部分需要使⽤表格特性但⼜不需要表格语义的情况，尤其是DIV+CSS很不⽅便解决的问题，⽐如以下两种情况：⼀、⽗元素宽度固定，想让若⼲个⼦元素平分宽度通常的做法是⼿动设置⼦元素的宽度，如果设置百分数不⼀定能整除，设置具体的数值⼜限制了⽗元素的宽度固定，很烦。

可以使⽤display：table来解决：.parent{display: table; width: 1000px;}.son{display: table-cell;}如此⼀来，就算是三个或者六个元素也可以很⽅便均分⽗元素的宽度了。

⼆、块级⼦元素垂直居中想让⼀个div或p在⽗元素中垂直居中⼀直是很多⼈解决不了的问题（注意直接对块级元素使⽤vertical-align是不能解决这个问题的，vertical-align定义⾏内元素的基线相对于该元素所在⾏的基线的垂直对齐），同样可以使⽤display：table⽅便解决：.parent {display: table;}.son {display: table-cell; vertical-align: middle;}将块级⼦元素的display设置为table-cell之后再使⽤vertical-align就可以了。

注意：虽然display：table解决了避免使⽤表格的问题，但有⼏个需要注意的：（1）display: table时padding会失效（2）display: table-row时margin、padding同时失效（3）display: table-cell时margin会失效。