共计 1076 个字符，预计需要花费 3 分钟才能阅读完成。
笔记从尚硅谷 html+css 的第 54 讲开始的内联元素的盒模型，此套视频是第二遍看，为了以后不再看第三遍，把重要的知识做个总结。
54 讲 内联元素的盒模型
内边距 padding
内敛元素不能设置 width 和 height
水平方向可以设置水平方向的内边距 padding-left 和 padding-right
内联元素可以设置垂直方向的内边距 padding-top 和 padding-bottom 但是不会影响页面的布局，它会像被子一样把下面的元素盖住，这和块级元素是不一样的，块级元素会把它下面的元素往下方挤
内联元素可以设置边框，与上面相似水平方向的边框会影响布局，垂直方向的元素不会影响布局，而是遮盖下面的元素
外边距 margin
水平方向可以设置外边距 margin，而且相邻元素的外边距不会重叠而是求和，这和 div 块级元素相似
内联元素不支持垂直方向上的外边距 margin-top 和 margin-bottom
总结
在水平方向上的布局几乎和块级元素相似，但是在垂直方向上和块级元素大不同
55 讲 display 和 visibility
display
内联元素比如,<a> 是不能设置宽和高的，可以通过设置 display:block 进行设置为块级元素。
与 display:block 对应的属性 display:inline-block 将一个元素转换为行内块元素实现了既能设置宽高又不会独占一行的效果。其实我们的 img 元素天生就有这种效果。
display:none 也是经常用的一个属性，它会把元素隐藏，隐藏后的元素不会占用页面的布局，但是查看源码还可以看到该元素。
visibility
visibility:visible 是元素的默认值，visibility:hidden 也是设置元素为隐藏，但是它隐藏后还会占用页面的布局。
总结
display 和 visibility 是写页面 css 常用的布局设置，注意两个隐藏的区别。
56 讲 overflow
overflow 的默认属性设置是 overflow:visible
overflow:hidden 会把溢出的内容隐藏掉
overflow:scroll 为元素设置滚动条，不管内容溢不溢出都会有滚动条。恩，样子很丑！
overflow:auto 根据内容的需求自动添加滚动条，比上面的智能多了！
57 讲 文档流
在正常的页面中，块级元素的特点：
1. 宽度等于父元素的宽度
2. 高度被内容撑开
3. 独占一行，多个块级元素一行一行排列
在正常的页面中，内联元素的特点：
1. 高度宽度都是被内容撑开
2. 不再独占一行，而是左右排列，一行满了挪到下一行，就想我们平时写作文一样。
以上只是在正常的文档流中
