1.基本值
| 属性值 |
说明 |
| blcok |
块级元素，独占一行 |
| inline-block |
行内块级元素，宽度由内容撑开，可设定宽度 |
| inline |
行内元素，宽度由内容撑开，不支持设定宽度 |
| none |
隐藏不展示，不占据空间 |
2.块级元素
- 块级元素会默认占满父元素的宽度且独占一行
- 常见的块级元素有div,p,ul,ol,li,h1~h6等
- 相邻兄弟元素间的margin会合并，谁大就已谁为准，并不会叠加
<body>
<div class="box1">高100 margin-bottom:50px;</div>
<div class="box2">高100 margin-top:50px;</div>
</body>
- margin溢出：嵌套的块级元素，如果内部有margin，且无法触碰到祖先的border/padding/content，margin则会溢出,如果有多层margin溢出，则以最大的为准
<style>
body{
width:600px;
margin:0 auto;
}
.parent{
margin-top:50px;
}
.son1{
margin-top:100px;
height: 100px;
background-color: yellow;
}
</style>
3.行内元素
- 常见的行内元素有span,a等，他的宽度完全由内容撑开，且不能为其设置宽高
- 行内元素可以设置padding和margin，但是垂直方向的margin无效（margin-top、margin-bottom）
<head>
<style>
a{
background-color: yellow;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<a href="#1">内联元素1</a>
<a href="#1">内联元素2</a>
</body>
</html>
3.行内块级元素
- 行内块级元素不会独占一行，且可以像块级元素一样设置宽高
- 常见的行内元素有input,textarea,img，select,button等
- 行内块级元素如果不设置宽高的话，他的大小默认由内容或者说子元素撑开，它的特性介于块级元素与行内元素之间
4.实际运用（轮播图）
- 最外层容器使用块级元素，宽度固定，溢出隐藏
- 中层容器使用行内块元素，他的宽度度由内容自动撑开，且不允许换行，宽度能自适应不同数量的轮播图
- 最内层元素使用行内块元素，不仅可以同行展示，还可以设定宽度
<div style="width: 800px;overflow: hidden;">
<ul style="display: inline-block;white-space:nowrap;font-size: 0px;">
<li style="display: inline-block;font-size: 16px;">inline-block</li>
<li style="display: inline-block;font-size: 16px;">inline-block</li>
<li style="display: inline-block;font-size: 16px;">inline-block</li>
<li style="display: inline-block;font-size: 16px;">inline-block</li>
</ul>
</div>
