元素的分类
- 块元素
- 行内元素
- 行内块元素
- 转换
块元素
独占一行，宽度默认为容器的100%，可以设置宽、高、行高、内外边距；布局时，块元素可以包含块元素和行内元素
<div>div</div><p>p</p><h3>h1-h6</h3><hr>
<form action="">form</form>
<dl><dt>dt</dt><dd>dd</dd>
</dl>
<table border="1"><tr><th>tr</th><th>tr</th></tr><tr><th>tr</th><th>tr</th></tr>
</table>
<table border="1"><tr><th>tr</th><th>tr</th></tr><tr><th>tr</th><th>tr</th></tr>
</table>
<ul><li>ul > li</li></ul>
<ol><li>ol > li</li></ol>
<header>header</header><aside>aside</aside><footer>footer</footer>
<section>section</section><nav>nav</nav><article>article</article>
效果:
行内元素
不会独占一行；不可以设置宽、高且无效，可以设置内外边距仅设置左右方向有效，上下无效；元素的宽高取决于内容的宽高，如果一行空间不够，会自动换行显示；布局时，行内元素一般不包含块级元素
<button>button</button>
<sub>下标</sub><sup>上标</sup>
<span>span</span>
<del>del</del><strong>strong</strong><ins>ins</ins><em>em</em>
<a href="#">a</a>
<input type="text"><label>lable</label>
<img src="./images/小车汽车.png"></img>
<video controls src="./images/videoEdit.mp4" width="200px" height="200px"></video>
<audio controls src="./images/Clairo-may-as-well.mp3"></audio>
<select><option value="">select</option><option value="">select</option><option value="">select</option>
</select>
<textarea>textarea</textarea>
效果:
行内块元素
它的宽、高、行高、内外边距都可以控制；默认宽度就是它本身内容的宽度，不独占一行
<style>button,input,textarea,img{padding: 5px;margin: 20px;width: 200px;height: 60px;}
</style>
<button>button</button>
<input placeholder="input" type="text">
<textarea>textarea</textarea>
<img src="images/小车汽车.png">
效果:
但是行内块元素之间会有空白缝隙，需要去除根据具体的需求和实际情况选择以下方法
1） 将行内块元素之间的 html 代码写在同一行，删除换行符和空格
2） 通过设置父元素的字体大小为 0，可以使空白文本节点不占据空间，再为行内块元素设置合适的字体大小
3） 使用负的间距( margin )，通过为行内块元素设置负的间距，可以抵消它们之间的间隙
4） 给行内块元素添加 float 属性（浮动）
<style>img{border: 1px solid red;/*float: left;*//*margin: -3px;*/}div{font-size: 0;}
</style>
<div><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png"><img src="images/小车汽车.png">
</div>
效果:
转换
定义元素为行内元素：display: inline;
<style>div{border: 1px solid #f531ff;display: inline; /*强转为行内元素*/}
</style>
<div>div1</div>
<div>div2</div>
<div>div3</div>
效果:
定义元素为块级元素：display: block;
<style>span{border: 1px solid #f531ff;display: block; /*强转为块元素*/}
</style>
<span>span1</span>
<span>span2</span>
<span>span3</span>
效果:
定义元素为行内块级元素：display: inline-block;
<style>span{border: 1px solid #f531ff;display: inline-block; /*强转为行内块元素*/}div{border: 1px solid #f531ff;display: inline-block; /*强转为行内块元素*/}
</style>
<span>span</span>
<div>div</div>
效果:
元素宽度的百分比是相对于父元素的宽度的百分比。元素的内边距与外边距，都是相对于父元素的宽度的百分比。元素的宽度是内容的宽度，真实占据的位置是内容宽度+内边距+边框。元素的高度的百分比是相对于父元素的高度的百分比，一般不会设置高度 高度就是内容的高度。一行只有一个容器你才能居中，如果有多个，需要自己设置宽度和边距进行居中排列
