CSS高效开发实战

@(StuRep)

通过条件注释加载不同的CSS

除IE外都可识别所有的IE可识别仅IE6可识别IE6及以下版本可识别IE6以及IE6以上版本可识别

_

条件注释的控制符

_

常用的属性前缀

1. -webkit:webkit核心浏览器，包括Chrome、Safari等。

2. -moz:火狐(FIrefox)浏览器

3. -ms:IE浏览器

4. -o:Opera浏览器

在实际的开发过程中，对于大多数css3效果来说，考虑到兼容性，往往需要把所有的前缀属性都写上去，譬如这样：

.transform {    -webkit-transform:rotate(-3deg);    -moz-transform:rotate(-3deg);    -ms-transform:rotate(-3deg);    -o-transform:rotate(-3deg);    transform:rotate(-3deg);//把标准属性放在最后写}

_

float

1. 对于块级元素来说，在不设置宽度的情况下，默认的宽度是100%，一旦设置了浮动，它的宽度就会根据内容进行自动调整。

2. 设置了浮动的元素会脱离正常的文档流，我们可以这样理解：设置浮动后，元素不仅在y轴上浮了起来，在z轴上，也浮了起来。譬如：在默认情况下，父元素的高度会根据子元素的内容进行调整，而如果我们将子元素设置为浮动，父元素的高度就会变为0。

3. 虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。
   _

清除浮动

清除浮动主要应用的是css中的clear属性，clear属性定义了元素的哪一侧不允许出现浮动元素。可选项有left、right、both。
_

CSS定位技术

CSS使用position选项来定义元素的定位属性，该选项有5个可选值：static、relative、absolute、fixed、inherit，默认值为static。

1. static：如果使用默认值，在CSS中为元素定义top、left、right、bottom、z-index都不会生效。

2. relative：relative的表现和static一样，只不过可以通过设置偏移量和z-index来控制相对于其正常位置进行的偏移。

3. absolute：absolute是相对上一个不为static的父元素进行绝对定位。换句话说，如果不指定父元素的position，absolute将相对于整个html文档进行绝对定位。只有指定了container的position(非static)，子元素才能相对于父元素进行绝对定位。

4. fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。也就是说，不论网页如何滚动，该元素始终停留在屏幕的某个位置上。

绝对定位元素有以下几个特点：

1. 块级元素的宽度在未定义时不再为100%，而是根据其内容自动调整。

2. 在不定义z-index的情况下，absolute元素会覆盖在其他元素之上。

3. 它会脱离正常的文档流，不再占据空间，类似于浮动后的效果。

absolute和fixed都属于绝对定位的范畴。

__

CSS选择器

1. 子元素选择器：">"符号，">"左边是父元素，右边是子元素。如果两个元素不是严格的“父子关系”，则使用子元素选择器的定义不会生效。例如：

1. test1. test//cssli>a{    color:blue;}

1. 后代元素选择器：一个空格。后代包括子辈、孙子辈等，不同于子代选择器。例如：

1. test1. test//cssli a{    color:blue;}

1. 相邻元素选择器：“+”，用于选取和某个元素相邻的同级元素。相邻元素选择器的使用有两个条件：

二者必须拥有同一个父元素

1. 二者相邻

2. 属性选择器：属性选择器的语法是用一对中括号“[]”，例如[title]、a[href][title]

3. 组选择器：如果要对多个元素定义同样的样式，则可以用组选择器来缩减重复代码。组选择器的语法关键字是一个“,”

4. :nth-child(n)：选择器中的n表示一个简单的表达式，它可以是大于等于0的整数，比如在基础样例中应用：

li:nth-child(2){    background-color:# 333;    color:white;}//n取2，就是取某个父元素内第二个li元素，即需要同时满足两个条件：1.是不是第2个//2.是不是li元素

1. :nth-last-child(n)：和nth-child(n)相反

2. :nth-of-type(n)：这个选择器和:nth-child(n)类似，区别在于，如果使用p:nth-child(3)这样的条件时，一旦第3个元素不为元素，这个选择器就不起作用，而p:nth-of-type(3)则查询的是第3个元素。

3. :nth-last-of-type：和上一个相反

4. :last-child：选择的是元素的最后一个子元素

5. :first-of-type和:last-of-type：:first-of-type相当于:nth-of-type(1)，:last-of-type相当于:nth-last-of-type(1)

6. :only-child：如果一个父元素只有一个子元素，那么选取这个子元素。如果加了限定条件，例如p:only-child则取交集，即如果一个父元素只有一个子元素，且这个子元素为，这个选择器才会生效。

7. :only-of-type：基本同:only-child，区别在于如果不指定type而直接使用:only-of-type的话会造成body被选中，而:only-child不会出现这种情况。
   _

媒介查询

Media Type的类型汇总

_

认识响应式网页设计

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定版本。
_

媒介查询的基本语法

可以将Media Query看成是添加了CSS属性判断的Media Type，其基本语法如下：

@media screen and(max-width:600px){    .class{        background:# ccc;    }}

关键字：css

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！