05-浮动/css

#### css属性
  * 列表属性
    + 列表符号 list-style-type
      - disc 实心圆
      - circle 空心圆
      - square 实心方块 
      - **none 去掉列表符号** list-style:none
    + 列表符号的位置 list-style-position
      - outside 默认值,在li的外面
      - inside 在li的里面  
    + 列表符号图片 list-style-image
      - url(图片的路径) 
    + **说明:列表属性自带的样式不使用,只使用去掉列表的属性,然后将列表前面的图标通过背景图的方式引入** 
  * 边框属性
    + 边框宽度 border-数值+px
    + 边框样式 border-style
      - solid 实线
      - dashed 虚线
      - dotted 点线
      - double 双实线
    + 边框颜色 border-color:颜色值
      - 不设置即为字体颜色 
    + **复合写法 border:边框宽度  边框样式  边框颜色;** 顺序不固定
    + 单方向边框 border-方向(left/right/top/bottom)  
      - border-bottom: 10px solid red; 
      - **修改单方向的边框样式一定要写在复合写法的后面**
      - 去掉边框的属性 **border-单方向:none**
  * 背景属性
    + 背景颜色 ">    + 背景图 background-image: url(背景图的路径)
    + 背景图的重复方式 background-repeat
      - repeat 重复 默认值
      - repeat-x 只在x轴或者横轴重复
      - repeat-y 只在y轴或者纵轴重复
      - no-repeat 去掉重复
    + 背景图的位置 background-position: 横轴 纵轴;
      - 默认在区域的左上角显示,向右的和向下是正数
      - 数值+px 数值+px;  
      - 百分比 百分比; 横轴的百分比相对于区域的宽度, 纵轴的百分比相对于区域的高度
      - 关键字
        - 横轴 left/center/right
        - 纵轴 top/center/bottom 
      - 只设置一个值表示横轴的位置  纵轴默认居中  
    + 复合写法 **background: 颜色 图片路径 重复方式 背景图位置** (顺序不固定) 
      - 展开的写法要放到复合写法的后面 
      - 背景色和背景图的路径可以单独用background的属性
      - 多个属性一定要用复合的写法
    + 背景图的大小 background-size: 宽度 高度
      + 数值+px 数值+px
      + 百分比 百分比 宽度是区域宽度的百分比 高度是区域高度的百分比
      + 关键字 
        - cover 拉伸背景图 会导致图片被裁切
        - contain 拉伸背景图 区域可能会出现留白
    + 背景图的固定 background-attachment
      - scroll 滚动 默认
      - fixed 固定 背景图不会跟随滚动条而滚动,背景图位置所参考的区域是浏览器的窗口
    + 特点
      - 不占位置  
  * 背景图和img标签的选择      
    - 背景图不占位置,img引入的图片占位置
    - 背景图一般是作为网页的修饰,图片是网页的内容
  * 三角形
  * 鼠标样式
#### 浮动
  * 浮动 float
    - none 默认值 不浮动
    - left 左浮动
    - right 右浮动
  * 浮动的特点
    - 从父元素的边缘开始挨着排列 
    - 父元素宽度不够的时候,浮动元素会掉下来,掉到浮动所设置的位置,比如左浮动,元素会掉到做百年
    - 元素设置浮动后会脱离文档流,没有设置浮动的元素会占据浮动元素的位置,文字不会被遮挡
    - 浮动元素不会超过没有设置浮动的元素
  * **浮动的应用场景**
    - 将纵向排列的元素横向排列,给每一个需要横向的排列的元素都添加浮动   

#### 矩形工具切图
  + 选中所要存的图
  + ctrl+c
  + ctrl+n 回车
  + ctrl+v
  + 左上角文件=>生成=>快速导出png
原文地址:https://www.cnblogs.com/qdbj2020/p/13438191.html