CSS知识点

常用CSS属性

Background背景属性

• background-color 背景颜色
  1 十六进制颜色 background-color:#ff0000;
  2 RGB颜色 background-color:rgb(255,0,0);
  3 RGBA颜色 background-color:rgba(255,0,0,0.5);
  4 HSL色彩 background-color:hsl(120,65%,75%);
  5 HSLA颜色 background-color:hsla(120,65%,75%,0.3);
  6 预定义的颜色名称 background-color:red; transparent是透明色
• background-position 背景图像的位置
  1 .left，right，top，bottom，可以有两个值，如果指定一个，另一个默认center
  2 . X% Y% X为水平位置，Y为垂直位置，如指定一个，另一个为50%
  3 .x y X为水平位置，Y为垂直位置，单位可以是任何CSS单位
  4 . inherit 从父元素继承
• background-size 背景图片的大小
  1 . length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为atuo(自动)
  2 . percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto(自动)
  3 . cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
  4 . contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
• background-repeat 重复背景图像
  1 .repeat 背景图像将向垂直和水平方向重复。这是默认
  2 . repeat-x 只有水平位置会重复背景图像
  3 . no-repeat 不重复
  4 . inherit 从父元素继承
• background-attachment 背景是否固定
  1 . scroll 背景图片随页面的其余部分滚动。这是默认
  2 . fixed 背景固定
  3 . inherit 从父元素继承

Border边框属性

• border-style 边框样式
  1 . dotted: 定义一个点线边框
  2 . dashed: 定义一个虚线边框
  3 . solid: 定义实线边框【常用】
  4 . double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
  5 . groove: 定义3D沟槽边框。效果取决于边框的颜色值
  6 .ridge: 定义3D脊边框。效果取决于边框的颜色值
  7 . inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
  8 . outset: 定义一个3D突出边框。 效果取决于边框的颜色值

Text文本属性

• color 文本颜色
  1 . 十六进制 color:#FFFFFF
  2 . RGB color:RGB(255,255,255)
  3 . 颜色名字 color:red transparent是透明色
• text-align 对齐方式
  1 . left 把文本排列到左边
  2 . right 把文本排列到右边。
  3 . center 把文本排列到中间。
  4 . justify 实现两端对齐文本效果。
  5 . inherit 从父元素继承
• text-decoration 文本装饰
  1 . none 默认。定义标准的文本。
  2 .underline 定义文本下的一条线。
  3 .overline 定义文本上的一条线。
  4 .line-through 定义穿过文本下的一条线。
  5 .blink 定义闪烁的文本。
  6 .inherit 从父元素继承
• text-transform 文本转换
  1 . none 默认。定义带有小写字母和大写字母的标准的文本
  2 . capitalize 文本中的每个单词以大写字母开头
  3 . uppercase 都为大写字母
  4 . lowercase 都为小写字母
  5 . inherit 从父元素继承
• float 浮动
  1 . left 左浮动
  2 . right 右浮动
  3 . none 默认值，无浮动

元素浮动之后一定要清除浮动，否则会有BUG

<!--清除浮动，加到浮动元素的父级上-->
.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

• position 定位
  1 . absolute 绝对定位，相对于除了static定位的第一个有定位属性的父元素。脱离文档流
  2 . fixed绝对定位，相对于浏览器窗口进行定位
  3 . relative 相对定位，相对于自己进行定位