《HTML+CSS》视频10 内联元素、display、overflow、文档流、浮动（重点）

浏览器默认格式对某些元素会有一个margin或者padding，可以使用通配符全部清除。

*{margin:0;
padding:0;}

内联元素

内联元素不支持width和height。

可以设置水平方向内边距，并且会影响布局
可以设置垂直方向内边距，但是不会影响布局

边框和内边距道理相同。

水平方向可以设置外边距，并且不会重叠，会叠加。
内联元素不支持垂直外边距。

display 和 undisplay

可以使用display来将内联元素设置成块元素显示，可选值：
inline：将一个元素作为内联元素显示
block：将一个元素设置为块元素显示
inline-block:行内块元素：既可以设置宽高，又不会独占一行
none：此元素不会被显示，并且不会在页面中占有位置。

除了使用display属性可以将元素设置为不可见之外，visibility属性也可以设置元素的隐藏和显示状态其可选值有下面几种：
visible：默认值
hidden：不显示，但是占位置

overflow

子元素超出父元素内容区的内容，我们称为溢出内容，默认在父元素外显示。

通过overflow属性，可以设置如何处理溢出内容。

• visible:默认值，不会对溢出内容做处理，会在父元素外显示
• hidden：溢出的内容会被修剪，不会被显示
• scroll：会显示滚动条，该属性无论内容是否溢出，都会添加水平和垂直双滚动条。
• auto：会根据需求自动添加滚动条。

文档流

文档流处于网页最底层，表示一个页面中的位置，我们所创建的文件都处在文档流中。

元素在文档流中的特点：

块元素

• 独占一行，自上向下排列
• 默认宽度是父元素的100%，默认值是auto
  （当元素的高度或宽度值是auto时，指定padding不会影响可见框的大小，而是会自动修改内容宽度以适应可见框的大小）
• 默认高度被内容撑开

内联元素

• 只占自身大小，默认从左向右排列，一行容纳不下，会换行。
• 宽度和高度，默认都是被内容撑开

浮动

如果想要块元素水平排列，就需要使块元素脱离文档流。可以使用float来使元素浮动，从而脱离文档流。

float的可选值：

• none 默认值，在文档流中排列
• left 脱离文档流，向页面左侧浮动
• right 脱离文档流，向页面右侧浮动

当为一个元素设置浮动，元素就会脱离文档流，下边的元素就会向上移动。元素会往左上或右上浮动，直到遇到父元素的边框。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

浮动的元素不会超过兄弟元素，最多边界贴住

浮动的元素不会盖住文字。 文字会自动环绕在浮动元素周围，我们可以通过浮动来设置文字环绕图片的效果

当块元素脱离文档流之后，高度和宽度都会被内容撑开。

当内联元素脱离文档流之后，宽度和高度会生效，内联元素就会变成块元素。