CSS技术概要总结

CSS的背景知识

为什么需要css技术？

咱们需要看看css是处在一个什么样的技术位置，web的html页面需要浏览器进行访问，而浏览器又是运行在操作系统上的，操作系统又是运行在不同的硬件设备上的，所以css的技术需要一些基础背景知识：硬件设备、操作系统、浏览器、html、js。

为什么需要把角度上升到硬件设备这一层呢？因为手机和显示器的硬件分辨率不一样，会存在尺寸兼容问题，所以界面上展示的尺寸单位是有区别的，同样的px，不同的PPI显示效果不一样。另外不同设备运行的操作系统不一样，能使用的浏览器也不一样，比如window的IE，苹果的safari、安卓的chrome等。不同的浏览器支持的css特性也是有区别的，特别是最新的css3标准。

CSS在这个技术系统中的位置，就是在浏览器中用来对html的内容进行展示美化作用，让HTML内容结构和页面展示效果进行分离。

css和html的关系，就像房屋装修一样，房屋的每一个墙面就是一个浏览器页面，我们就拿电视墙来做比喻，html就是墙上需要展示的内容（电视机、背景墙、装饰灯等），css就是设计师的设计方案，电视机的居中位置、背景墙的颜色和大小、装饰灯的效果等。

css设计的初衷是解决web1.0时代的图片和文字展示，所以一切的技术方案都是从这里出发。后面随着互联网的发展，web内容不再是只有图片和文字，还有更多的比如视频、游戏、移动端、多屏幕尺寸等需求，才推出了HTML5体系。HTML5体系=HTML5+CSS3+JS，三部分技术内容。暂时先不讨论css3的新特性，还是首要弄清楚css2.1时代的内容。

CSS2.1技术内容

盒子模型

html在浏览器中展示给用户，首先css需要确定html的内容用什么样的形式来展示？css将html的标签定义成了一个盒子模型，就像快递的包裹盒子一样，标签的内容就是快递的商品，然后用一个盒子来打包商品，商品与盒子之间有一个缓冲区间，而打包的盒子是由具有厚度的纸板组成，最后打包好的包裹堆放在一起的时候，包裹与包裹之间有一个间距。对应起来css的概念就是商品content、缓冲区padding、纸箱的纸板border、包裹间距margin。多个包裹可以打包成一个大包裹，所以盒子模型是可以嵌套的。

技术点：盒子尺寸、盒子类型（inline、block、inline-block、none）、背景颜色、背景图片、margin合并问题、100%和auto不一样、滚动条。

最佳实践：
父子节点用padding、兄弟节点用margin；
尽量不要设置100%，默认auto；
block元素才能设置尺寸大小，inline的无法设置；
盒子类型决定盒子的展示布局，慎用inline-block，默认盒子间有空白，需要配合浮动使用。

文档流

盒子该如何进行摆放呢？
有了盒子模型的概念，那么html就是最大的一个盒子，其他内容都是嵌套在它里面的。还是回到刚刚提到的电视墙概念，盒子的摆放顺序是从左到右、从上到下，这个顺序就称为文档流。

定位（position）

当然文档流的顺序无法满足很多实际场景需要，才补充了脱离文档流的方案，浮动、绝对定位、相对定位。

浮动（float），类似水流一样，具有流动的方向，盒子在水流上，就会跟着水流方向流动，碰到同向上其他盒子才停止。

绝对定位，直接根据坐标进行定位。
（absolute）根据父节点为坐标系；
（fixed）根据浏览器窗口为坐标系。

相对定位（relative），是相对于节点本身原有位置，进行坐标定位。

技术点：文档流顺序、浮动、绝对定位、高度坍塌、浮动副作用、层级遮挡。
最佳实践：
浮动需要注意高度坍塌和清除浮动，两种方式，父节点的伪元素和末尾节点的clear；脱离文档流后就存在层级遮挡问题，需要设置z-index。

伪元素

html已经存在的元素之外，还可以通过css来定义伪元素。类似于servlet中的拦截器，在处理请求的前后添加额外的业务逻辑。

常用伪元素：
：first-letter、：first-line、：before、：after、：hover

超链接：
：hover、：link、：visited、：avtive

最佳实践：利用hover等伪元素，可以让CSS实现js的效果。

图文相关

css设计之初就是针对图文进行美化，所以图片和文字有很多特定属性。
常用的图片尺寸、字体大小、字体类型。
字体大小还涉及到硬件设备，绝对的px，相对的em、rem。
图片还涉及到性能优化，用数据来替换图片等技术。

选择器

CSS技术就是给盒子设置不同的属性值，来对盒子进行美化。
那么怎么选择指定的“盒子们”呢？
就需要CSS提供的多种盒子选择器了。

常用选择器：
html标签选择器、类选择器、id选择器、属性选择器、后代选择器、子元素选择器。

最佳实践：选择器的合理使用，可以减少class定义数量，并且进行批量处理。

CSS3

新增了动画、阴影、圆角等。

关键属性

display：none/block/inline/inline-block
width、height、min/max-width、min/max-height：auto/100%/10px
padding、border、margin
float：left、right
position：fixed、relative、absolute
clip、overflow、z-index、cursor、opacity：透明度

ul,li,p,div,span {
    margin:0px;
    padding:0px;            
}

.clearfix:after {
    content: '\200B';
    clear: both;
    display: block;
    height: 0;
}
.clearboth {clear:both;}

li {
    list-style: none;
    background-color: beige;
}

a:link,a:visited,a:hover,a:active {
    color: #000;
}