display

来源：MDN-display

display 在一般情况下会有四个属性值，分别是block、inline、inline-block和none

注意：display 还有其他属性值，如 flex,表示使用 flex 布局，后面会单独详细解释

属性值	含义
block	表示转换为块级元素
inline	表示转换为行内元素
inline-block	表示转换为行内块元素
none	默认值。 如果和 display:block 搭配，none 表示隐藏元素,block 则表示显示元素

块级元素

什么是块级元素？

1. 在页面中独占一行，从上到下排列
2. 默认宽度：父元素的100%
3. 默认高度：由内容撑开
4. width、height、line-height、margin、padding 等都可以设置

块级元素注意事项

1. 块级元素既可以包含行内元素和又可以包含块级元素。
2. 文字类块级元素内不能包含其他块级元素。如 p 和标题标签
   • p 标签内主要存放文字，所以不能包含块级元素
   • 同理，h1~h6 文字类块级标签内也不能包含块级元素（主要是因为权重问题）

注意： 错误写法，虽然看起来没有问题，那是因为浏览器已经帮你做了修正，浏览器在解析网页时，会自动对网页中不规范的的内容进行修正。如：

1. 标签写在了根元素外部
2. p 元素嵌套块级元素
3. 根元素中出现了除 head 和 body 之外的子元素等

块级元素有哪些

div、h1~h6、p、列表标签、table、tr、cpation、form、option、tbody、thead、tfoot、html、body

行内元素

什么是行内元素？

1. 默认宽度和高度会被内容撑开
2. 相邻行内元素不会换行，一行可以显示多个，但是他们之间会有空白间隙，如果一行之内不能放下，则元素会换到第二行自左向右排列
3. 只能设置 line-height、margin 和 padding 左右的值，其余的样式都设置不了

行内元素注意事项

1. 行内元素只能包含文本和其他行内元素，不能包含块级元素
   • a 链接内不能嵌套其他 a 链接
   • a 链接内可以放块级元素（还是给 a 转换一下块级模式最安全）

行内元素有哪些?

span、a 以及格式化文本标签。如：strong、b、ins、u、del、s、em、i

行内块元素

什么是行内块元素？

1. 在行内元素的基础上 width\height、line-height、margin、padding 都可以设置

行内快元素有哪些？

img、td、th、input、textarea、select、button、iframe