2020.02.14

2.14学习

文档流，浮动1，内联元素的盒子

文档流：
文档流处在网页的最底层，它表示的是一个页面中的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素：块元素在文档流中独占一行，块元素会自上而下排列
块元素在文档流中是父元素100%
默认高度被子元素撑开
内联元素：内联元素在文档中只占自身的大小，会默认从左向右排列
如果一行中不足以容纳所有的元素，则换到一下行
内联元素的宽度和高度都被内容撑开

浮动：
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float使元素浮动，脱离文档流
可选值：none，默认值，在文档流中排列
left：元素脱离文档流向左浮动
right：元素脱离文档流向右浮动
设置一个非none的float值之后，元素会迅速脱离文档流，他下边的元素会立即向上移动，知道遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，他不会超过块元素
浮动元素不会超过他上边的兄弟元素

内联元素的盒子模型
不能设置width和height
可以设置水平方向的内边距，也可以设置垂直方向的内边距，但是不会影响页面的布局
可以设置边框，但是也不影响布局
支持水平方向的外边距，水平方向的外边距不会重叠，会相加求和
不支持垂直方向的外边距

display：
通过display可以修改元素的类型
可选值：inline（可以将一个元素作为内联元素）
block（可以将一个元素设置为块元素）
inline-block（可以是一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不独占一行）
none：不显示元素，并且元素不会再页面中继续占有位置

visibility:
使用visibility：hidden隐藏的元素虽然不会在页面中显示但是位置一定会在

子元素默认是存在父元素的内容区中，理论上子元素的最大可以等于内容区大小
如果子元素超过了父元素的内容区，则超过的父元素以外的位置显示
则超出父元素的部分，成为溢出
父元素默认是将溢出内容，在外边显示
通过overflow可以设置父元素何如处理溢出内容
可选值 visible：默认值，不会对溢出内容做出任何处理
hidden：溢出的内容会被修剪，不会显示
scroll：会为父元素添加滚动条，通过滚动添加完整内容（该属性不论内容是否溢出，都会添加滚动条）
auto：会根据需求自动添加滚动条