CSS学习笔记

感觉自己的前端跟完全没有学过一样，这次要做一个小程序开发，前端页面卡的我痛不欲生呀，干脆重新学一下css，免的以后又要一次次的回炉重造！

1、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2、CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：h p div

内联元素只需要必要的宽度，不强制换行。
内联元素的例子： span a

3、CSS Positioning(定位)
position 属性指定了元素的定位类型。
position 属性的四个值：
static
relative
fixed
absolute

Static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。

Relative 定位
相对定位元素经常被用来作为绝对定位元素的容器块。
①相对于自身原有位置进行偏移
②仍处于标准文档流中
③随即拥有偏移属性和z-index属性，偏移属性（top left right bottom 相对于自身进行偏移，会覆盖其他内容进行偏移）和z-Index属性（空间的层堆叠z轴的堆叠，没有的话是默认存在y和x轴的一个平面上）

Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动（做固定的广告定位）

Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 html ，脱离了标准文档流（会被其他元素覆盖）
情况1：未设置偏移量
特点：a.无论是否存在已定位的祖先元素，都保持在元素初始位置；
b.脱离了文档标准流.
注：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度随着内容进行调节，这跟设置的float属性相似。
情况2：设置了偏移量
偏移参照标准：
a.无已定位祖先元素，以html（即浏览器）为偏移参照基准；(而不是参照body进行偏移的)
b.有已定位祖先元素，以离它最近的已定位祖先元素为偏移参照基准;（一般设置其祖先元素为相对定位，因为与绝对定位相比更稳定）

css中存在3种的定位机制：
标准文档流
(从上到下，从左到右，由块级元素和行级元素组成
常见的行级标签：span、strong、img、input
块级标签有：div、ul、li、dl、dt、p )
浮动
绝对定位

4、CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。可以指定左右或者上下浮动。
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

5、布局

单列布局重要的是居中的实现：margin：0 auto （0代表上下，auto代表左右）

两列布局一般靠浮动来实现：
.left{width: 20%; height: 500px; background: red; float: left;}
.right{width: 80%; height: 500px; background: blue; float: right;}

三列布局的特殊例子：左右固定像素值，中间自适应宽度。【不能再使用浮动，得设置位置：固定】
如：
.left{wight:200px;height:500px;backgroud:gray;position:absolute;left:0;top:0} //绝对定位，停靠在浏览器左侧
.middle{height:500px;backgroud:#999;margin:0 300px 0 200px}
//设置外边距
.right{wight:300px;height:500px;backgroud:blue;position:absolute;right:0;top:0} //绝对定位，停靠在浏览器右侧

网页布局其实就是块与块之间的关系：
紧挨、嵌套、叠加
紧挨：float
嵌套：父子关系
叠加：z-index。

一列用margin：0 auto；
二列用float：left；
三列用：左右用position：absolute；left:0;中间用margin：0 300 200；别忘记同高