前言
哈
这个CSS系列，是我从七月开始陆续整理的系列篇。存放在草稿箱里很久了，今晚把这几篇系列篇都整理下排版，然后发布出来。
为什么要写这个系列，初衷也是因为有很多细节点是需要从源头上去理解的。像是很多属性设置，都是设置在某个元素自身无效，在其父元素设置就生效，诸如这一类的，都是细节点。当然，如果了解原理之后，就不难理解为什么是这样的设置了。
总之，我热衷做总结梳理，不是我多勤快，恰恰是我懒，想通过这些知识碎点的整理，可以把这些知识点都学薄了，然后在有空就翻看的时候，又常翻常新。当然，后面有觉得需要补充添加的点的话，这几篇CSS系列篇会持续更新。
一、块级元素和行内元素
1、块级元素
（1）块级元素占据一整行的空间，可以再包含块级元素和行内元素。
（2）设定width和height属性有效。设定了width之后，没特殊要求可以不用再设定height，因为高度会按照宽高比自适应，这点常应用在img的使用。
（3）因为占据一整行空间，所以margin:0 auto的居中设定，需要在同时设定了width属性的情况下才有效。
需要记住的常见块级元素：div h1-h6 p form ul li dl ol table tr td th dd dt
让我意外，原来它是块级元素的标签：p,ul,li
2、行内元素
（1）占据本身内容的宽度。设定width和height是无效的。需要设置display：inline-block才能让宽高的设置生效。
（2）同时设定盒模型的margin，只有左右margin生效，上下margin是无效的。
需要记住的常见行内元素：em strong span a br img button input label select textarea script
让我意外，原来它是行内元素的标签：img、input、textarea、script、a
3、置换元素
置换元素就是会根据标签属性来显示的元素，反之就是非置换元素。比如img标签根据src属性来显示，input根据value属性来显示，同理textarea和select元素也是置换元素。
所以img元素是行内元素，同时也是置换元素，置换元素一般内置框高属性，可以直接设置框高。
二、边框
border:1px solid/dotted/dash/double #333
注意：border-style:dotted solid double dashed;，分别对应是点状/实线/双线/虚线
1、应用：实现三角形和由此的其他图形组合
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
2、圆形的实现
Paste_Image.png
3、边框圆角的实现
Paste_Image.png
三、盒模型
1、盒模型：就是margin+border+padding
2、上下左右距离的设置：
（1）举例：padding:10px 20px 30px：代表padding-top:10px;padding-bottom:30px;
padding-left和padding-right都是20px
（2）margin和padding的值都可以是百分比，是相对于父容器而言的
（3）margin外边距合并的问题
如下图：两个div之间的间距应该是10+10=20px，但却是10px。对此的解决方案是使用BFC。
Paste_Image.png
（4）行内元素设定padding的情况
行内元素设定padding时，左右padding是生效的，上下padding撑开了边距，但对其本身高度并没有发生变化，还是那么高。
Paste_Image.png
3、标准盒模型和IE盒模型
IE盒模型，是指IE678在怪异模式下（没有写!DOCTYPE:<!DOCTYPE html>）的盒模型状态
标准盒模型，在IE9以上，以及IE678在严格模式下（<!DOCTYPE html>）就是使用的标准盒模型。
标准盒模型：width和height的宽度高度设置，就是content的大小而已
IE盒模型：width和height的宽度高度设置是content+padding+border的大小。
4、box-sizing的使用
由盒模型延伸，有时我们设置父元素宽度900px,每个子元素小框宽度为300px，边框为1px，全部向左浮动，如果是在标准盒模型下，是无法同一行刚好布满3个小框的。因为实际3个小框的全部长度为300*3+1px*6=906px。这种时候，就需要用上IE盒模型这样的特性，才能刚好一行铺满。这时候就对子元素使用box-sizing:border-box属性，就可以实现刚好占一行。
Paste_Image.png
Paste_Image.png
四、居中的实现：
块级元素：margin:0 auto;(上下边距可以任意设，左右为auto即可)
行内元素：记住：是在其父元素上设定text-align:center,实现行内元素的居中
Paste_Image.png
五、display
块级元素的设定：display：blcok/table/list-item
行内元素的设定：display：inline/inline-table/inline-block
需要记住除了常见的inline、inline-block、block属性值外，还有的其他的display属性选项。
1、display:inline-block
这个属性很重要：因为它让元素呈现inline的特性，不占据一整行，宽度由内容宽度决定，又呈现 block 特性 ，可设置宽高，内外边距
（1）应用：面包屑
面包屑可以直接采用全部左浮动，然后父元素清除浮动的方式。也可以直接使用display:inline-block的属性设置，这种方法更简单。但对应的问题就是两个设置display:inline-block的行内元素之间会有缝隙。
缝隙情况如下：
Paste_Image.png
（2）解决缝隙问题：
因为换行也是等同于空白字符的
消除设置display:inline-block的元素之间的缝隙的方法：
1）、元素标签之间不要换行
如下：span不换行，直接挨着写：
Paste_Image.png
2）、父元素设定font-size:0,将空白字符给去掉，然后子元素再设定font-size大小
Paste_Image.png
六、基线对准问题
vertical-align这个属性，是只对行内元素和表格才有效。
vertical-align:top/middle/bottom，分别实现顶部对齐，中间对齐或底部对齐
Paste_Image.png
七、font字体的设置
1、常见设置：font-size/line-height/font-family/font-weight
（1）综合写法：
font:12px/1.5 arial,'Hiraginp Sans GB','\5b8b\4f53';
2、font-family：字体类型
这是要结合看用户电脑按照的字体文件，支持的话才会展现出来。最好把中文名称的字体都转化为Unicode码，避免无法识别中文的出错：
打开控制台输入：
escape('微软雅黑')，然后把%u转化为\
例如：
宋体 | SimSun | \5B8B\4F53
黑体 | SimHei | \9ED1\4F53
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1
Paste_Image.png
3、行高line-height
比如设定60px,字体大小为30px,那么上下就是15px。等于行高是有加上字体大小一起计算的。
4、谷歌的默认字体大小为16px，最小字体为12px
八、文本
1、常见属性
（1）文本对齐：text-align:left/right/center/justify,记住是用在块级元素上的。
记住：text-align:justify是两端对齐,这个有时候很有用
（2）文本线：text-decoration:line-through/overline/underline/none
记住：text-decoration:line-through用于表示错误给划掉时的用法
（3）英文大小写：text-transform:uppercase/lowercase/capitalize
分别是用于将英文单词全部变为大写、小写和首字母为大写。text-transform:capitalize;应用更多些
（4）改变单词之间的间隔：word-spacing:20px;
（5）改变单词字母之间的间隔：letter-spacing:10px;
Paste_Image.png
2、应用:
行内元素的居中，对其父容器块级元素，设置text-align:center;
如果父容器和子元素都是块级元素，那么设定子元素居中，就是对子元素设置使用margin:0 auto;
3、应用：单行文本溢出的部分写为省略号....
注意是对文本所在标签的父级元素做这三行属性设置才生效。下面例子文本标签a的父标签是p,对其做设置：
.mid{
width:100px;
height:100px;
border:2px solid red;
/*以下三行的设置，行成省略号*/
white-space:nowrap; /*文字不折行*/
overflow:hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/*文字超出部分变为省略号*/
}
Paste_Image.png
注意：对于文本换行：中文和英文是有区别的：元素宽度不够宽时，中文是会自动折行换行的，而英文并不会。设置多出的文字为省略号对中英文通用
Paste_Image.png
九、颜色
1、直接使用颜色单词设置:color:red；
2、十六进制：#fff/#eee/#ccc，#000000,为黑色，重复的6位数，就可以简写为3位，#000为黑色，#fff为白色；
3、rgb:(255,255,255)
4、rgba:rgba(0,0,0,0.5)，最后一个为透明度的设定
十、单位
下面这几个单位记住：
1、px:固定单位
2、em:相对单位
em是相对父元素字体的大小，是父元素字体的倍数。font-size:2em等同于font-size:200%
3、rem:相对单位
rem是相对于根元素（html）字体的大小，是根元素字体大小的倍数。
4、vw:相对单位
1vw为屏幕宽度的1%，50vw就相当于屏幕宽度的一半。兼容性差，不怎么使用
5、vh:相对单位，1vh为一屏幕宽度。
十一、透明度的设定
1、opacity:0
透明度为0，整个元素看不见，但仍然占据位置
2、visibility:hidden
和opacity:0类似
3、display:none
元素消失，不占据位置
4、backgr-color:rgba(0,0,0,0)
设置透明度透明度为0，从0到1，颜色越重，占据位置
十二、边框阴影的设定
1、用法
Paste_Image.png
2、应用
让边框的四边都有阴影的做法，就是让x-offset和y-offset的值都为0，只设置阴影范围值
.box-shadow-2{
-webkit-box-shadow:0 0 10px #0CC;
-moz-box-shadow:0 0 10px #0CC;
box-shadow:0 0 10px #0CC;
}
实现效果：
Paste_Image.png
一篇关于边框阴影的文章：http://blog.csdn.net/freshlover/article/details/7610269
十三、background背景
下面是background的常见常用属性：
1、background-image:url(路径)
2、background-repeat:
选项为repeat/no-repeat
这两个选项为图像重复铺满页面或者不重复。repeat-x，则是水平方向的铺满。repeat-y，则是垂直方向的铺满。
3、background-color:
设置各种颜色
4、background-size
（设置背景的大小，CSS3用法，注意兼容性）
设置百分比、px固定值或者以下两个单词的设置
contain：让图片等比缩放，可以充满屏幕
cover：让图片的高度与屏幕等高，宽度溢出屏幕就不显示
5、background-position
设置背景图像位置，默认是左上角。
设置方式：XY，设置为像素，从左上角开始进行位置移动(0,0)
百分比，移动的距离为其父元素content宽度的百分比
直接单词来定位：[top、center、bottom]、[left、center、right]
background-position:top left，以图片的左上角对其屏幕的左上角
6、background-attachment:fixed
背景图像是否固定，或者随着页面其他内容滚动
7、使用情景
背景图片有镂空，然后也有背景颜色的设置。那么背景颜色就会从背景图片中透出来。
以上属性可以缩写为一行，一次性写多个属性：
background:#fff url(background.gif) no-repeat fixed 0 0;
十四、line-height
1、使用场景：
设置单行文本的行高
2、使用方式：
可以设置为数字，也可以设置为百分比，或是固定宽度
（1）设置为数字
line-height:2:是它本身文字字体大小的两倍。比如一个字体大小是30px，设置行高为60px，那就是除去字体大小的30，还剩下30px是平分字体的上下间隔的，就是上下空白为15px
（2）设置为百分比
line-height:200%：当它是继承而来时，行高是它父元素文字字体大小的两倍。如果是它自身元素设置行高为百分比，那就还是它自身行高的2倍。
Paste_Image.png
在这个例子中，继承而来的line-height:200%，等同于自身元素上设定line-height:40px;
如果父元素没有设定line-height，那么元素自己设定line-height:200%，就是等于设定line-height:2,等于自身高度的2倍，等于line-height：120px
Paste_Image.png
（3）设置为固定宽度
line-height:20px：固定值
3、继承性
line-height是可以继承的，子元素的line-height高度继承父元素的line-height高度
4、应用
通过设定行高和元素高度相同，可以实现文本或子元素的垂直水平居中
当然，也可以把高度设置去掉，也是同样效果。
Paste_Image.png
网友评论