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 固定定位