4-1盒的基本类型

css中原来的两种类型及互换显示

这是div元素
这是div元素
这是span元素 这是span元素
这是div元素显示成span
这是div元素显示成span
这是span元素显示成block 这是span元素显示成block

inline-block具有宽度和高度属性

width: 360px; height: 100px; display: inline-block;
这是div元素显示为inline-block
这是div元素显示为inline-block
这是div元素显示为inline
这是div元素显示为inline

block+float多列布局

A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B
C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C

inline-block多列布局，如果两个元素并在一起，之间会有很小的缝隙，解决方案是在代码中不要添加回车或空格，要紧挨着写，或者通过css调间距

…… A A A A A A </div><div id="bb">B B B B B ……
A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A
B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B
C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C C

inline-block水平导航

表格作为行内元素显示

border-collapse: collapse; display: inline-table; vertical-align: bottom;
表格前面的文字
1234
5678
9101112
表格后面的文字

将div和span元素以列表显示

display: list-item; list-style-type: circle; margin-left: 5rem;
这是div元素
这是div元素
这是span元素 这是span元素

Chrome从32版本开始将这个run-in属性移除了

CSS2.1版本开始将这个compact属性移除了

run-in和compact，不能正常显示也不要紧

仙人掌:
一种带刺植物，汁水可以给猫狗解毒
仙人掌:
一种带刺植物，汁水可以给猫狗解毒
仙人掌:
一种带刺植物，汁水可以给猫狗解毒

将div以表格显示

字母表
1st
2st
3st
4st
5st
A
B
C
D
E
F
G
H
I
J

display:none，元素不显示，这里将C隐藏了