position中relative，absolute，fixed的区别与运用

1.如何在页面中画个三角形，这个功能很常用，很多页面都有。
比如这种。


都可以通过这个方法实现。

画一个三角形

先创建一个空标签，设置边框，边框的粗细由三角形的长度决定，就相当于用边框画了一个正方形，这个正方形由四个方向的三角形组成，把边框的颜色设置透明色，在页面中有一个看不见的正方形，我们需要哪个方向的三角形，就给哪个方向设置颜色。
eg：p {border:10px solid transparent；
border-top-color:red;}
三角形画好了，一般都是通过定位把它设置在想要的位置。

定位体系

position:relative-相对位置，

不会脱离文档流，会保留它原来位置的尺寸。在页面里会影响页面的布局。
给想要移动元素直接设置position:relative，在设置4个方向的偏移量（移动的像素）正值相反，负值相同方向移动。

position: absolute-绝对位置

，会脱离文档流，不占用位置。
设置position: absolute，首先要给父元素设置position:relative定位，确定需要定位元素的包含块，子元素在设置position: absolute，设置方向值。上面的三角形有时候会用到定位体系。

position: fixed;固定位值。常用于：导航栏， 广告（左下角，右下角，则边栏）

导航栏：（header）
比如先设置当前标签为固定位置
固定位置的宽度auto,则为内容的宽度
当前案例需要导航撑满浏览器，因此需要设置宽度为100%，
设置固定位置后不会发生位置变化，需要设置方向值,才会改变标签位置，当前案例header在浏览器的顶部，因此设置top:0.
由于header标签为固定位置，因此会与下面的内容标签（div）重叠在一起，为了实现div标签在header下面显示，则设置上边距为header的高度，即让出header的高度，让div的内容在header下面显示.
div{
margin-top: xxpx;}
为了让导航栏始终在最上面显示，不被覆盖，我们一般还要设置堆叠级别z-index ，取值：数值
值越高—显示越前。

如何修改input中radio单选按钮的样式

正常的单纯的修改radio按钮的border background-color 的属性是无法修改radio按钮的样式的。
我们需要通过把原先的input按钮隐藏掉，通过伪元素，在label标签前画一个自定义的图案，比如圆形。 再把label和input元素通过for属性和id属性绑定在一起，再添加input:checked效果，即可完成美化按钮。
代码：

选项一 选项二 1.第一步：通过伪元素 画出label前的图案 input{ display: none; } label::before { content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 100%; border: red 1px solid; background-clip: content-box; padding: 4px; box-sizing: border-box; position: relative; left:-4px ; } 第二步：通过input元素伪类checked添加点击效果 input:checked+label::before{ background-color: white; border: red 5px solid; } 注意：for与id属性绑定input和label。 主要是对自己学到的一个总结，文中如果有错处，请大家指出。