CSS 中的border-radius与position属性
实践
今天再做一个小项目的时候遇到了一个模块儿不知道怎么做
没错，你看到的这个小圆点和一条长线，当时觉得这个是应该用ps做一张图，然后再使用css样式显示在网页。
在插入这张图片的时候对布局也做了调整，但是，不知道是我自己的div高度出现了问题，还是图片大小的问题，（不过div出现问题的话是可以轻松检查出来的），当我想在下面插入一段文字的时候必须要换行才可以显示成自己想要的效果。
就因为这个换行，这一小模块儿就达不到要求，觉得自己还是css知道的还很欠缺，就开始快速的补习了一下css，当我看到border-radius的时候，用我自己的话来说，这个属性就是处理元素边框样式的。
然后我琢磨了一下，这个属性正好派上用场，把border-radius的属性值改成50%不就可以实现实心圆的要求了嘛。长线的话直接用div使用width,height设置成60px,2px不就好了嘛，在这当中使用一个绝对定位position设置成absolute 这样用top，right，button，left定位元素就完成了。
border-radius的四个值
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
- border-top-left-radius: 左上角
- border-top-right-radius: 右上角
- border-bottom-right-radius: 右下角
- border-bottom-left-radius: 左下角
元素的边框样式会跟着以上属性值的设置更改弧度，说白了就是一个用于设置所有四个边框- *-半径属性的速记属性.
强大的position
对于一个小白来说，想做一个简单的静态网页，首先要想好这个网页当中要包括什么元素，有些元素自己想放到的位置却不能像预期的一样，在这时，你就可以考虑使用position这个属性。
话不多说上注释
position 属性
-
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。相信大家也可以看懂absolute这个属性，没错就是将position定义成absolute属性后使用"left", “top”, “right” 以及 “bottom” 属性进行位置固定
-
fixed
生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。当你使用fixed这个属性控制一个元素的时候，做好位置固定后，即使窗口是滚动的它也不会移动。
<style type="text/css">
p{
font-size: 50px;
}
span{
position: fixed;
left: 500px;
top: 300px;
}
/* 这样设置之后效果很明显，span的元素是不动的 */
</style>
<body>
<p>Some text1</p>
<p>Some text2</p>
<p>Some text3</p>
<p>Some text4</p>
<p>Some text5</p>
<p>Some text6</p>
<p>Some text7</p>
<p>Some text8</p>
<p>Some text9</p>
<p>Some text10</p>
<p>Some text11</p>
<p>Some text12</p>
<p>Some text13</p>
<p>Some text14</p>
<p>Some text15</p>
<p>Some text16</p>
<p>Some text17</p>
<p>Some text18</p>
<p>Some text19</p>
<p>Some text20</p>
<span>这是一个不动的元素</span>
</body>
-
relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。这个属性的意思就是模块2相对与模块1的位置话不多说，看代码
<style type="text/css">
h1.left{
position: relative;
left: -30px;
}
h1.right{
position: relative;
left: 30px;
}
/* 推荐大家可以试一下 */
</style>
<body>
<h1 class="right">这是一个对相与H1向右偏移的元素</h1>
<h1>这是一个H1正常的标题</h1>
<h1 class="left">这是一个对相与H1向左偏移的元素</h1>
</body>
-
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。static就不说了。
-
sticky
粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。这个属性我们可以想想自己手机上的QQ中有分组吧，当你列表人数超过了你的手机屏幕，当你往下翻的时候，你就会发现你打开的分组就是一个粘性定位。我们设置成sticky的时候再设置一下这个元素你想让它移动top位置到多少px的时候就不再移动。这样就可以实现粘性定位的作用啦。
总结
在这里我也是分享一下我自己学到的知识，一定会有不全面的地方，关于border-raidus和position这两个属性在HTML中也是使用广泛的。
照我的理解所有的元素都可以使用position属性去定位，但是出于对网页性能的要求，也应该合理的使用position。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
