Section1_Task04笔记

发表于 | 分类于 |

任务四是利用CSS画出一个简单的组合几何图形

任务目标
  • 实践HTML/CSS布局方式
  • 深入了解position等CSS属性
画四分之一圆

利用css画出半径为50px的四分之一圆

1
2
3
4
5
#section {
    height: 50px;
    width: 50px;
    border-radius: 50px 0 0 0;
}
position 属性

css当中的position一共有四种，分别是

  • statics
  • relative
  • absolute
  • fixed

其中statics为默认属性。当设置position为relative时，再去设置top等距离时，表示的是相对于之前原本位置的偏移量，且此时元素依旧处于标准文档流当中占据一个位置。

当设置position为absolute时，此时去设置top等距离时，表示的是离距离元素最近的具有relati属性的元素的位置。若不存在具有relative属性的元素时，表示距离html文档左上角的距离，且此时元素脱离标准文档流。

fixed属性目前还没有用到，只是大概的了解当position为fixed时，元素就固定在浏览器页面的某个位置，不随滑轮滚动。