前端复习笔记

八、列表
1.概念：将一些具有相同或者相似特征的元素进行以整齐的排列
2.分类：有序列表ol，无需列表ul
3.语法：定义列表->书写列表li
4.属性：type - 定义列表项标识的样式
有序列表的取值：1/a/A/i/I
无序列表的取值：circle/square
有序列表独有的属性： start -> 取值：阿拉伯数字
5.css列表
list-style-type：none； -使用css的方式去掉列表项标识
6.注意：今后能用无序列表的地方就用无序列表，有序列表尽量少用，不利于seo
九、尺寸
1.常用尺寸单位
a -%
b -px
c -em相对于父元素的尺寸
d -rem相对于根元素的尺寸
2.常用颜色单位
a. -rgb（x，x，x）
x->0~255之间的数字，绝大部分用于js中随机生成随机颜色
b. - #rrggbb
6位十六进制数字 1~9 a~f
简写： #rgb
c. -英文单词
3.设置尺寸的元素
a.能够设置尺寸的属性
i.所有的块级元素都能设置尺寸
div，h1~h6，p，ol，ul，li
ii.一些能够设置尺寸的HTML元素
img，canvas，video
b.不能设置尺寸的属性
i大部分的行内元素都不不能设置尺寸
span，i，b，u，s，sup，sub

十.浮动
1.语法 float
2.取值 none/left/right
3.概述
a.浮动的元素会脱离文档流，不占据页面空间
b.浮动的元素会停靠在包含框的左边或右边
c.浮动的元素依然会位于包含框之内
d.如果浮动的元素前已经有了一个已经浮动的元素，那么他会停靠在这个元素的左边或右边
e.浮动是专门用于解决块级元素在一行显示的问题
4.清除浮动
目的：解决后续元素受浮动影响的问题
语法：clear
取值：none/left/right/both（常用）；
5.浮动对父元素的影响（父元素为0的问题）
解决方案
a.直接给父元素添加一个高度
b.使用清除浮动的方式
c.让父元素也浮动起来
d.overflow：hidden； //溢出隐藏（下拉菜单不能用）
十二.过渡
1.语法 transition：过渡属性 过渡时间 过渡速度函数 过渡延迟；
注意：延迟一般不设置 默认是不延迟（0s）
过渡属性：只要是带数值的属性都可以过渡
all-所有发生变化的属性都过渡
过渡时间：.3s/.4s是用户体验最好的过渡时间
过渡速度函数： linear -匀速的
2.常用方法：all/.3/linear
十三.框模型
1.内边距
a.语法：padding：n px；
b.定义：围绕在元素周围的空白领域
c.取值
padding：值1；
值1：上下左右四个方向的外边距
padding：值1 值2：
值1.上下外边距
值2.左右方向外边距
padding：值1 值2 值3
值1：上外边距
值2：左右外边距
值3：下外边距
padding：值1 值2 值3 值4；
d-单边定义
padding-方向：n px；
方向：top/right/bottom/left
2.外边距
a.语法：margin：n px；
b.定义：围绕在元素周围的空白领域
c.取值
margin：值1；
值1：上下左右四个方向的外边距
margin：值1 值2：
值1.上下外边距
值2.左右方向外边距
margin：值1 值2 值3
值1：上外边距
值2：左右外边距
值3：下外边距
margin：值1 值2 值3 值4；
margin：auto；
注意：auto只能控制左右方向自动居中（上下无效）
d-单边定义
margin-方向：n px；
方向：top/right/bottom/left
3.特殊
a.元素实际所占大小计算方式
元素实际所占宽度=元素内容宽度+左右内边距+左右边框+左右外边距
元素实际所占高度=元素内容高度+上下内边距+上边边框+上下外边距
b.改变元素所占大小计算方式
box-sizing：border-box
使我们设置的内容的大小包含元素内容、内边距以及边框的大小
十四、边框
1.语法border
2.简写方式 border：边框宽度 边框样式 边框颜色；
样式：solid -实线的
3.单边定义
border-方向：xpx
4.特殊用法
使用边框实现三角形
设置元素宽度、高度为0，并只设置其中一个边的边框
5.特殊的颜色
透明色 transparent
6.边框倒角
直角变圆角
border-radius：px/%；
边框倒角的单边定义
border-上下方向-左右方向-radius：px/%；

十四.背景
1.背景颜色 background-color：合法颜色值；
2.背景图像 background-image：url（“要引用图像的路径”）；
注意：如果背景图像和背景颜色同事设置的话背景图像会压在背景颜色的上边
3.背景平铺 background-repeat：none/repeat-x/repeat-y/no-repeat；
4.背景尺寸 background-size：w h； ->px/%
5.背景图像定位 background-position：x y；
x-x方向偏移量
取正：背景图像向右移动
取负：背景图像向左移动
x-y方向偏移量
取正-背景图像向下移动
取负-背景图像向上移动
配合精灵图使用 ->图像拼合技术
将多个小图放在一张大图中显示
如何显示精灵图中的某些小图
a.创建一个和想要显示小图一样大的元素
b.将精灵图作为背景图像引入元素中，并使用背景图像定位的方式移动背景图像，以便显示要显示的小图
注意：背景图像定位的取值一定是<=0的
6.背景简写方式
background：背景颜色 背景图像 背景平铺 背景图像定位；

十五、定位
1.相对定位
语法：a.相对定位的元素师不脱离文档流
b.相对于自身的位置进行偏移
c.配合偏移属性来使用（top/right/bottom/left）
d.绝大部分会配合绝对定位使用
使用场合：用于网页元素位置的微调
2.绝对定位
语法：position：absolute；
特点：a脱离文档流，不占据页面空间
b.配合偏移属性使用
c.相对于最近的已经定位的祖先元素进行定位
d.如果没有已经定位的祖先元素，那么它会相对于最初的包含框进行定位
e.使用绝对定位来完成元素位置的初始化
使用场合：下拉菜单，网页布局
3.固定定位
语法：position：fixed；
特点： a.脱离文档流，不占据页面空间
b.配合偏移属性使用
c.相对于最初的包含框进行定位
使用场合：返回顶部，吸顶灯

十六.表格
table -定义表格
tr -定义行
td -定义列
1.table属性
a.align="left/right/center" -控制制整个表格在页面中的水平位置
b.bgcolor-整个表格的背景颜色
c.border=“n” -控制表格边框宽度
d.width -整个表格的宽度
e.height -整个表格的高度
f.cellpadding-表格内边距
g.cellspacing-表格外边距
2.tr的属性
a.align -控制当前行中内容的水平位置
b.bgcolor -控制当前行的背景颜色
3.td的属性
a-align -控制当前单元格的内容的水平位置
b.bgcolor -控制当前单元格的背景颜色
c.width -设置当前列的宽度
d.colspan -跨列
从当前单元格位置向右横向的合并掉几个单元格，并且要把被合并的单元格删掉
e.rowspan -跨列
从当前单元格位置向下纵向的合并掉几个单元格，并且要把被合并掉的单元格删掉