web-5 : css 其他定位方式 显示效果 列表属性 转换属
一.背景相关属性
背景颜色
属性 : background-color
取值 : 颜色值
背景图片
属性 : background-image
取值 : url('')
背景图片相关属性
背景图片重复平铺显示
属性 : background-repeat
取值 :
background-repeat: repeat;(默认值)
当图片尺寸小于元素尺寸,会自动沿水平和垂直方向重复平铺,直到铺满元素
background-repeat: repeat-x;
设置图片沿水平方向平铺
background-repeat: repeat-y
设置图片沿垂直方向平铺
background-repeat: no-repeat
设置图片不重复平铺
背景图片的尺寸
属性： background-size
取值： 像素值 、 百分比 、cover、 contain
像素值：
background-size: 60px 60px
取两个值，则分别表示背景图片的宽和高；
取一个值，设置背景图片宽度，高度等比缩放。
百分比
background-size: 20% 20%;
百分比取一个值或两个值等同于像素的取值情况；
百分比参照当前元素的宽高来计算。
background-size: cover;
覆盖， 等比拉伸图片至足够大，完全覆盖元素。
background-size:contain;
包含，等比拉伸图片至刚好被元素容纳的最大尺寸。
示例：01-background-html
背景图片的位置:
属性： background-position
取值：
像素值 x y
x 表示背景图片的水平偏移距离，正值表示向右；
y 表示背景图片的垂直偏移距离，正值表示向下。默认背景图片从元素左上角显示。
百分比
0% 0% 显示在左上角
50% 50% 显示在元素中间位置
100% 100% 显示在右下角
方位值
水平方向： left center rught
垂直方向： top center bottom
设置方位值时，如果缺少某个方向，默认为center
使用场景：
“精灵图技术”，网页开发过程中，为了节省资源、减少网络请求，通常会将一组小图标以一张图片的形式存储，通过一次网络请求加载图片，配合background-position控制图标切换显示效果。
背景属性的简写
属性： background
取值： color url() repeat position; (都是选填项)
background: pink url(northStar.jpg) no-repeat 100px 100px
注意：此时，background-size属性 需要单独设置。
二.文本与字体相关属性
字体相关属性
字体大小：
属性： font-size
取值： 像素值
指定字体名称：
属性：font-family
取值：字体名称
语法注意：
1.字体名称如果是中文或者由多个英文单词组成，必须加引号。
2.可以设置多个字体名称，做备用字体，名称之间使用逗号隔开。
示例： font-family: Arial,'黑体','Micosoft YaHei'
字体加粗：
属性： font-weight
取值：
1.可以取关键字
bold(加粗显示) 、 normal(默认，正常显示)
2.取无单位的正百数(100~900)
100: 等价于normal
700:等价于bold
设置字体样式（斜体）:
属性： font-style
取值：
1 normal (默认正常显示)
2 italic (斜体显示)
3 oblique (文本倾斜显示),一般作为italic的替换样式，可以实现倾斜效果，某些情况下可以指定倾斜角度。
字体属性简写:
属性： font
取值： style weight size family ;（顺序强制）
语法注意： size,family为必填项。
文本相关属性
文本的颜色：
属性： color
取值： 颜色值
文本的水平对齐方式：
属性： text-align
取值： left(默认) 、center 、 right
文本的装饰线:
属性： text-decoration
取值：
1.uderline 下划线
2.overline 上划线
3.line-througth 删除线
4.none 取消装饰线
文本的行高：
属性： line-height
取值： 像素值
注意： 所有文本在其所在行中都是垂直居中的。
使用场景：
1.行高可以用来设置一行文本的垂直居中：行高与元素的高度保持一致。
2.行高可以实现文本在元素中上下位置的微调：
例1：{heigh：100px；line-height:150px}
（文本行高越大，文本相对元素会下移，试一试就知道...。）
例1：{heigh：100px；line-height:60px}
（文本行高越小，文本相对元素会上移。）
三.表格相关属性。
表格尺寸
表格在设置宽高时，可以选择：
1.给table标签固定宽高，单元格自动分配大小。
2.给td单元格设置宽高，由内容决定表格整体大小。
两种设置方法二选一。
table标签完全支持盒模型。默认采用border-box计算尺寸tr，td标签，不完全支持盒模型。
表格边框合并。
将单元格边框与表格边框合并在一起。
属性： `border-collapse
取值：
1.seperate (默认值，边框分离)
2.collapse 设置边框合并。
调整单元格与边框之间的距离。
属性： border-spacing
取值： h-value / v-value
语法注意：
h-value 表示水平方向上的边距
v-value 表示垂直方向上的边距
该属性必须添加给table标签,要求必须是边框分离状态才起作用
示例“03-table.html
四.过渡效果
什么是过渡：
过渡指的是元素在两种状态切换时的平滑过渡效果。
过渡相关的属性
指定过渡时长：
属性： transition-duration
取值： 以s/ms(秒/毫秒)为单位的数值。
指定过渡属性:
属性： transition-property
取值： 大部分的CSS属性名
语法：
width (指定单个属性名)
width height (指定多个属性名，使用逗号隔开)
all (指定所有的发生值改变的属性)
指定过渡发生的时间变化曲率：
属性： transition-timing-function
取值：
- linear 匀速变化。
- ease 默认值，慢速开始，中间加速，慢速结束。
- ease-in 慢速开始，加速结束。
- ease-out 快速开始，慢速结束
- ease-in-out 慢速开始和结束，中间过程先加速后减速。
指定延迟时间：
属性： transition-delay
取值： 以s/ms为单位的时间值
过渡属性的简写
属性： transition
取值： property duration timing-function delay;
语法：
- duration 是必填项，其他项可以省略。
- 可以分别为不同属性设置过渡时长。
transition: width 2s, height 3s,
CSS常用的布局方式
CSS布局就是指，设置元素的排列和显示。
布局的分类
标准流布局：
标准流布局又叫静态布局，文档流布局，是一种默认的布局方式。
特点：元素按照类型和书写顺序，从左到右，从上到下依次显示。
浮动布局：
元素设置浮动后，可以停靠在其他元素的边缘。
属性： float
取值： left / right / none(默认值)
float: left;
元素左浮动，直到紧靠其他元素的边缘。
float: right;
元素右浮动，直到紧靠其他元素的边缘。
特点：
- 元素浮动之后，会脱离文档流，在文档中不再占位，表现为悬浮在文档上方。后面正常的元素会向前占位。
- 多个元素浮动时，会依次停靠在前一个浮动元素的边缘，如果当前父元素宽度无法容纳，会自动换行显示。
- 任何元素只要设置浮动，都可以设置宽/高。
- 文字环绕效果，浮动元素不占位，会遮挡正常元素的显示，只遮挡正常元素的位置，不影响正常内容显示，内容显示会环绕在浮动元素周围显示。
- 浮动元素水平方向没有缝隙，可以解决行内元素或行内块元素水平方向上由于换行导致的空隙问题。
浮动引起的问题：
由于子元素全部浮动，在文档中不占位，造成父元素高度为0,影响页面布局。
解决办法：
1.给父元素设置一个高度，占位。
2.给父元素设置overflow:hidden;
3.标准做法：清除浮动元素带来的影响。
属性： clear
取值： left / right / both
用法：
为元素设置clear属性
clear：left； 设置成当前元素不受左浮动元素的影响
clear：right； 设置成当前元素不受右浮动元素的影响
clear：both； 设置成当前元素左浮动或右浮动元素的影响
解决父元素高度为0的步骤：
- 在父元素的末尾添加空的子元素（块元素）。
- 为空元素设置
clear: both;
示例：05-float.html / 06-float2.html
