常用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 yX为水平位置，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 . RGBcolor:RGB(255,255,255)
3 . 颜色名字color:redtransparent是透明色 -
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相对定位，相对于自己进行定位
