css元素大小以及位置总结

元素所占的大小

如上图所示是表示一个元素的大小，content表示的是元素内容所占的大小
margin的距离是指元素外边框与父元素内边框的距离

css position属性

html元素的position属性有四个属性值，分别是static、relative、fixed、absolute

1. static

• 默认值
• 会随页面条滚动
• 即使设置top、bottom、left、right，元素的位置不会发生改变

2. relative

• 元素相对于原来的位置进行移动，移动的参考物就是浏览器默认给元素渲染出的那个位置
• 需要设置top、bottom、left、right，元素的位置才会移动
• left的值可正可负，为正，则元素位置往右边移动，为负，则往左边移动。right、top、bottom也一样，可正可负
• 元素移动后，原来的位置还存在文档流中，不会被其他元素填充上去。
• 会随着页面滚动条移动

3. fixed

• 需要设置top、bottom、left、right，才会相对于它原来的位置进行移动，这点跟relative一样。
• 元素在相对自己原来的位置移动后，页面滚动条滚动时，元素相对浏览器视图窗口的位置保持不变，即元素不会随着页面滚动条移动。

4. absolute

• 移动参考物，是它的上级指定了位置的一个元素，它的上级元素可以是父级，也可以是父级的父级。
• 它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
• 需要设置top、bottom、left、right，元素的位置才会移动
• 一般会搭配一个position属性为relative的父级元素使用

css float属性

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

1. left：元素必须浮动在其所在的块容器左侧
2. right：元素必须浮动在其所在的块容器右侧
3. none：元素不进行浮动
4. inline-start：元素必须浮动在其所在块容器的开始一侧
5. inline-end：元素必须浮动在其所在块容器的结束一侧