上一篇博客主要说明了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涉及的内容实在太多了，想一口吃成胖子，只会像狗熊掰棒子一样。日后遇到问题再慢慢补充吧~
网友评论