[分享]css参数设置块位置

 CSS参数设置块位置在开发网页的过程中，我们经常需要设置元素在页面中的位置。CSS提供了很多参数来帮助我们控制元素的位置。块级元素和行内元素在设置元素位置之前，我们需要先了解块级元素和行内元素。块级...

 CSS参数设置块位置
在开发网页的过程中，我们经常需要设置元素在页面中的位置。CSS提供了很多参数来帮助我们控制元素的位置。
块级元素和行内元素
在设置元素位置之前，我们需要先了解块级元素和行内元素。块级元素指的是默认情况下会独占一行的元素，例如div、p等。行内元素指的是默认情况下不会独占一行的元素，例如span、a等。
设置块级元素位置
1.设置元素宽度和高度
我们可以使用width和height参数来设置元素的宽度和高度，例如：

p{
  width: 200px;
  height: 100px;
} 

2.设置元素位置
我们可以使用position参数来设置元素的位置。position共有四个取值：
- static：默认值，元素按文档流排列
- relative：相对定位，元素相对于自身原来的位置偏移
- absolute：绝对定位，元素相对于父级元素或文档的位置偏移
- fixed：固定定位，元素相对于浏览器窗口的位置偏移
例如，我们可以使用relative和left参数来将元素向右偏移50像素：

p{
  position: relative;
  left: 50px;
} 

3.设置元素浮动
我们可以使用float参数来使元素浮动，使其不再按文档流排列。例如：

p{
  float: left;
} 

设置行内元素位置
对于行内元素，我们可以使用text-align参数来设置其在父级元素中的水平位置，例如：

div{
  text-align: center;
} 

我们同时也可以使用vertical-align参数来设置行内元素在父级元素中的垂直位置，例如：

img{
  vertical-align: middle;
} 

使用以上的CSS参数，我们可以轻松控制元素的位置，使其呈现出我们想要的页面效果。
参考链接：
- https://www.runoob.com/css/css-positioning.html
- https://www.w3school.com.cn/css/css_align.asp