css核心概念

元素分类

• 块级元素 block
• 内联元素 inline
• 内联块级元素 inline-block

通过display可以改变元素的展示状态

块级元素

1. 每个块级元素都是另起一行，并且独占一行
2. 元素的盒模型属性都可以设置
3. 元素宽度默认是父容器宽度的100%

内联元素

1. 内联元素和其他内联元素都在一行展示
2. 元素的盒子属性设置无效
3. 元素的宽度是包含文字或图片的宽度，不可改变

内联块级元素

同时具备内联和块级的特征
整体对外展示内联特性，对内展示块级特性。

1. 和其非块级元素在一行上
2. 元素的盒子属性可以设置

盒模型

从内向外依次是 实际内容 -> 内填充 -> 边框 -> 边界
content -> padding -> border -> margin

布局模型

• 流动模型 Flow
• 浮动模型 Float
• 层模型 Layer

流动模型 FLow

流动Flow是网页的默认布局，默认情况所有的HTML元素都是根据流动模型来分布网页内容。
流动布局有两个特征：

1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布
2. 内联元素都会在所处的包含元素内从左到右水平分布

浮动模型

任何元素在默认情况下都是不能浮动的，可以通过css定义为浮动。

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

float取值有 left right none inherit

通常所说的float元素脱离了文档流，一般情况看上去没问题，

但 float最初的目的是实现文字环绕效果，从这点看，似乎又没脱离流，这一点我不解，

可能mdn给的这个就是解释吧

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性。

就是保持了部分流动性。

层布局

层布局模型，就像是Photoshop中的图层，每一层都能精确定位，

但在网页设计领域，由于网页大小的活动性，层布局没收到热捧。

如何让html元素在网页中精确定位，css定义了一组定位属性position来支持层模型布局：

Position

• absolute
• relative
• fixed

relative

设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着。

absolute

设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

由于relative没有脱离文档流，所以可以设置父元素为relative，设置子元素为absolute 就可以使用上下左右让子元素相对父元素移动了。

fixed

设置position:fixed（表示固定定位），与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。