css

学习总结：

1.框模型

css框模型介绍：

2.定位/浮动：

position 定位把一个元素放在静态的相对的绝对的固定的位置

fixed

固定定位 相对于窗口脱离了文档流

static

静态定位 正常文档流中位置

absolute

相对于最后一个被定位的(非stastic)祖先元素的位置，脱离了文档流

relative

相对于正常位置的定位，保留原来的位置，元素框偏移原来的位置

浮动:当设置一个元素浮动时，他就脱离了正常文档流，会浮动到父级元素的边缘或者其他元素的边缘，如果空间不够就会下降寻找足够的空间，浮动一般伴随着清除，清除使得元素的周围没有任何浮动元素

3.选择器

元素选择器  文档中的元素就是最基本的选择器.class1{}

选择器分组  有相同属性的两个选择器，可以用逗号在中间分开，告诉浏览器是不同的选择器

类选择器   对元素设置类名后，可以单独使用也可以和其他元素一起  p,body,img,div{}

id选择器  根据元素的id设置#myDiv{}

属性选择器  根据元素属性来进行设置p[title]{color:#f00;}

后代选择器  可以作为某元素后代的元素，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素” 可以找到所有的em元素bodyulli{}

子类选择器  只能选作为某元素子元素的元素子选择器使用了大于号（子结合符) div>p{}

兄弟选择器   p + p {};

伪元素选择器  伪元素选择器E:first-line，E:before

伪类选择器 伪类选择器 E:first-child，E:visited，E:focus，E:enabled

标签选择器  标签选择器p{font-size:1em;}

后代选择器和子选择器的区别

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。

4.导入

链接式：

link就是把外部CSS与网页连接起来，将其加在头部标签中，具体形式如下：

导入样式：

通过两个或以上的css文件共同部分，在css页面引入css文件，通过@import url（” “）

@importurl("global.css”)

@importurl(global.css);

@import"global.css";

以上三种方式都有效

区别：

1）link属于XHTML标签，而@import是CSS提供的;2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;3）@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;4）link方式的样式的权重 高于@import的权重.

5.元素

长度单位;

em 相对长度单位 1em=16px;

in 英寸 绝对长度单位1in=2.54cm =25.4mm =72pt =6pc =96px

point  绝对长度单位

角度单位：

deg度（Degress）。一个圆共360度90deg =100grad =0.25turngrab梯度（Gradians）。一个圆共400梯度

turn转、圈（Turns）。一个圆共1圈

rad 弧度（Radians）。一个圆共2π弧度