32
重学前端：块级元素与内联元素
source link: https://foofish.net/block-vs-inline.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
对于前端知识我一直没有体系化的掌握，所了解的都是一些零星散散的知识点，遇到问题半天才能解决，所以打算进行系统的学习一遍，基础的东西都是一劳永逸，这是重学前端系列的第一篇文章，关于块级元素与内联元素的区别。
块级元素
块级元素的特点
- 块级元素独占一行
- 可设置元素的宽度、高度、行高、外边距、内边距
- 块级元素占据其父元素（容器）的整个空间
- 可以容纳内联元素和其他块元素
常见块级元素有：
<div> <p> <h1>~<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
内联元素
内联元素的特点
line-height
常内联元素元素：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
注意：内联元素可设置水平方向的 margin 但垂直方向不可以设置， padding 水平和垂直可以设置
内联块级元素
内联块级元素是鉴于块级元素和内联元素之间的一种元素，它的特点是：
- 和其他元素都在一行上；
- 元素的高度、宽度、外边距、内边距都可设置；
内联块级元素有：
<img> <input>
三种元素可以通过设置css互相转换
display:inline; /*内联*/ display:inline-block; /*内联块级*/ display:block; /* 块级 */
为了加深印象请自行验证，网上资料很多都已经过时了。
看个例子：
<span>右边是图片</span> <img src="images/google.jpg" alt="google icon">
span 和 img 都是内联元素，所以他们都挤在一行，为了美观，可以让图片单独一行，你只要给 img 标签的 display 属性设置为 block 就可以。
img {
margin: 0 auto;
display: block;
width: 30px;
}
图片另一起了一行
--- EOF ---
任何问题可以扫描二维码给我留言
关注公众号「Python之禅」，回复「1024」免费获取Python资源
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK