摘要：选择器子元素选择器符号，左边是父元素，右边是子元素。如果两个元素不是严格的父子关系，则使用子元素选择器的定义不会生效。
CSS高效开发实战
@(StuRep)
通过条件注释加载不同的CSS除IE外都可识别
_
条件注释的控制符| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [if !IE] | “非”运算符 |
| lt | [if lt IE 5.5] | 小于运算符 |
| lte | [if lte IE 6] | 小于等于运算符 |
| gt | [if gt IE 6] | 大于运算符 |
| gte | [if gte IE 6] | 大于等于运算符 |
| () | [if (lte IE 6)] | 用于子表达式，以配合布尔运算符 |
| & | [if (lte IE 9)&(gt IE 6)] | AND运算符 |
| [if (gt IE 6)](!IE) | OR运算符 |
_
常用的属性前缀-webkit:webkit核心浏览器，包括Chrome、Safari等。
-moz:火狐(FIrefox)浏览器
-ms:IE浏览器
-o:Opera浏览器
在实际的开发过程中，对于大多数css3效果来说，考虑到兼容性，往往需要把所有的前缀属性都写上去，譬如这样：
.transform {
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);//把标准属性放在最后写
}
_
float对于块级元素来说，在不设置宽度的情况下，默认的宽度是100%，一旦设置了浮动，它的宽度就会根据内容进行自动调整。
设置了浮动的元素会脱离正常的文档流，我们可以这样理解：设置浮动后，元素不仅在y轴上浮了起来，在z轴上，也浮了起来。譬如：在默认情况下，父元素的高度会根据子元素的内容进行调整，而如果我们将子元素设置为浮动，父元素的高度就会变为0。
虽然浮动的元素脱离了文档流，但是里面的内容仍然占据空间，会根据相对位置进行布局。
_
清除浮动清除浮动主要应用的是css中的clear属性，clear属性定义了元素的哪一侧不允许出现浮动元素。可选项有left、right、both。
_
CSS使用position选项来定义元素的定位属性，该选项有5个可选值：static、relative、absolute、fixed、inherit，默认值为static。
static：如果使用默认值，在CSS中为元素定义top、left、right、bottom、z-index都不会生效。
relative：relative的表现和static一样，只不过可以通过设置偏移量和z-index来控制相对于其正常位置进行的偏移。
absolute：absolute是相对上一个不为static的父元素进行绝对定位。换句话说，如果不指定父元素的position，absolute将相对于整个html文档进行绝对定位。只有指定了container的position(非static)，子元素才能相对于父元素进行绝对定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。也就是说，不论网页如何滚动，该元素始终停留在屏幕的某个位置上。
块级元素的宽度在未定义时不再为100%，而是根据其内容自动调整。
在不定义z-index的情况下，absolute元素会覆盖在其他元素之上。
它会脱离正常的文档流，不再占据空间，类似于浮动后的效果。
absolute和fixed都属于绝对定位的范畴。
__
CSS选择器子元素选择器：">"符号，">"左边是父元素，右边是子元素。如果两个元素不是严格的“父子关系”，则使用子元素选择器的定义不会生效。例如：
后代元素选择器：一个空格。后代包括子辈、孙子辈等，不同于子代选择器。例如：
相邻元素选择器：“+”，用于选取和某个元素相邻的同级元素。相邻元素选择器的使用有两个条件：
二者必须拥有同一个父元素
二者相邻
属性选择器：属性选择器的语法是用一对中括号“[]”，例如[title]、a[href][title]
组选择器：如果要对多个元素定义同样的样式，则可以用组选择器来缩减重复代码。组选择器的语法关键字是一个“,”
:nth-child(n)：选择器中的n表示一个简单的表达式，它可以是大于等于0的整数，比如在基础样例中应用：
li:nth-child(2){
background-color:#333;
color:white;
}
//n取2，就是取某个父元素内第二个li元素，即需要同时满足两个条件：1.是不是第2个
//2.是不是li元素
:nth-last-child(n)：和nth-child(n)相反
:nth-of-type(n)：这个选择器和:nth-child(n)类似，区别在于，如果使用p:nth-child(3)这样的条件时，一旦第3个元素不为
元素，这个选择器就不起作用，而p:nth-of-type(3)则查询的是第3个
元素。
:nth-last-of-type：和上一个相反
:last-child：选择的是元素的最后一个子元素
:first-of-type和:last-of-type：:first-of-type相当于:nth-of-type(1)，:last-of-type相当于:nth-last-of-type(1)
:only-child：如果一个父元素只有一个子元素，那么选取这个子元素。如果加了限定条件，例如p:only-child则取交集，即如果一个父元素只有一个子元素，且这个子元素为
，这个选择器才会生效。
:only-of-type：基本同:only-child，区别在于如果不指定type而直接使用:only-of-type的话会造成body被选中，而:only-child不会出现这种情况。
_
媒介查询Media Type的类型汇总
| 设备 | 指代 |
|---|---|
| all | 匹配所有设备 |
| braille | 匹配触觉反馈设备 |
| embossed | 凸点字符印刷设备 |
| handheld | 手持设备 |
| 打印机设备 | |
| projection | 投影仪设备 |
| screen | 彩色计算机显示器设备 |
| speech | 语音合成器设备 |
| tty | 栅格设备 |
| tv | 电视设备 |
_
认识响应式网页设计响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定版本。
_
可以将Media Query看成是添加了CSS属性判断的Media Type，其基本语法如下：
@media screen and(max-width:600px){
.class{
background:#ccc;
}
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111320.html
摘要：有些人想学，不知如何下手有些人已经学会的各种属性，却不知如何运用有些人会平面设计，不知道如何与网页设计结合有些人会，就是学不会。 有些人想学CSS，不知如何下手；有些人已经学会CSS的各种属性，却不知如何运用；有些人会平面设计，不知道如何与网页设计结合；有些人会HTML，就是学不会CSS。试问自己，图中的技术你都会了吗？ showImg(https://segmentfault.co...
摘要：写在前面目前专注深入学习，特花了点时间整理了一些前端学习相关的书籍。大致分为以下大系列系列系列基础系列应用系列进阶系列类库系列框架系列。这些书籍在这里免费提供下载，有兴趣的一起学习。 写在前面 目前专注深入JavaScript学习，特花了点时间整理了一些前端学习相关的书籍。 大致分为以下7大系列：CSS系列、DOM系列、JavaScript基础系列、JavaScript应用系列、Ja...
阅读 985·2021-09-26 10:15
阅读 2063·2021-09-24 10:37
阅读 2579·2019-08-30 13:46
阅读 2630·2019-08-30 11:16
阅读 2419·2019-08-29 10:56
阅读 2590·2019-08-26 12:24
阅读 3471·2019-08-23 18:26
阅读 2660·2019-08-23 15:43
