CSS中的display属性（含三大常用属性inline、block、inline

2024-07-14 19:06| 来源: 网络整理| 查看: 265

关于table制表

table表格默认是没边框样式的，添加下列样式来添加边框： table tr td,th{ border:1px solid #000; } （翻译：table标签下的所有tr标签下的所有td和th标签的边样式设置为1像素大，线形是实线，颜色是黑色） border:1px solid #000;是简写，下面是整个语句：

/*css*/ table tr td,th{ border-width:1px; border-style:solid; border-color:#000; } 🚫🚫🚫🚫table制表已被div+css取代，在下面会说明原因🚫🚫🚫🚫 CSS中的display属性

👉语法：display:值;

display属性值描述none此元素不会被显示。✅block此元素将显示为块级元素，此元素前后会带有换行符。✅inline默认。此元素会被显示为内联元素，元素前后没有换行符。✅inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。🔻table此元素会作为块级表格来显示（类似），表格前后带有换行符。🔻inline-table此元素会作为内联表格来显示（类似），表格前后没有换行符。🔻table-row-group此元素会作为一个或多个行的分组来显示（类似）。🔻table-header-group此元素会作为一个或多个行的分组来显示（类似）。🔻table-footer-group此元素会作为一个或多个行的分组来显示（类似）。🔻table-row此元素会作为一个表格行显示（类似）。🔻table-column-group此元素会作为一个或多个列的分组来显示（类似）。🔻table-column此元素会作为一个单元格列显示（类似）。🔻table-cell此元素会作为一个表格单元格显示（类似和）。🔻table-caption此元素会作为一个表格标题显示（类似）。🔻inherit 规定应该从父元素继承 display 属性的值。 💥关于 display:table（制表）系列的值;💥 目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？【除非是特定项目需要使用table系列标签，否则就用display的制表值🔻取代】用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大。table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。非表格内容用table来装，不符合标签语义化要求，不利于SEO。table的嵌套性太多，用DIV代码会比较简洁。

👉👉👉display:table 的用法（点击此链接）

✅display的几个常用的属性值：inline，block，inline-block✅ display:inline; ①将元素改变为行内元素（此时宽高不可设置，只能由内容的多少来改变）； ②由块级元素霸道独占一行的行为，改为：与其他行内元素共享一行； ③可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行。 display:block; ①将元素改变为块级元素（此时宽高可设置）； ②由行内元素共享一行的行为，改为：非常霸道的独占一行； ③可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果。 💨💨💨💨💨💨💨💨 👉 ps:先来通俗说说这两个的区别（至于想要将两个或多个块级元素放在同一行，用float将他们浮动就行了）：行内元素是打杂的：打杂的没权没势，处处都是限制，不给宽高，又不能设置顶部和底部的边距，而且还是和同事一起在多人办公室工作。块级元素是上级领导：但是上司就舒服多了，宽高边距啥都可以随意设置，还可以独享个人办公室，官架子是刚刚的。

打杂的想要晋升领导，那就用 display:block; 他就能享受到领导的待遇。但是领导呢，被公司用display:inline;贬职了，让他去干打杂的活。

（当然了，这是一种比喻，切勿当真。只是用这种方式来说明两者之间的转换关系。） 💨💨💨💨💨💨💨💨

display:inline-block; ps：无关紧要，还记得【魔曲PPAP】吗？pen + apple = (♂啊~)apple pen！内联块状元素“inline-block”（表现为块级元素的行内元素）；也就是 inline 和 block 的混合产物。但并不是所有属性都继承，而是部分属性（继承两者优良属性，就像袁隆平爷爷培育出杂交水稻）： ①能和其他元素共享一行； ②可以设置宽、高； ③可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果。【用上面“inline”和“block”的比喻来说的话，“inline-block”就是一个虽然同样是打杂的，但是优先享受了部分领导特权（优良的特权）的一个特殊员工（本质上还是员工）。】既然inline-block是inline和block的混合体，综合了这么多优点，那是不是就可以随便用它而舍弃inline和block了呢？不！！！！并不能因为inline-block优点多多就可以随便用！！！！因为你得考虑是否兼容！！！

🈲🈲🈲IE6、IE7支持但不完全支持display:inline-block;属性,但IE8+和FF等标准浏览器支持。不过可以利用ie的 hasLayout 来触发display:inline-block; [兼容各浏览器的代码：div {display:inline-block;*display:inline; *zoom:1;...}]（详情点击此链接） 👉深入认识盒子模型 display:inline-block; BFC(块格式化上下文) 和haslayout ！

以上只是简单介绍（搜集总结）display的inline、block、inline-block三个属性，更为丰富的内容，我会一边实践运用一边理解消化，然后单独开篇章详细写下来（none、inline、block、inline-block）。

【本文地址】

公司简介

联系我们