border，position属性最浅显详解

border，position属性最浅显详解

做一个酷酷的男孩子，有梦想，还要有担当！

border： 声明设置所有的边框属性

border-width	边框的宽度	px表示
border-style	边框的样式	dotted点状， solid实线， double双线， dashed虚线
border-color	边框的颜色	red，#fff，

如上表格所示，表格中的三个属性就是border属性的子属性，工程中常用的符合写法为：

border：10px solid #f7f7f7;

其他元素还有很多。如margin的子标签有margin-top，margin-bottom，margin-left，margin-right。理解这个，脑海中的代码会有规律的多。

position：规定元素定位类型

absolute	绝对定位	相对于整个body的一个固定位置，随页面滑动发生相对显示器的移动
relative	相对定位	相当于元素未添加position属性时的位置的基础上发生偏移
fixed	固定定位	相对于浏览器窗口（显示器）的一个固定位置，页面滑动，相对显示器位置不变
static	默认值	无定位
inherit		规定应该从父元素继承 position 属性的值

哎鸭，好难理解鸭！！！

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    
    <div class="sss"></div>
    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

.item{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: red;
}
div.sss{
    width: 100px;
    height: 100px;
    background-color: #35b3ff;
    position: absolute;
    /*position: relative;*/
    /*position:fixed*/
    top: 500px;
    left: 500px;
}

• absolute 绝对定位
  

• relative 相对定位（图片写错了，应是500px）
  

• fixed 固定定位