本文共 1368 字，大约阅读时间需要 4 分钟。
CSS
不对css做全面的讲解，而是将常用的知识点列出，并且，还会辅以常用的css技巧，保证在学完后，能写出一个可以看的页面
其实，对于非前端程序员来说，没必要将css学的那么深入，我们主要会使用流行的前端框架，就可以了。
样式的分类
优先级，是 行内样式>内部样式>外部样式
选择器
选择器优先级：id选择器 > 类选择器 > 标签选择器
- id 选择器
#haha { //...} - 类选择器
.haha { //...} - 标签选择器
p { //...} 宽度和高度
只要块级元素才可以设置宽度和高度
行级元素设置，是没有效果的
设置 width 和 height 即可
背景
背景色
使用 background-color
背景图
字体
大小，样式，粗细
单行文字垂直居中
让高度和行高一样
文字间距
列表样式
修改 li ol这些
边框样式
盒子模型
padding/margin 4 个值时，表示的是什么
margin: 1px 2px 3px 4px;
这表示的，是 上 右 下 左 四个方向的属性
padding/margin 2 个值时，表示的是什么
margin: 0px 10px;
表示 上下为0 左右为10
box-sizing: border-box
margin 0 auto 是什么意思
margin 0 auto，表示 上下0，左右auto
选择器
全局选择器
选中页面上的所有标签
一般是用来取消默认样式 或者是保持整站风格的
* { margin: 0; padding: 0; } 要注意，有些浏览器，自带的body是有默认样式的，我们需要使用全局选择器，将其 margin 和 padding 全部设置为 0，就像上面那样
并集选择器
交集选择器
父类选择器
子选择器
伪类选择器（重点）
主要是为了为标签添加特殊效果
用的最多的是为超链接添加效果（比如鼠标放在上面后，显示的效果）
注意，如果要写这四个，那顺序最好不要变，不然，可能会出现错误
float
块状元素，都是新开一行显示的
但是，使用float，能使他们在同一行显示
去除 float 对其他标签的影响
需要专门为其他元素，设置取消浮动的影响：
both是两边都去除影响
还有right 和 left
.clear { clear: both;} 
一开始，要去除浏览器默认样式
浏览器是有默认样式的，会导致我们的元素与边框有一定距离，我们要用css去除
a 标签，很傲娇
我们设置某一元素的属性时，对 a 标签，是不生效的，我们要单独为其设置
a { text-decoration: none; color: black;} display 和 visibility 的区别
display: nono：不显示，也不占据空间
visibility: hidden：不显示，但是占据空间
设置 inline，block，inline-block
有时候，我我们希望元素既可以像行级元素一样，可以同行显示，也可以向块状元素一样，可以设置宽高，这时候，我们就应该将这个元素，设置为 inline-block
写法：
display: inline-block;
转载地址：http://gjvpz.baihongyu.com/