背景属性
background-color
设置背景颜色，且会填充边框以内的所有部分，包括内边距、边框。
background-clip
设置背景显示的区域（设置背景的范围）
参数
| 属性值 | 说明 |
|---|---|
| border-box | 背景会延伸到边框的下边 |
| padding-box | 背景会设置到内边距 |
| center-box | 背景只会设置到内容区中 |
兼容性：ie8不兼容，以上版本是兼容的。
background-image
用于设置背景图片。
背景颜色和背景图片可以同时设置，这样颜色将会作为图片的底色显示。
背景图片默认会在网页中水平垂直双方向垂直。
background-repeat
设置背景图片的重复方式。
| 属性值 | 说明 |
|---|---|
| repeat | 默认值，双方向重复 |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
| no-repeat | 不重复 |
backgroun-size
用来设置背景图片的尺寸。
| 属性值 | 说明 |
|---|---|
| cover | 使图片将元素填满，可能有部分图片从元素中溢出（确保图片比例不变） |
| contain | 完整显示图片，可能会有位置没有图片 |
注意：
- 设置背景图片时，
如果图片小于元素，则图片默认会从元素的左上角开始平铺。
如果图片大于元素，则多余部分不会显示。 - 需要两个值作为参数：宽度 高度。
- 只设置一个100%，则图片按照容器宽100%填充，高度等比例缩小。
background-position
用来设置背景图片的位置。
设置形式
- 可以通过位置关键字来设置位置
简单来说就是九宫格。
top（left、center、right）
center（left、center、right）
left（left、center、right）
只写一个值，第二个值默认是center。
例如：想让图片去下面的右边，则参数写bottom right。 - 可以通过指定偏移量来设置背景图片的位置
第一个值，水平方向偏移量 aaapx
正值（背景向右移动）、负值（背景向左移动）。（一般是负值）
第二个值，垂直方向的偏移量 aaapx
正值（向下走）、负值（向上走）。（一般是负值）
background-origin
设置背景定位点的位置。
| 属性名 | 说明 |
|---|---|
| content-box | 内容区的左上角 |
| padding-box | 内边距的左上角 默认值 |
| border-box | 边距的左上角 |
background-attachment
背景是否固定
| 属性值 | 说明 |
|---|---|
| scroll | 滚动 |
| fixed | 背景在视口中固定 |
属性具体案例值介绍
<style>
.p{
background-color: #bfa;
/*背景颜色*/
background-image: url(img/1.png);
/*背景图片*/
background-repeat: no-repeat;
/*背景图片的重复方式*/
background-position: 10px 10px;
/*位置*/
background-size: 200px 200px;
/*背景的尺寸*/
background-origin: content-box;
/*定位的原点*/
background-clip: border-box;
/*背景从哪里开始显示*/
background-attachment: fixed;
/*背景是否固定到屏幕的指定位置*/
}
</style>
background属性设置注意事项
- background是背景的简写属性，所有的属性相关的样式都可以在background中设置，并且没有顺序的要求。
- position和size都可以写数字，当一起书写时的格式为position/size，想只写size是不行的，必须写position。
- origin和clip书写，需要先写origin再写clip。
练习
按钮-雪碧图
涉及知识点
- 行内元素可以设置宽高，实现方式很多：
display：block、inline-block；
float：left、right；（浮动）
position：absolute、fixed；（定位：绝对定位、可伸缩）
按钮link-hover-active
当按钮状态从link 切换到hover时 或 从hover切换到 active时，第一次会出现一个闪烁。
原因：
浏览器在加载页面时需要先加载当前页面，然后再加载页面中引入的外部资源。而外部资源不是立刻加载的，外部资源需要在被使用时才会加载。
当我们从link切换到hover状态时，需要去加载hover的图片，而加载和显示之间存在一个时间差，这样在图片加载中会出现没有背景图片的情况，这样就导致闪烁。
解决方式：
可以将多个按钮保存到一个图片中，这样我们一次性加载所有的图片，然后通过偏移量来修改我们需要显示的图片即可。这个技术，我们称为CSS Sprite（CSS精灵）。这种图我们称为雪碧图。
雪碧图
- 优点：
将多个图片保存到一个图片中，降低发送请求的次数，增加用户的访问速度；
将多个图片保存到一个图片中，也会降低图片的总大小，增快加载速度； - 缺点：
只适用于背景图片 - 制作雪碧图：
制作雪碧图的网站，著名的前端团队：（腾讯）alloyteam、（360）奇舞团、（京东）auto
本次课程中讲述的是：alloyteam.github.io/gopng/
通过这个网站可以方便制作雪碧图，有png和css格式，css格式的文件中有每个图的偏移量。 - 雪碧图的使用步骤：
①创建一个元素，大小就是图标的大小
②将雪碧图设置 为元素的背景
③设置背景的偏移量，使其可以显示图标 - a标签中的href = # 和 = javascript 的区别
<!-- #是占位符，也可以写javascript:;-->
<a href="javascript:;" class="btn"></a>
href = # 点击此链接后，页面会向上滚到首页；
href = javascript:; 点击此链接后，页面不动，只是打开连接；
表格案例
当先后设置tr:hover、tr:nth-child(even)时，鼠标选中偶数行没有设置的效果。
原因是：
前后两者的优先级相同，但是tr:nth-child(even)书写在后面，所以优先级较高。
解决方式：
将两者换位；
提高tr:hover的优先级，书写为table tr:hove。（table tr书写上看似是父子元素，看似可以使用table > tr，但是却不灵。解释：）
margin失效的现象 box1里面是box2，给box1设置display:table-cell，此时box1的margin会失效。
使box2在box1中垂直水平居中，等价于 对box1设置table-cell属性，而box2相当于其中的内容。
表格table
概述
表格用来表示一些格式化的数据。
在网页中，使用table来创建表格。
table是个块元素，但是默认宽度是被内容撑开的。
表格创建
标签tr td（thead/tbody/tfoot）
table 表示一个表格，
tr 表示一行，
td 表示一个单元格。
thead 表示表格的头部。
tbody 表示表格的主体。
tfoot 表示表格的底部。
注意
使用tr来表示表格中的一行，有几个tr就有几行。
tr中使用td来表示单元格，有几个td就有几个单元格。表格的列数由td最多的那行决定。如果其中有个td中写了colspan=5则说明单元格有5个。
标签之间的关系
<body>
<table>
<thead>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
表格属性（border/width/align/rowspan/clospan/border-spacing-border-collapse）
边框通过属性border来设置（1表示边框的宽度）。
宽度通过属性width来设置（50%占显示窗口的50%）。
位置通过align来设置（center居中）。
rowspan 纵向的合并单元格，参数表示合并单元格的个数。
colspan 横向的合并单元格。参数表示合并单元格的个数。
border-spacing设置表格之间的距离，在table中设置，当设置为0，则table表格和td表格边框重合。此时效果看起来是重合在一起，但实际上是两个边框在一起挨着。
border-collapse 设置边框是否重合，参数collapse设置重合。当写了border-collapse后border-spacing自动生效为0。
举例：
<table border="1" align='center' width='50%'>
<!-- 设置表格边框，表格位置，表格宽度 -->
<tr>
<td colspan="2"></td>
<!-- 横向合并两个单元格 -->
</tr>
</table>
表单 form
表单用来将信息提交给他人。
网页中的表单用来将信息提交给服务器。
表单创建
<form action="target.html">
</form>
使用form标签来创建表单。
action是表单提交的目标的地址。
表单中需要添加一个一个的表单项。
表单提交
文本框，type是text
<input type="text" name="uersname">
密码框，type是password
<input type="password" name='password'>
提交按钮，type是submit
<input type="submit" value='注册'>
注意： 表单项：只有指定name属性的才会被提交给服务器
3642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
