css简介

什么是 CSS?

· CSS 指层叠样式表 (CascadingStyle Sheets)

· 样式定义如何显示 HTML元素

· 样式通常存储在样式表中

· 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

· 外部样式表可以极大提高工作效率

· 外部样式表通常存储在 CSS 文件中

· 多个样式定义可层叠为一

CSS 样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素

样式表定义如何显示 HTML 元素，就像HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

CSS样式定义的优先级顺序总结

层叠优先级是:

外部样式表 < 内部样式表 < 内联样式

 

CSS选择器分类
标签选择器
类选择器
ID选择器
子选择器

后代选择器

伪选择器

分组选择器

 

盒子模型

从图中我们可以看出，这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width

IE盒子模型的盒子宽度：左右margin+width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，

 

 

定位：position

display这个东西属性太多了，block、inline、inline-block，其实也是平时我们说的最多的。

display:block

1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

3.block元素可以设置margin和padding属性。

display:inline

1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

2.inline元素设置width,height属性无效。

3.inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

 

一、普通流
　　除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。

 

二、定位

　１、相对定位
　　被看作普通流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

２、绝对定位
　　相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。
　　绝对定位的框脱离普通流，所以它可以覆盖页面上的其他元素，可以通过设置Ｚ-Iindex属性来控制这些框的堆放次序。

 

CSS3新特性

CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等，