day6 边框/列表/背景属性，浮动

1. 鼠标样式属性 cursor

2. 边框属性

（1）边框宽度 border-width

• 属性值： 数值+px

（2）边框样式 border-style

• 属性值

  • solid (实线)
  • dashed (虚线)
  • dotted (点状线)
  • double(双实线)

（3）边框颜色 border-color

• 属性值： 颜色值， transparent(透明)

（4）常用复合写法 border: 边框宽度 边框样式 边框颜色

• 属性值之间用空格隔开
• 属性值之间是没有顺序的
• border: none

（5）单方向的边框 border-top/bottom/left/right/none(去掉边框)

• 使用场景：

  • 1）设置单一边框，如 border-top: 宽度 样式 颜色；
  • 2）设置单一边框没有， 如border-top: none;
• 注意： 如果单方向和复合写法的边框同时存在时，需要将单方向的边框放在复合写法的后面。否则，复合写法会覆盖单方向的设置。

3. 列表属性

（1） 列表符号类型 list-style-type

• 属性值

  • disc (实心圆，默认值)
  • circle (空心圆)
  • square (实心方块)
  • none (去掉列表符号)

（2）列表符号的位置 list-style-position

• 属性值

  • inside(在li里面)
  • outside(在li外面，默认值)

（3）列表符号的图片 list-style-image

• 属性值 url（图标的路径）

（4）复合写法

• list-style: 列表符号类型 列表符号位置 列表符号位置
• list-style: none 去掉列表符号

4. 背景属性

（1）背景色 background-color

（2）背景图 background-image: url(背景图的路径)

（3）背景图重复 background-repeat

• 属性值：

  • repeat 重复
  • repeat-x x轴重复
  • repeat-y y轴重复
  • no-repeat 去掉重复

（4）背景图的位置 background-position: 水平 垂直；

• 属性值

  • 数值+px

  • 关键字

    • 水平 left/center/right (水平向右为正)
    • 垂直 top/center/bottom （垂直向下为正）

  注意：关键字和可以混合使用；

  ​ 只写一个值的时候，第二个值默认居中；

（5）复合写法：

• background: 背景色 背景图 背景图重复 背景图的位置

  • 顺序个数不固定，一般是这个顺序

注意：如果要修改复合写法里面的某个属性值，需要将展开写法写到复合写法的后面， 否则会被复合写法覆盖。

（6）img和背景图引入图片的区别

• img引入的图片占位，背景图不占位
• img引入的图片一般作为网页的内容，背景图主要是修饰

5. 浮动

（1）float: none/left(左浮动)/right(右浮动)

（2）应用场景：让纵向排列的元素横向排列

（3）特性：

​ 1）浮动元素会从父元素的边缘开始挨个排列

​ 2）添加了浮动元素会 脱离文档流，后面的元素会占据浮动元素的位置，也就是浮动元素会遮挡后面的元素，但是不会遮挡住文字

​ 3）当父元素的宽度不能够容纳下浮动元素后，浮动元素会掉下来，并且掉到浮动设置的值，比如左浮动，则掉到左边

​ 4）浮动元素会影响后面的兄弟，但是不会影响到前面的兄弟