2020-12-01

最新推荐文章于 2020-12-29 18:07:34 发布

量子次元

最新推荐文章于 2020-12-29 18:07:34 发布

阅读量73

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/fengchang11111/article/details/110454864

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、关于postion。

1.static静态。

<div style="border: 1px solid black; width: 900px;height: 300px;">
           <div class="i" style=" background: #4C92FC;"></div>
           <div class="i" style=" background: #7FFFD4;"></div>
           <div class="i" style=" background: #FFFF00;position:static;"></div>
       </div>-->

style=“postion：static;”位置没啥变化，默认选项。

2.fixed:脱离文档流，相对于body进行定位。

       <div style="border: 1px solid black; width: 900px;height: 300px;">
           <div class="i" style=" background: #4C92FC;"></div>
           <div class="i" style=" background: #7FFFD4;"></div>
           <div class="i" style=" background: #FFFF00;position: fixed;bottom: 30px;right: 30px;"></div>
       </div>

position: fixed;bottom: 30px;right: 30px;无论咋滑动鼠标，只定在网页面的固定位置。

3.relative：并不脱离文档流，相对于自身进行定位

       <div style="border: 1px solid black; width: 900px;height: 300px;">
           <div class="i" style=" background: #4C92FC;"></div>
           <div class="i" style=" background: #7FFFD4;"></div>
           <div class="i" style=" background: #FFFF00;position: relative;bottom: 30px;"></div>
       </div>-->

position: relative;bottom: 30px;看，黄色边框就飘起来了。在这个<div></div>内黄色框定在左下角。

4.absolute:脱离文档流，相对于postion为非static的副标记定位。

<div style="border: 1px solid black; width: 900px;height: 300px;position: fixed;">
           <div class="i" style=" background: #4C92FC;"></div>
           <div class="i" style=" background: #7FFFD4;"></div>
           <div class="i" style=" background: #FFFF00;position: absolute;bottom: 10px;right: 10px;"></div>
       </div>

二、margin和padding

1.margin用于设置当前标记距离周围标记的距离，得是块级元素。

margin-bottom: 10px;(与下面标记距离）
               margin-left: 5px;;(与左面标记距离）
               margin-right: 5px;;(与右面标记距离）
               margin-top: 10px;;(与上面标记距离）

也可以合并这几个项：

margin: 10px;/*一个值上下左右都是10px*/
               margin: 10px 5px;/*两个值，上下左右*/
               margin: 5px 10px 5px;/*三个值，上左右下*/
               margin: 10px 2px 10px 2px;/*四个值按顺时针，上下左右*/

2.padding用于设置当前标记的框内字距框边的距离。

padding: 20px;/*上下左右内边距都是20*/
               padding: 10px 20px;/*上下左右*/
               padding:10px 20px 10px;/*上左右下*/
               padding: 10px 120px 10px 120px;/*顺时针，上，右，下，左，*/

跟margin性质差不多。