元素所占的大小
如上图所示是表示一个元素的大小,content表示的是元素内容所占的大小
margin的距离是指元素外边框与父元素内边框的距离
css position属性
html元素的position属性有四个属性值,分别是static、relative、fixed、absolute
- static
- 默认值
- 会随页面条滚动
- 即使设置top、bottom、left、right,元素的位置不会发生改变
- relative
- 元素相对于原来的位置进行移动,移动的参考物就是浏览器默认给元素渲染出的那个位置
- 需要设置top、bottom、left、right,元素的位置才会移动
- left的值可正可负,为正,则元素位置往右边移动,为负,则往左边移动。right、top、bottom也一样,可正可负
- 元素移动后,原来的位置还存在文档流中,不会被其他元素填充上去。
- 会随着页面滚动条移动
- fixed
- 需要设置top、bottom、left、right,才会相对于它原来的位置进行移动,这点跟relative一样。
- 元素在相对自己原来的位置移动后,页面滚动条滚动时,元素相对浏览器视图窗口的位置保持不变,即元素不会随着页面滚动条移动。
- absolute
- 移动参考物,是它的上级指定了位置的一个元素,它的上级元素可以是父级,也可以是父级的父级。
- 它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
- 需要设置top、bottom、left、right,元素的位置才会移动
- 一般会搭配一个position属性为relative的父级元素使用
css float属性
float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(与绝对定位相反)。
float属性的值:
- left:元素必须浮动在其所在的块容器左侧
- right:元素必须浮动在其所在的块容器右侧
- none:元素不进行浮动
- inline-start:元素必须浮动在其所在块容器的开始一侧
- inline-end:元素必须浮动在其所在块容器的结束一侧