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

关于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	此元素会根据上下文作为块级元素或内联元素显示。
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:table（制表）系列的值;💥

目前，在大多数开发环境中， 已经基本不用table元素来做网页布局了，取而代之的是div+css，那么为什么不用table系表格元素呢？ 【除非是特定项目需要使用table系列标签，否则就用display的制表值🔻取代】

1. 用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大。
2. table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示。
3. 非表格内容用table来装，不符合标签语义化要求，不利于SEO。
4. 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）。