1、背景颜色：background-color
2、背景图片：background-image
3、背景平铺：background-repeat
repeat,no-repeat,repeat-x,repeat-y
4、背景尺寸：background-size
width height / cover / contain
5、背景固定：background-attachment
scroll / fixed
6、背景位置：background-position
x y / x% y% / left,right,center,top,bottom
7、背景属性：background
color url repeat attachment position
2、文本格式化
1、字体属性
1、指定字体
fong-family:字体值1,字体值;
2、字体大小
font-size:px 或 pt
3、字体加粗
font-weight:normal / bold / value
4、字体样式
font-style:normal / italic
5、小型大写字母
font-variant:normal / small-caps
6、字体属性
font:style variant weight size family
注意：family 必须要设置
2、文本属性
1、文本颜色
color:颜色值
2、文本水平排列方式
text-align:left / center / right / justify
3、文本修饰
text-decoration:none / underline;
4、行高
line-height:px / 无单位数值
#d1{
height:50px;
line-height:50px;
}
5、首行文本缩进
text-indent:px;
6、文本阴影
text-shadow:h-shadow v-shadow blur color;
3、表格
1、表格通用属性
... ...
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
2、collapse
2、边框边距
属性：border-spacing
取值：1个 或 2个数值
===============================================
1、定位(重点)
1、什么是定位
表示元素在页面中的位置
2、为什么需要定位
元素的默认位置无法满足页面的需求，那么就要通过定位属性改掉默认位置
3、定位的分类
在CSS中，定位共分为以下几类：
1、普通流定位(默认定位方式)
2、浮动定位(重难点)
3、相对定位
4、绝对定位(难点)
5、固定定位
4、普通流定位
普通流定位，又称为"文档流定位"，是页面中所有元素的默认定位方式。典型的"流式布局"
特点：
1、每个元素在页面中都有自己的位置，占据一定的页面空间
2、每个元素都是从其父元素的左上角开始排列的
3、每个元素基本上都是按照从上到下 或 从左到右的方式进行排列的
块级元素：从上到下排列的，每个独占一行
行内元素 & 行内块元素：从左到右排列，显示不下的时候才换行，一行允许显示多个
问题：如何能够将多个块级元素放在一行内显示？？ --浮动定位
5、浮动定位(重难点)
1、什么是浮动定位 & 特点
将元素的定位方式设置为浮动定位的话，那么元素将具备以下几个特点：
1、浮动元素会被排除在文档流之外-脱离文档流，那么元素就不再占据页面空间
2、未浮动的元素们会上前占位
3、浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动只能在当前行浮动
5、浮动解决的问题 - 让多个块级元素在一行内显示的问题
2、语法
属性：float
取值：
1、none
默认值，无任何浮动效果
2、left
浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上 - 左浮动
3、right
浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上 - 右浮动
3、浮动引发的特殊效果
1、如果父元素显示不下所有的已浮动元素的话，那么最后一个将换行，但有可能被卡住
2、元素一旦浮动起来之后，都将变成块级元素
行内元素浮动起来后，允许修改尺寸
3、元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定
4、文字，图片，行内元素是采用环绕的方式来排列的，是不能被浮动元素压在低下的
4、清除浮动
1、浮动带来的影响
元素一旦浮动起来之后，其后面的元素就有可能上前占位，也有可能被压在底下。如果后面元素不想被压在底下或不想上千占位的话，就可以通过清除浮动的方式来解决问题
2、语法
属性：clear
取值：
1、none
默认值，即不做任何清除浮动的操作
2、left
清除当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动所压在底下
3、right
清除当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动所压在底下
4、both
清除前面元素任何一种浮动方式所带来的影响
5、浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以是不占据页面空间，那么也就不占据氟元素空间。所以父元素的高度最终是以未浮动的子元素高度为准的
如果一个元素中的所有子元素都浮动的话，那么该元素的高度将变为 0
解决方案：
1、为父元素增加overflow属性，取值为auto 或 hidden
有弊端：如果有溢出要显示的内容也一同被隐藏了
2、在父元素的末尾处，增加一个空的块级元素，并设置其clear属性为both
2、其他定位方式
1、相关属性
1、position
作用：改变元素的定位方式
取值：
1、static - 静态的
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
注意：将元素的position设置为 relative/absolute/fixed任意一种的话，那么该元素就称为"已定位元素"
2、偏移属性(共4个)
作用：配合着已定位元素去实现位置的移动
属性：top / right / bottom / left
top : 以元素的上边为基准边移动元素
right : 以元素的右边为基准边移动元素
bottom : 以元素的下边为基准边移动元素
left : 以元素的左边为基准边移动元素
注意：偏移属性只针对已定位元素有效
2、相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
2、语法
属性：position
取值：relative
配合着 偏移属性 实现位置的移动
练习：
1、创建07-positon-relative.html
2、创建一个 ul 4个 li
3、每个 li 的尺寸为 100 * 30，边框/背景 ，左浮动，在一行显示
4、当鼠标悬停在 li 上的时候，让当前 li 向左上偏移 10px
3、绝对定位
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流-不占据页面空间
2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化
3、如果元素没有最近的，已定位的祖先元素的话，那么则相对于body去实现位置的初始化
2、语法
属性：position
取值：absolute
position:absolute
配合着 偏移属性 top/left/right/bottom 实现位置的变化
4、堆叠顺序
1、什么是堆叠顺序
指定堆叠在一起的元素之间的排列顺序
2、语法
属性：z-index
取值：无单位的数值，数字越大越靠前，默认值为0
调整 谁压谁的效果
3、注意
1、只有已定位元素才能使用堆叠顺序
2、父子元素间，永远都是子元素压在父元素的上面，不受堆叠顺序影响的
3、如果堆叠顺序相同的话，则后来者居上
5、固定定位
1、什么是固定定位
将元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变
固定定位元素会脱离文档流-不占页面空间
2、语法
position:fixed
属性：position
取值：fixed
配合着 偏移属性 实现位置的初始化
3、注意
固定定位的元素永远都是相对于body去实现位置初始化的
3、显示
1、显示方式
1、什么是显示方式
决定了页面上的元素以什么样的方式显示在页面中(块级/行内/... ...)
2、语法
属性：display
取值：
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占页面空间
2、block
让元素变为块级元素
3、inline
让元素变为行内元素
4、inline-block
让元素变为行内块元素
特点：
1、多个行内块元素以及行内元素能够在一行内显示
2、行内块是允许修改尺寸的
2、显示效果
1、visibility 属性
作用：控制元素的可见性
取值：
1、visible
默认值，可见的
2、hidden
隐藏，但未脱离文档流，所以还占据页面空间
2、opacity 属性
作用：控制元素的透明度
取值：0(完全透明)-1(完全不透明)之间的数字
3、光标
作用：指定当鼠标悬停在元素上时鼠标的表现方式
属性：cursor
取值：
1、default ：默认
2、pointer ：小手
3、crosshair ：+
4、text ：I
5、wait ：等待
6、help ：帮助
4、列表
1、列表项标志
属性：list-style-type
取值：
1、none
(查手册)
2、列表属性
属性：list-style
取值：type url() position;
常用方式：list-style:none;
5、转换
1、什么是转换
改变元素在页面中的位置，尺寸，角度 以及 形状的一种方式
2、属性
1、转换属性
属性：transform
取值：
1、none
默认值，表示无任何转换效果
2、一组转换函数
如果有多个转换函数的话，中间用 空格 隔开
2、转换原点
1、什么是转换原点
转换操作围绕着的一个点，就是转换原点
2、语法
属性：transform-origin
取值：两个值，中间用空格隔开
1、px为单位的数值
2、%
3、关键字
3、默认的转换原点
在元素的中心位置出(center center)
3、转换效果
1、位移
改变元素在页面中的位置
语法：
属性：transform
取值(函数)：
1、translateX(x)
x表示水平位移距离和方向
取值为正，元素右移
取值为负，元素左移
2、translateY(y)
y表示垂直偏移距离和方向
取值为正，元素下移
取值为负，元素上移
3、translate(x)
同 translateX(x)
4、translate(x,y)
2、缩放
改变元素的尺寸
语法：
属性：transform
取值：
1、scaleX(x)
x : 横向缩放比例
默认值为1，即原始比例大小
大于1的数字 ：放大
大于0小于1的数字 ：缩小
小于0 ：物极必反
2、scaleY(u)
y : 纵向缩放比例
默认值为1，即原始比例大小
大于1的数字 ：放大
大于0小于1的数字 ：缩小
小于0 ：物极必反
3、scale(value)
表示水平和垂直方向的缩放比例是相同的
3、旋转
改变元素在页面中的角度
语法：
属性：transform
取值：rotate(ndeg)
n取值为正，顺时针旋转
n取值为负，逆时针旋转
注意：
1、转换原点会影响转换效果
2、旋转的时候，会连同坐标轴一同跟着旋转，会影响旋转之后的位移操作
1、定位
1、浮动
1、浮动特点
1、脱离文档流 - 不占页面空间
2、停靠在父元素的左边或右边，或其他已浮动元素的边缘上
3、未浮动元素要上前占位
4、只能在当前行浮动
2、语法
属性：float
取值：none / left / right
3、浮动引发的特殊效果
1、一行下显示不下所有的浮动元素的话，最后一个将换行，但有可能被卡住
2、元素浮动后，都变为块级
3、元素浮动后，未指定宽度时，宽度以内容为准
4、文本，图片，行内元素采用环绕的方式来排列的
4、清除浮动
属性：clear
取值：none / left / right / both
5、父元素的高度
父元素的高度是以未浮动的元素为准的
解决方案：
1、overflow:hidden / auto
2、增加一个空块级的子元素，并设置其clear:both
2、其他定位
1、相对定位
属性：position
取值：relative
配合着 偏移属性 实现位置的移动
2、绝对定位
属性：position
取值：absolute
配合着 偏移属性 实现位置的初始化
特点：
1、脱离文档流
2、会相对于离它最近的，已定位的，祖先元素去实现位置的初始化
3、如果没有最近的，已定位的，祖先元素的话，则相对与body实现位置初始化
3、固定定位
属性：position
取值：fixed
2、显示
1、显示方式
属性：display
取值：
1、none ：隐藏 ， 脱离文档流
2、block ：块级
3、inline ：行内
4、inline-block ：行内块
2、显示效果
1、可见性
属性：visibility
取值：visible / hidden
面试：display:none 以及 visibility:hidden区别
文档流的问题
display:none; 脱离文档流，所以不占空间
visibility:hidden;没有脱离文档流，空间保留
2、透明度
属性：opacity
取值：0-1之间的数字
3、光标
属性：cursor
取值：pointer
3、列表
list-style:none;
4、转换
1、位移
属性：transform
取值：
translateX(x)
translateY(y)
translate(x)
translate(x,y)
2、缩放
属性：transform
取值：
scaleX(x)
scaleY(y)
scale(value) : x和y的缩放比例
scale(x,y)
3、旋转
属性：transform
取值：rotate(ndeg)
更改转换原点：
属性：transform-origin
取值：两个值
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
