CSS基础用法

叁歲伎倆 2024-04-01 19:02 85阅读 0赞

#### 目录 ####

*  padding(填充)
 *  margin(外边距)
 *  position(定位)
 *  border(边框)

## padding(填充) ##

1.  padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。  
    ![在这里插入图片描述][cce9aa41f835488f84d5441ff6d9359f.png]
2.  padding属性  
    ![在这里插入图片描述][9e249fdf2b3b4a849ac0255a71ef5f74.png]

## margin(外边距) ##

1.  margin(外边距)属性定义元素周围的空间  
    ![在这里插入图片描述][0ffe45a76fdb4c49a0aa527af94a32bd.png]
2.  外边距属性  
    ![在这里插入图片描述][ea0b54191cd64177a77946545d437040.png]

## position(定位) ##

1.  position 属性指定了元素的定位类型。
2.  position 属性的五个值：
    
     *  static：静态定位的元素不会受到 top, bottom, left, right影响
     *  relative：相对定位元素的定位是相对其正常位置
     *  fixed：元素的位置相对于浏览器窗口是固定位置
     *  absolute：绝对定位的元素的位置相对于最近的已定位父元素
     *  sticky：基于用户的滚动位置来定位

## border(边框) ##

1.  border属性指定一个元素边框的样式和颜色  
    ![在这里插入图片描述][5a1c501fbbeb41f79efbf04402c5f8e4.png]
2.  border样式：border-style  
    ![在这里插入图片描述][5f92ca9c9bb845f8b670d1adac08769a.png]
3.  border宽度：border-width
4.  border颜色： border-coler。border-color单独使用不起作用，必须和border-style一起使乱
5.  border简写：border。border: border-width border-style border-color  
    ![在这里插入图片描述][811881e5fd0e4c0f856a21ca1a6d2f45.png]

[cce9aa41f835488f84d5441ff6d9359f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bf7974ef1b524b54bf3a0dd4e685105d.png
[9e249fdf2b3b4a849ac0255a71ef5f74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3d64c752a39341f09043266bf56eb5b0.png
[0ffe45a76fdb4c49a0aa527af94a32bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e426ce2cdc8e464e87c5c093ea2c219a.png
[ea0b54191cd64177a77946545d437040.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/db8a827928514baf9e4fca5ee2437e96.png
[5a1c501fbbeb41f79efbf04402c5f8e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8f1dd119c1bb475697c0688db752b165.png
[5f92ca9c9bb845f8b670d1adac08769a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/cb30d0e0547c4283891be7da8ffd8b56.png
[811881e5fd0e4c0f856a21ca1a6d2f45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c629d10b5a2949bf8b7a01b0228a076d.png