文章目录
简介
**1.css3完全向后兼容 **
2.css3仍然处于开发阶段
3.css3被拆分为“模块”，拆分了旧的模块并添加了新的
目前主要模块有
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
盒模型
应该是css3意义最为重大的模块
曾经在选修的dw课中感受过盒模型出现前的网页，使用表格将页面划分成一个一个区域，那种低效且挤不灵活的页面布局方式简直是一场灾难
标准盒模型
弹性盒模型
弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。
我们可以通过设置display: flex;将普通和模型设置为弹性和模型
弹性和模型的方向
弹性盒模型部分内容以及图片取自阮一峰老师的网络日志详细内容请前往原文处
与标准和模型不同的是，沿着轴的方向排列，我们可以改变项目方向
.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
| 值 | 描述 |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
换行
在默认的情况下，弹性容器只有一行，但为了适应设备，我们可以使其在必要情况下换行
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
默认排列：
允许换行（wrap）：
反序换行（wrap-reverse）：
主轴对齐方式
.flex-container { justify-content: flex-start |flex-end | center|stretch|baseline; }
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
侧轴对齐方式
.flex-container { align-items: flex-start |flex-end | center|stretch|baseline; }
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
元素排序
.flex-container .flex-item { order: <integer>; }
定义元素的顺序，元素会按照order从小到大排序
相对扩展
.flex-container .flex-item { flex-grow: <integer>; }
规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
相对压缩
.flex-container .flex-item { flex-shrink: <integer>; }
规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
选择器
css的基础选择器
/* 基本选择器*/
p{}
/*类选择器*/
.box{}
/*ID选择器*/
#userName{}
/*通配选择器*/
*{}
组合选择器
/*组合选择器-包含选择器*/
/*包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点[所有后代]。*/
#man p{}
/*组合选择器-子选择器*/
/*子选择器以“>”表示，子选择器是指定父元素包含下的子元素[直接后代]。*/
#man>p{}
/*组合选择器-相邻选择器*/
/*相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。*/
#man+#woman{}
/*组合选择器-包含选择器*/
/*兄弟选择器的作用是查找某一个指定元素的后面的[所有]兄弟结点，以“~”表示。*/
h1~p{}
/*组合选择器-分组选择器*/
/*严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法，对多个对象定义相同样式。*/
span,h1,h2,p,b{}
属性选择器
/*组合选择器-属性选择器*/
/*类似正则表达*/
[title]{}
[title="hello"]
[title~="hello"] { }/*仅一个完整的单词 或 空格隔开的一部分完全符合 如[hello world]*/
[lang|="en"] { }/*仅一个完整的单词 或 使用连词符‘-’连接的整体*如[en-ch]/
新的属性选择器
/*css3新增加了三个属性选择器*/
[title^="en"]/*指定[开头]的任意字符串*/
[title$="en"]/*指定[结尾]的任意字符串*/
[title*="en"]/*指定[包含]的任意字符串*/
伪类选择器
/*链接没被访问时*/
.demo a:link{ }
/*链接被访问后*/
.demo a:visited{}
/*鼠标放在链接上*/
.demo a:hover{}
/*鼠标点击时*/
.demo a:active{}
新的伪类选择器（结构性伪类选择器）
结构性伪类选择器是相对于元素的父元素定位，而不是自身
<!--子元素选择器-->
<!--子元素选择器，定位其父元素的子元素，为什么这样强调？请看下面例子-->
<html>
<style>
li:first-child{
color: brown;
/*此处定位到定位点一*/
}
li:last-child{
color: aqua;
/*此处定位到定位点二*/
}
</style>
<body>
<ul>
<li><p>第</p><p>一</p>个孩子</li> <-------定位点一
<!-- 此处五个字全部改变了颜色，证明定位的是li而不是p-->
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li> <------定位点一二
</ul>
</body>
</html>
了解了结构性伪类选择器的特点，下面同理
/*定位第n个子元素*/
/*如果真的写n，会遍历全部，n是一个间隔1的数组，我们可以用它进行计算*/
li:nth-child(n){
}
nth-chile(2n){}
nth-child(even){}/*偶数子元素*/
nth-chile(2n+1){}
nth-child(obb){}/*奇数子元素*/
/*在表格中可能会使用，之前需要js来完成，现在css自己就能完成，不需要不断的修改class*/
/*前后插入内容*/
::before和::after
/*前后插入内容*/
/*否定选择*/
:not(){}
/*选择空元素*/
:empty{}
/*是否可用*/
:enabled和:disabled
/*鼠标选中的文本，默认为蓝底白字*/
::selection
好用的新特性
边框
border-radius：25px//边框圆角
box-shadow: 10px 10px 5px #888888;//边框阴影
border-image:url(border.png) 30 30 round;//图片边框
色彩渐变
渐变最少两个颜色,默认的线性渐变自上而下，径向渐变自内而外
background: linear-gradient(red, blue); /*线性渐变 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 径向渐变 */
方向可以是上下左右，可以是角度
颜色（reba）获得了一个新的参数：透明度
背景
背景大小可调，这是css3的新特性
图片区域可选
可以设置多重背景
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
Word-wrap
当前文本超过行边界时换行
overflow:hidden;/*不显示*/
word-wrap:break-word;/*断开换行*/
overflow:auto;/*滚动条*/
text-overflow
文本越界,有“clip”和“ellipsis”两种属性可供选择
前者等同overflow:hidden,后者会在末尾以省略号代替
多列布局
.multi_column_style{
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
}
一些比较复杂可能需要借助类库的功能
更深层次的文字渲染（阴影、反射、透明、模糊）
2d/3d变换/过渡效果/动画
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
