CSS属性用法总结

nicepainkiller

2019-06-21

1.background系列属性

在为元素设定样式的时候，往往需要为该元素设置背景，一般有颜色，背景图片等．

1.1 背景颜色

在CSS类中使用background-color属性为元素设置背景颜色：

/* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-color: #666;
    }
    a {
        background-color: #999;
    }
    /* HTML */
    <div class="box"></div>
    <a href="">这是一个a标签</a>

1.2 背景图片

通过background-image属性为元素设置背景图片：

/* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-image: url(./图片);
    }

1.3 背景图片重复

通过background-repeat属性设置背景图片是否可重复：

/* 不平铺 */
    background-repeat: no-repeat;
    /* 横向平铺 */
    background-repeat: repeat-x;
    /* 纵向平铺 */
    background-repeat: repeat-y;

1.4 背景定位

当背景图片大小大于容器的时候使用background-position属性设置背景图显示的位置，其参数可以是表示位置的参数由＂左右＂，＂上下＂两部分组成．

/* 前一个参数可以为left center right,表示左右 */
/* 后一个参数可以为top center bottom,表示上下 */
    background-position: center top;

其参数也可以是像素值

/* 第一个参数表示向左移动的值，第二个参数表示向右移动的值，并且支持负值 */
    background-position: 100px, -100px;

雪碧图
网页中往往存在大量的小图标，如果每个小图标单独一个文件会导致单个页面进行过多的网络请求，性能地下．所以我们可以把页面中使用的图标放在一张图片中，通过定位图标在图片中的位置来过去图标，这样每个页面获取多个图标只需要一个网络请求了．
雪碧图的使用方法，(假设我们有一张集成了多个图标的图片icon.jpg)

为容器设置宽高，即将要引入的图标的大小
通过background-position属性设置图标在图片中左上角的坐标值并取负(假设图标为矩形)

1.5 背景图像是否固定

使用background-attachment:fixed;设置，将背景图片固定．

1.6 综合属性

当要对background的多个属性进行设置的时候可以使用缩写的方式．

/* 引入图片　图片不重复　图像左右定位中间，图像上下定位中间　背景图像固定 */
background: url(./a.jpg) no-repeat center center fixed;

2 position系列属性

2.1 相对定位

设置方法：position:relative;
什么是相对定位？相对定位可以对元素进行微调，相对自己原来的位置进行移动，位置的移动方向通过设置left,right,top,bottom的值来进行移动．
相对定位和下面要说的绝对定位不同，它不会脱标．这种形式的移动相当于形影分离，身体留在原来的位置（本体看不见但还是占有位置），影子移动．
相对定位的常见用途 微调元素或做绝对定位的参考：子绝父相．

2.2 绝对定位

设置方法：position:absolute;
绝对定位根据参考点进行位移，唯一方式于相对定位相同．
参考点:

如果绝对定位的元素没有父元素，则定位元素的参考点是这样的，如果使用top描述，参考点为页面左上角如果使用bottom描述，参考点的是浏览器首屏窗口的左下角
如果绝对定位的元素有父元素，则定位元素参考点这样找，如过父级有定位属性就以父元素为参考，如果父级没有定位，就继续往上层找．

如果一个盒子设置了绝对定位，并且往一个方向上位移，那么与这个方向相同的padding会失效．

绝对定位会使元素脱离标准文档流，如果父元素没有相对定位，那么脱标带来的影响将无法解决．
绝对定位之后，所有标准流的规则都不再适用．所以margin: 0 auto;也会失效．

要使绝对定位的盒子居中: left: 50%; 或者 margin-left: 负的宽度的一半

2.3 固定定位

设置参数为：position:fixed;
固定定位就是相对浏览器窗口定位.页面无论如何滚动，这个盒子显示的位置不变．
并且固定定位的盒子脱标．

2.4 z-index

z-index的值表示谁压着谁．数值大的压着数值小的．
只有定位了元素，才能有z-index值，也就是说相对定位，绝对定位，固定定位都可以使用z-index值．但是浮动的东西不能使用．
从父现象：子元素的z-index再大，如果父元素的z-index小，还是要被压在身下．

2.5 static

position:static;
还可以通过static参数取消定位属性．

3 文本系列属性

color 文本颜色
direction 设置文本方向参数rtl表示从右向左，参数ltr表示从左向右
letter-spacing 设置字符间距 normal为默认值，没有间隙．length定义字符间固定空间允许负值．
text-decoration 文本修饰 none:定义标准文本 underline:下划线 overline:文本上的一条线 line-through:穿过文本的一条线
text-indent 缩进元素中文本的首行　length:定义固定缩进　%:定义父元素百分比的缩进
word-spacing 字间距　normal 定义单词间的标准空间　length:定义单词间的固定空间

4 字体系列属性

font-family 设置字体集
font-size 设置字体大小
font-style 设置字体样式　
font-weight 设置字体粗细
font简写

5 列表样式

list-style-image 使用图像替换列表标记　属性值:url
list-style-position 列表标记位置　属性值:inside outside
list-style-type 列表标记类型
list-style 可以通过简写形式设置

6 轮廓

轮廓是围绕元素边框外绘制的线，outline 属性与 border 属性不同：outline不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。
轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。

outline-color 颜色
outline-style 轮廓样式
outline-width 轮廓宽度
outline 支持使用简写方式

7 display(显示)与visibility(可见性)

7.1 display

inline 设置元素为行内
block 设置元素为块级元素
inline-block 设置元素为行内块元素
none 元素消失，且不占据原来的位置

7.2 visibility

通过 hidden 设置元素隐藏，但元素仍然会占有原来的位置．

css颜色 background css css绝对定位 css样式