css3
1.css简介
1.1 什么是css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML，是为了解决内容与表现分离的问题
- 多个样式定义可层叠为一个
1.2 网页中使用css的优势
- 内容与表现分离
- 网页的表现统一，容易修改
- 丰富的样式，使得页面布局更加灵活
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽
- 运用独立于页面的CSS，有利于网页被搜索引擎收录
PS: 带领学生安装google chrome的 web developer tool 开发工具，开启/禁用页面css查看不同的显示效果
1.3 css的语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
p {
/*设置字体颜色为红色*/
color:red;
text-align:center;
}
2.css的创建方式
css样式表的创建方法有三种:
- 内联样式(Inline style)
- 内部样式表(Internal style sheet)
- 外部样式表(External style sheet)
2.1 内联样式
将样式（style）属性使用与相关的标签内的样式，称为内联样式。
<p style="color:red;text-align:center">这是一个段落。</p>
PS: 这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。
2.2 内部样式表
CSS代码写在的
- 优点: 方便在同页面中修改样式
- 缺点: 不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
<head>
<style type="tesxt/css">
p {
color:red;
text-align:center;
}
</style>
</head>
2.3 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
2.3.1外部样式表的分类
开发版：具有缩进效果的样式表，用于开发阶段，便于样式表的维护。
p {
color:red;
text-align:center;
}
h2{
font-size:18px;
}
线上版：没有缩进效果的样式表，减少存储容量，便于提高线上加载效率。
p {color:red;text-align:center;}
h2 {font-size:18px;}
PS: 讲解css等相关线上代码压缩工具
导入外部样式表:
<head>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
2.3.2 链接式与导入式的区别
- 标签属于XHTML，@import是属于CSS2.1
- 使用链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
2.4 CSS样式优先级
就近原则：行内样式>内部样式表>外部样式表
PS: 现场进行优先级的演示，同时在三种方式中设置字体的颜色，观察最终的效果。
3.基础选择器
- 标签选择器
- 类选择器
- ID选择器
3.1 标签选择器
HTML标签作为标签选择器的名称
p {
color:red;
text-align:center;
}
使用标签选择器后，页面中所有的官员该标签内的内容都将使用其设置的样式。
3.2 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“home”:
#home{
text-align:center;
color:red;
}
ID选择器名称在同一个页面中只能使用一次, 不要以数字开头。
3.3 class 类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {
text-align:center;
}
3.4 基本选择器的优先级
无论是哪种方式引入CSS样式，一般都遵循的优先级： ID选择器 > class类选择器 > 标签选择器
!important会破坏这个规则。
4.背景: backgroud
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color
- background-image
- background-repeat
- background-position
4.1 背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
body {background-color:#b0c4de;}
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”
4.2 背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:
body {background-image:url('images/paper.gif');}
4.2.1 背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
body {
background-image:url('images/gradient2.png');
}
如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
body {
background-image:url('images/gradient2.png');
background-repeat:repeat-x;
}
4.2.3 背景图像- 设置定位与不平铺
如果不想让图像平铺，你可以使用 background-repeat 属性:
body {
background-image:url('images/img_tree.png');
background-repeat:no-repeat;
}
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置:
body {
background-image:url('images/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
4.3 背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中
body {
background:#ffffff url('images/img_tree.png') no-repeat right top;
}
当使用简写属性时，属性值的顺序为：
-
background-color
-
background-image
-
background-repeat
-
background-position
5.文本
5.1文本颜色
颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
body {
color:red;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
5.2 文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或左、右对齐，两端对齐。
h1 {text-align:center;}
h2 {text-align:right;}
p {text-align:justify;}
5.3 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}
也可以这样装饰文字：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
5.4 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
.uppercase {text-transform:uppercase;}
.lowercase {text-transform:lowercase;}
.capitalize {text-transform:capitalize;}
5.5 文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}
6.字体
6.1 字体系列
font-family 属性设置文本的字体系列(字体类型)。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明：
p {
font-family:"Times New Roman", Times, serif;
}
6.2 字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
.normal {font-style:normal;}
.italic {font-style:italic;}
.oblique {font-style:oblique;}
6.3 字体大小
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。
但是，不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
（人话：标题的字体大小必须比相对应的正文字体要大）
请务必使用正确的HTML标签，就
-
表示标题和
表示段落。
字体大小的值可以是绝对或相对的大小。
绝对大小px：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小em/rem：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
css中字体单位常用的有px、em、rem：
-
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
-
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
-
em是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。
-
em相对于父元素，rem相对于根元素。
使用em设置字体时推荐的设置：
body {font-size:100%;}
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
使用rem设置字体时推荐的设置：
html {font-size: 10px;}
h1 {font-size:4rem;}
h2 {font-size:3rem;}
p {font-size:1.4rem;}
6.4 字体粗细
.normal {font-weight:normal;}
.light {font-weight:lighter;}
.bold {font-weight:bold;}
.bolder {font-weight:bolder;}
.bold900 {font-weight:900;} /*取值100-900*/
6.5 使用父属性进行字体的设置
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p {font:italic bold 12px "楷体";}
7.链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
以上设置的顺序必须一致。
8.列表ul
- list-style-type
- list-style-image
- list-style-position
- list-style
PS:
网页中用到列表时很少使用CSS自带的列表标记，而是使用设计的图标.
那么大家会想使用list-style-image就可以了。可是list-style-position不能准确地定位图像标记的位置.
在实际的网页制作中，通常使用list-style或list-style-type设置项目无标记符号.
然后通过背景图像的方式把设计的图标设置成列表项标记。
点击打开演示案例
9.盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
一个包含在盒子里的元素的真实的宽高的计算公式：
-
总元素的宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距
-
总元素的高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
div {
width: 300px;
height: 200px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
PS: 计算上述盒子的实际的宽高。
9.1 边框
CSS边框属性允许指定一个元素边框的样式和颜色。
9.1.1 边框样式
边框样式属性指定要显示什么样的边框效果。
border-style 值:
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
9.1.2 边框宽度
通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
.one {
border-style:solid;
border-width:5px;
}
.two {
border-style:solid;
border-width:medium;
}
.three {
border-style:solid;
border-width:1px 2px 3px 4px;
}
单独设置各边框值时的设置方向：
border-width:1px 2px 3px 4px;
border-width:1px 2px; /*上下为1Px, 左右为2px*/
border-width:1px 2px 4px;/*上为1px, 左右为2px, 下为4px */
9.1.3 边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent" 透明。
.one {
border-style:solid;
border-color:red;
}
.two {
border-style:solid;
border-color:#98bf21;
}
可以指定不同的侧面不同的边框：
p {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
9.1.4 边框-简写属性
上面的例子用了很多属性来设置边框。
也可以在一个border属性中设置边框。
可以在border属性中设置：
- border-width
- border-style (这个必填)
- border-color
border:5px solid red;
9.1.5 margin外边距
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin:25px 50px 75px 100px;/*一次设置4个区域*/
margin:25px 50px 75px;
margin:25px 50px;
margin:25px;
9.1.6 内边距padding
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
使用方法同外边距
PS: 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充影响。
padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
padding:25px 50px 75px 100px;/*一次设置4个区域*/
padding:25px 50px 75px;
padding:25px 50px;
padding:25px;
9.1.7 box-sizing
box-sizing：content-box | border-box | inherit;
content-box:默认值，盒子的总尺度
border-box: 盒子的宽度或高度等于元素内容的宽度或高度
PS: 讲解box-sizing的实用场合。
10.高级选择器
10.1 分组
在样式表中有很多具有相同样式的元素。
h1 {color:green;}
h2 {color:green;}
p {color:green;}
为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔:
h1,h2,p {color:green;}
10.2 嵌套
嵌套选择器适用于选择器内部的选择器的样式，目的是对目标元素的选择做出更细致的定位，同时减少css代码的编写。
在下面的例子设置了三个样式：
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
- .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
p {color:blue;text-align:center;}
.marked {background-color:red;}
.marked p {color:white;}
p.marked {text-decoration:underline;}
10.3 组合
组合选择器说明了两个选择器直接的关系，目的也是对目标元素的选择做出更细致的定位，同时减少css代码的编写。
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格
分隔) - 子元素选择器(以大于 > 号分隔）
- 相邻兄弟选择器（一个）（以加号 + 分隔）
- 后续兄弟选择器（多个）（以波浪号 ～ 分隔）
10.3.1 后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取
元素:
div p{
background-color:yellow;
}
10.3.2 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了
：
div>p {
background-color:yellow;
}
10.3.3 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在该元素后的一个元素，且二者有相同父元素。
以下实例选取了所有位于
元素:
div+p {
background-color:yellow;
}
10.3.4 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的所有的相邻兄弟元素。
以下实例选取了所有
:
div~p { background-color:yellow; }
10.4 伪类
css 可以使用伪类来选取一些特殊状态下的元素：
selector:pseudo-class {property:value;}
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not§ | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个 元素的第一个字母 |
| :first-line | p:first-line | 选择每个 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 元素 |
| :before | p:before | 在每个 元素之前插入内容 |
| :after | p:after | 在每个 元素之后插入内容 |
| :lang(language) | p:lang(it) | 为 元素的lang属性选择一个开始值 |
11.显示/隐藏
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
11.1 隐藏元素
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
- display:none 元素不再占用空间。
- visibility: hidden 使元素在网页上不可见，但仍占用空间。
11.2 显示元素
- display:block;
- visibility:visible;
11.3 块和内联元素的转换
display:block; /*显示为块元素*/
display:inline; /*显示为内联元素*/
display:inline-block; /*显示为内联块元素*/
12.定位position
使用position 属性可以指定元素的定位类型，然后进行元素的定位操作。
position 属性的五个值：
-
元素可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。然而，这些属性无法工作，除非是先设定position属性。
12.1 static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
div.static {
position: static;
border: 3px solid #73AD21;
top:100px; /*无效*/
right:200px;/*无效*/
}
12.2 fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
12.3 relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_right
{
position:relative;
left:20px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
12.4 absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它相对于进行定位：
h2 {
position:absolute;
left:100px;
top:150px;
}
PS: 如何实现关闭按钮在当前父容器的右上角绝对定位？
思路：
- 父容器设置相对/固定定位。
- 关闭按钮设为绝对定位，并设置位置为右上角。
13.溢出overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
PS: overflow 属性只工作于指定高度的块元素上。
使用不同的取值，演示其具体的效果。
14.浮动float
设置元素的浮动属性，会让元素脱离文档流，类似与漂浮与文档流的上方，元素同时失去块状标记的特性。
其周围的元素的位置会重新排列，且会对父容器整体的高度产生影响（父级边框塌陷）。
float的取值:
- left 当前元素会漂浮与父容器的左上方
- right 当前元素会漂浮与父容器的右上方
PS: 如何消除因元素浮动，对其他元素位置与父容器整体的高度产生的影响？
-
使用clear清除浮动，解决周围的元素的位置会重新排列
clear取值：left、right、both
-
解决对父容器整体的高度产生的影响-4种方法
-
浮动元素后面加空div
<div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> <div class="clear"></div> </div> .clear{ clear: both; margin: 0; padding: 0;} -
设置父元素的高度
<div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> #father {height: 400px; border:1px #000 solid; } -
父级添加overflow属性
<div id="father"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> #father {overflow: hidden;border:1px #000 solid; } -
父级添加伪类after
<div id="father" class="clear"> <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div> <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div> <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div> <div class="layer04">浮动的盒子……</div> </div> .clear:after{ content: ''; /*在clear类后面添加内容为空*/ display: block; /*把添加的内容转化为块元素*/ clear: both; /*清除这个元素两边的浮动*/ }
清除浮动，防止父级边框塌陷的四种方法:
- 浮动元素后面加空div
简单，空div会造成HTML代码冗余 - 设置父元素的高度
简单，元素固定高会降低扩展性 - 父级添加overflow属性
简单，下拉列表框的场景不能用 - 父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用
-
15.常见样式设计:导航栏、 下拉菜单布局
15.1 导航栏设计
导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。
导航条基本上是一个链接列表，所以使用
- 和
- 元素非常有意义：
<nav>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</nav>
ul {
/*从列表中删除默认样式边距和填充*/
list-style-type: none;
margin: 0;
padding: 0;
}
PS: 带领学生一步步实现最终的效果。
16.圆角边框
使用 CSS3 border-radius 属性，可以给任何元素制作 “圆角”。
- 指定背景颜色的元素圆角：
<p id="rcorners1">圆角</p>
#rcorners1 {
border-radius: 25px;
background: red;
padding: 20px;
width: 200px;
height: 150px;
}
-
指定边框的元素圆角:
<p id="rcorners2">圆角</p> #rcorners2 { border-radius: 25px; border: 2px solid red; padding: 20px; width: 200px; height: 150px; } -
指定背景图片的元素圆角:
<p id="rcorners3">圆角</p>
#rcorners3 {
border-radius: 25px;
background: url(/images/paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
border-radius - 指定每个圆角:
如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
17.盒子阴影
使用box-shadow 属性设置盒子阴影：
div {
width:300px;
height:100px;
background-color:#666;
box-shadow: 10px 10px 5px #888888;
}
18.渐变
CSS3 渐变（gradients）可以让两个或多个指定的颜色之间显示平稳的过渡。
以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
18.1 线性渐变
线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：
<div id="grad1"></div>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, red , yellow);
}
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
18.2 径向渐变
径向渐变（Radial Gradients）- 由它们的中心定义：
<div id="grad1"></div>
#grad1 {
height: 200px;
width: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: radial-gradient(red, yellow, grey); /* 标准的语法（必须放在最后） */
}
19.flex布局
2009,w3c提出的新的布局方案。目的是解决传统页面布局的痛点。
传统布局：div+css,float, position,top,left,right,bottom
ie10+, firefox22+,chrome21+
flexible box, 弹性布局, 区别与响应式布局(Bootstrap)
19.1 flex容器
采用flex布局的元素(块状元素或内联元素), 称为flex容器，简称容器。
容器有两根轴：x轴(水平方向)、y轴(垂直方向)，默认沿x轴进行布局。
容器的属性有：
- flex-derection
- flex-wrap
- flex-flow
- justify-content
- align-content
- align-items
19.2 flex-derection
设置主轴方向，默认为x轴，行，水平方向
flex-derection:row; /*x轴*/
flex-derection:column; /*y轴、列，垂直方向*/
19.3 flex-wrap
flex-wrap:nowrap;
默认不换行：所有子元素在一行显示，当显示不了时，所有子元素的宽度会自动压缩，以保证都在一行显示。
flex-wrap:wrap;
换行：当前行不够子元素显示时，剩余的子元素自动到下一行显示。
19.4 justify-content
设置主轴(水平/或垂直-单行)方向上的元素的对齐方式：
- flex-start
- flex-end
- center
- space-around
- spance-between
左对齐：flex-start
右对齐：flex-end
环绕对齐：space-around
两端对齐：space-between
19.5 align-content
- flex-start
- flex-end
- center
- space-around
- spance-between
- stretch
作用:
会设置自由盒内部各个项目在垂直方向排列方式。
条件:
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
设置对象:
这个属性是对容器内部的项目起作用，对父元素进行设置。
19.6 align-items
设置单行垂直（y轴）方向上的布局
-
flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
-
flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
-
center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
-
baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
-
stretch：
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
19.6 flex-grow
设置或检索弹性盒的扩展比率。
- 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
- 示例：b,c将按照1:3的比率分配剩余空间
<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li:nth-child(1){width:200px;}
.flex li:nth-child(2){flex-grow:1;width:50px;}
.flex li:nth-child(3){flex-grow:3;width:50px;}
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
本例中b,c两项都显式的定义了flex-grow，flex容器的剩余空间分成了4份，其中b占1份，c占3分，即1:3
flex容器的剩余空间长度为：600-200-50-50=300px，所以最终a,b,c的长度分别为：
a: 50+(300/4)=200px
b: 50+(300/4*1)=125px
a: 50+(300/4*3)=275px
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
