css的常用属性及使用方法

上一篇博客主要说明了CSS的基本用法，本篇将要说一说CSS有哪些常用的属性，以及他们到底能做什么

- 基本属性 - 内外边距、宽高等
- 列表相关 - 纵、横导航栏
- a标签相关
- 背景图片相关

一、基本属性

1.1 内外边距

*{
  margin: 0;
  padding: 0;
}

    （*）表示对HTML中全部标签进行定义,建议在css最开始的地方清除全部元素默认边距，不然会有很多问题
    padding与margin的默认值有4个：上、右、下、左（内 / 外）边距，其用法如下：

 /*上下左右边距均不同*/
div{
  margin: 1px 2px 3px 4px;/*值的顺序遵守  上-右-下-左*/
  padding: 1px 2px 3px 4px;/*顺序同上*/
}

/*上下相同，左右相同*/
div{
  margin: 5px 10px;/*值的顺序遵守  上下-左右*/
  padding: 5px 10px;/*顺序同上*/
}

    使用外边距margin属性，可以办到让块级元素水平居中

div{
  margin: 15px auto 0;/*顺序遵守  上-左右-下*/
  margin: 0 auto;/*当距离文档流内，上下元素的距离相同时，上下外边距可合并*/
}

1.2 宽度与高度

div{
  width: 100px;
  height: 100px;
}

    宽度与高度的单位还可以是em，百分比等等，根据不同需求使用不同的单位。但通常来说，不建议为元素加上height属性，因为行内元素的高度很复杂，你很有可能无法让它变成你想要的样子；块级元素的高度由该块级元素内，所有文档流元素的高度的总和决定，强行加入高度也会引发不少Bug。
    下面有一种方法可以稍微减轻高度带来的负面影响；

div{
  padding: 10px 0;
}

    通过div的内边距，撑开div的高度。

1.3 边框

div{
  border: 1px solid red;/*值的顺序为  上下左右边框粗细-边框线类型-边框颜色*/
  border-style: dotted solid double dashed;/*边框样式值顺序为  上-右-下-左*/
}

    当然也可以单独定义某一侧边框的样式

/*以左侧（left）为例，上（top）下（bottom）右（right）同理*/ 
div{
  border: 0 solid black;/*先创建一个透明的边框*/
  border-left-color: red;/*左边框颜色*/
  border-left-width: 10px;/*左侧边框宽度*/
  border-left-style: solid;/*左侧边框的样式*/
}

二、导航相关

2.1 纵向导航栏

ul{
  list-style: none;/*清除列表样式*/
  width: 20px;/*设置列表宽度*/
  position: fixed;/*跟随屏幕滚动*/
  top: 25px;
  left: 0;/*固定在屏幕的指定位置上*/
}
ul li{
  margin: 5px auto; /*li在ul内水平居中，且上下增加间距*/
  text-align: center; /*列表内文本居中*/
}

2.2 横向导航栏

ul{
  list-style: none;
}
ul li{
  float: left;/*向左浮动*/
  margin: auto 10px;
}

请不要忘记为ul父元素清除浮动，清除浮动方法如下：

 .clearFix:after{
  content: '';
  display: block;
  clear: both;
}
/*给ul的父元素追加这个名为'clearFix'的class就可以了*/

三、a标签相关

    说完列表，说一下a标签吧，因为好多大神在写链接的时候都很喜欢用a标签，而a标签的一些默认属性会让新手很困扰。可能是我当初接触html的姿势不对，导致我喜欢将站内的页面跳转用<span>以及jQuery来实现，希望可以改掉这个毛病，并像大神看齐。

a{
  color: inherit;
  text-decoration: none;
}

这样做就可以清除a标签本身的属性，具体情况我不多说了，因为我目前还没习惯使用a标签。先照做就是了。

四、背景相关

4.1 图片背景

.background_container{
  height: 200px;/*如果这个div并没有内容，还是写上高度吧，不然你什么也看不到*/
  background-image: url(../img/1.jpg);/*背景路径*/
  background-position: center center;/*设置背景图片水平垂直居中*/
  background-size: cover;/*设置背景自动缩放*/
}

4.2 背景遮罩层

可能没什么卵用，但是还挺高大上的，并且可以了解rgba属性。这个属性的存在就很高大上。

.mask{
  height: inherit;/*遮罩层的高度集成其父元素高度，这样能够保证遮罩层永远与他爹一样高*/
  background-color: rgba(0, 0, 0, 0.8);/*设置半透明*/
}

五、小结

    实际上css的常用属性远不止这些，不过作为一名合格的小白，应该一步一步来，贪多嚼不烂，遇到问题再思考，再研究。我的老师跟我说，学习CSS不能着急，因为CSS涉及的内容实在太多了，想一口吃成胖子，只会像狗熊掰棒子一样。日后遇到问题再慢慢补充吧~