列表样式和边框属性相关

• 设置列表样式
  • list-style-type:disc;
    • 默认选项,列表前面为实心圆
  • list-style-type:square;
    • 实心方形
  • list-style-type:circle;
    • 空心圆
  • list-style-type:none;
    • 无
• 设置图片
  • list-style-image:url(img/money.png);
  • 把列表前面的默认小圆点替换成指定图片
• 图标是否属于列表内容的一部分
  • list-style-position:inside;
    • 属于列表
  • list-style-position:outside;
    • 不属于列表(默认选项)
• 简写方式
  • list-style:none url(img/money.png) outside;
  • 依次写入: list-style:列表样式 图片地址 是否属于列表;
•  
• 隐藏属性
  • display:none;
    • 隐藏一个标签,这个标签的位置被后面的标签顶替(完全隐藏)
  • visibility:hidden;
    • 隐藏一个标签,这个标签之前占据的地方空着,不影响后面标签的位置
• 设置圆角
  • border-radius:20px;
    • 给标签四个角切弧度
    • 当标签的宽高一致,并且border-radiuus的值为宽高的一半时,切出来的是一个正圆形.

• 什么是边框
  • 边框就是环绕在标签宽度和高度周围的线条
• 边框属性的格式
  • 连写(同时设置4条边框):
    • border:边框的宽度 边框的样式 边框的颜色;
  • 快捷键:
    • bd+ border:1px solid #000
  • 注意点:
    • 连写格式中颜色可以省略,省略后就是默认的黑色
    • 连写格式中样式不能省略,省略之后就看不到边框了
    • 连写格式中宽度可以省略,省略之后还是可以看到边框
  • 连写(分别设置4条边框):
    • border-top:边框的宽度 边框的样式 边框的颜色;
    • border-right:边框的宽度 边框的样式 边框的颜色;
    • border-bottom:边框的宽度 边框的样式 边框的颜色;
    • border-left:边框的宽度 边框的样式 边框的颜色;
  • 快捷键:
    • bt+ border-top:1px solid #000
    • br+ border-right:1px solid #000
    • bb+ border-bottom:1px solid #000
    • bl+ border-left:1px solid #000
  • 同时设置上右下左四条边框的同一个属性
    • border-width:上 右 下 左;
    • border-style:上 右 下 左;
    • border-color:上 右 下 左;
    • 注意点:
      • 只有1个数值时代表四条边框一样
      • 只有2个数值时第1个数值代表上下,第2个数值代表左右
      • 只有3个数值时第1个数值代表上,第2个数值代表左右,第3个数值代表下
    • 非连写
      • border-left-style:double;
      • border-left-width:20px;
      • border-left-color:red;