网站域名域名,东莞市建设公共交易中心网站,中国洛阳网,界面设计与制作主要学什么目前#xff0c;在大多数开发环境中#xff0c;已经基本不用table元素来做网页布局了#xff0c;取而代之的是divcss#xff0c;那么为什么不用table系表格元素呢#xff1f; 1、用DIVCSS编写出来的文件k数比用table写出来的要小#xff0c;不信你在页面中放1000个table和…目前在大多数开发环境中已经基本不用table元素来做网页布局了取而代之的是divcss那么为什么不用table系表格元素呢 1、用DIVCSS编写出来的文件k数比用table写出来的要小不信你在页面中放1000个table和1000个div比比看哪个文件大 2、table必须在页面完全加载后才显示没有加载完毕前table为一片空白也就是说需要页面完毕才显示而div是逐行显示不需要页面完全加载完毕就可以一边加载一边显示 3、非表格内容用table来装不符合标签语义化要求不利于SEO 4、table的嵌套性太多用DIV代码会比较简洁 但是有的项目中又需要类似表格的布局怎么办呢可以用display:table来解决 display:table系列几乎是和table系的元素相对应的请看下表 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此元素会作为一个表格标题显示。目前display:table的应用场景也是比较广泛的Google地图在搜索路线时左侧的路线详情就是用的display:table来实现的。 1.div模拟表格 !DOCTYPE html
html
head langenmeta charsetUTF-8title模拟表格/title
/head
bodystyle typetext/css relstylesheet.table {display: table;border: 1px solid #cccccc;margin: 5px;/*display: table时padding会失效*/}.row {display: table-row;border: 1px solid #cccccc;/*display: table-row时margin、padding同时失效*/}.cell {display: table-cell;border: 1px solid #cccccc;padding: 5px;/*display: table-cell时margin会失效*/}
/style
div classtablediv classrowdiv classcell张三/divdiv classcell李四/divdiv classcell王五/div/divdiv classrowdiv classcell张三/divdiv classcell李四/divdiv classcell王五/div/div
/div
/body
/html 2.让块级标签实现行内效果即浮动至同一横轴并实现等高效果 table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以很多时候我们需要等高布局的时候就可以借助display:table-cell属性。说到table-cell的布局不得不说一下“匿名表格元素创建规则” CSS2.1表格模型中的元素可能不会全部包含在除HTML之外的文档语言中。这时那些“丢失”的元素会被模拟出来从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象使其符合table/inline-table、table-row、table- cell的三层嵌套关系。 举个例子吧如果我们为元素使用“display:table-cell;”属性而不将其父容器设置为“display:table-row;”属性浏览器会默认创建出一个表格行就好像文档中真的存在一个被声明的表格行一样。 !DOCTYPE html
html
head langenmeta charsetUTF-8titledisplay:table实现浮动效果/title
/head
bodystyle typetext/css relstylesheet.table {display: table;margin: 5px;width: 1000px;}.row {display: table-row;}.cell {display: table-cell;padding: 10px;background-color: red;}
/style
div classtablediv classrowdiv classcell内容内容内容内容内容内内容内/divdiv classcell内容内容内容内容内容内容内容内容内容/divdiv classcell内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容/div/div
/div
/body
/html 上例中div.row可以不要效果一样 3.结合vetical-align实现块级元素垂直居中 转载于:https://www.cnblogs.com/cowboybusy/p/10530547.html
