目录
参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/css
参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/css
一、CSS介绍
CSS ：Cascading Style Sheets
HTML:搭建网页结构
CSS:修饰和美化网页
二、CSS的使用方式（重点）
1、内联方式
又称为：行内样式，内联样式
特点：将CSS的内容定义在单独的HTML标签中
语法：
<标记 style="样式声明">
样式声明：就是要修饰的样式效果
1、样式声明是由样式属性和属性值来组成的
2、属性 和 值之间使用 : 连接
<标记 style="属性:值">
3、在一个style中允许出现多个样式声明，多个样式声明之间，用 ; 隔开
<标记 style="属性:值;属性:值;">
常用的属性和值：
1、文字大小
属性：font-size
取值：以 px 为单位的数字
ex:设置某div的文字大小为18px
<div style="font-size:18px;">xxx</div>
2、文本颜色
属性：color
取值：取值为表示英文的单词
ex:设置某div的文字颜色为红色(red)
<div style="color:red;">xxx</div>
3、背景颜色
属性：background-color
取值：取值为表示英文的单词
练习：
1、创建一个网页 01-style.html
2、创建一个div，内容随意(lorem)
3、使用内联方式，设置样式如下：
1、文字大小为 36px
2、文本颜色为 红色（red）
3、背景颜色为 黄色（yellow）
2、内部样式表
1、作用
让定义好的样式能够使用在当前页面的多个元素上
2、语法
<head>
<style>
样式规则1
样式规则2
... ...
样式规则n
</style>
</head>
样式规则：
由选择器 和 样式声明 组成的
目的：为了声明一组独立的样式
选择器：规范了页面中哪些元素能够使用声明好的样式
选择器{
属性1:值1;
属性2:值2;
}
ex:
p{
color:red;
}
span{
font-size:36px;
}
3、外部样式表
1、作用
将声明好的样式应用在多个网页中
将样式规则声明在独立的css文件中(***.css)
在使用的网页中对css文件进行引入即可
2、使用步骤
1、声明
创建.css文件，并编写样式规则
2、引用
<head>
<link rel="stylesheet" href="css文件路径">
</head>
三、样式表的特征
1、继承性
大部分的css属性是可以由父元素继承给子元素的
2、层叠性
允许为一个元素定义多种的使用方式或多个样式规则
如果样式的声明之间不冲突的话，那么所有的样式声明都可以应用在元素上
3、优先级
允许为一个元素定义多种的使用方式或多个样式规则，如果样式声明冲突的话，会按照不同方式的优先级来应用样式
浏览器缺省设置 低
内部或外部样式表 中
就近原则 ：后定义者优先
内联方式 高
四、简易挑错
1、Invalid property value
属性值写错了
2、Unknown property name
属性名称写错了
五、CSS选择器(重难点)
1、作用
规范了页面中哪些元素能够使用声明好的样式
目的：为了匹配页面的元素
2、选择器详解
1、元素选择器
特点：由标记名称作为选择器，主要匹配页面中指定标记所对应的所有元素
语法：
标记{
样式声明;
}
ex:
div{ ... }
p{ ... }
input{ ... }
练习：
设置页面中所有的 a 元素，不显示下划线
不显示下划线：
text-decoration:none;
2、类选择器
特点：允许被任意元素所引用的选择器
语法：
1、声明
.类名{ 样式声明 }
类名：
1、字母，数字，_, - 组成
2、数字不能开头
ex:
div{ ... } /*元素选择器*/
.div{ ... }/*类选择器*/
2、引用
<标记 class="类名">(引用不加.)
练习：
1、创建网页04-selector-class.html
2、创建几个元素(div,p,span,h1)
3、使用类选择器，设置以上标记的样式
1、文字大小28px
2、背景颜色 silver
3、斜体显示 : font-style:italic;
特殊用法：
1、分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素不同样式的细分控制
语法：
元素选择器.类选择器{ ... }
ex:
.important{
类选择器，匹配所有class为important的元素
}
div{
元素选择器，匹配所有的div元素
}
div.important{
匹配class为important的div元素
}
2、多类选择器的引用方式
允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开
.c1{ ... }
.c2{ ... }
.c3{ ... }
<标记 class="c1 c2 c3">
练习：
增加一个类选择器
.dec{
text-decoration:underline;
}
让所有的元素都增加对dec类选择器的引用
3、id选择器
1、ID的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识
<div id="main"></div>
2、ID选择器
为了匹配页面中指定ID值的元素
语法：
#ID值{ ... }
EX:
#main{
color:red;
}
4、群组选择器
1、作用
定义多个选择器们的共有样式
定义方式是一个以,隔开的选择器列表
2、语法
选择器1,选择器2,选择器3,... ...{
... ...
}
ex:
#main,p,div.span,.redColor{
color:red;
}
等同于：
#main{color:red;}
p{color:red;}
div.span{color:red;}
.redColor{color:red;}
5、后代选择器
1、作用
依托于元素的后代关系来匹配元素(不限制层级)
2、语法
选择器1 选择器2{ ... }
ex:
#wang span{
匹配 id为wang的元素中所有的span元素
}
6、子代选择器
1、作用
依托于元素的子代关系来匹配元素
(只有一层层级关系)
2、语法
选择器1>选择器2{ ... }
#wang>span{
id为wang的元素中的下一级span元素
}
7、伪类选择器
1、作用
匹配元素不同状态的选择器
ex：超链接 a 元素，具备四个状态
状态1：链接未被访问时的状态
文本为蓝色，并有下划线
状态2：鼠标悬停在元素上的状态
鼠标的状态变成了 "手"
状态3：当元素被激活时(鼠标点击时)
文本变为红色
状态4：当访问过后的时候
文本颜色变为紫色
2、语法
:伪类状态
通常会配合其他元素一起使用
选择器:伪类状态{ ... }
选择器：匹配元素
:伪类状态：匹配状态
1、链接伪类
1、:link
匹配超链接未被访问时的状态
2、:visited
匹配超链接被访问后的状态
2、动态伪类
1、:hover
匹配悬停在元素上面时的状态
2、:active
匹配元素被激活时的状态
3、:focus
匹配获取焦点时的状态
(文本框和密码框使用居多)
3、选择器的优先级
当多个选择器能够同时应用到一个元素上时，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式
选择器的优先级看"权值"
选择器 取值
元素选择器 1
类/伪类选择器 10
id选择器 100
内联方式 1000
如果是复杂的选择器(后代，子代，分类)的计算方式是将选择器们的权值累加
六、尺寸 与 边框
1、单位
1、尺寸单位
1、px - 像素
2、% - 占据父元素对应属性的占比
3、in - 英寸 1in = 2.54cm
4、pt - 磅 1pt = 1/72in
在css中通常表示文字大小
计算机中通常设置PPI(Pixel Per Inch)为72
5、cm - 厘米
6、mm - 毫米
在css中，所有的尺寸单位是不能省略的
2、颜色单位(颜色取值)
1、rgb(r,g,b)
r:红色范围值，0-255
g:绿色范围值，0-255
b:蓝色范围值，0-255
ex:
background-color:rgb(255,0,0)
rgb(0,255,0) : 绿色
rgb(0,0,0) : 黑色
rgb(255,255,255) : 白色
2、rgba(r,g,b,alpha)
alpha:颜色透明度，取值 0-1 之间的数字
0 ：完全透明
1 ：完全不透明
ex:
background-color:rgba(128,36,72,0.5)
3、#rrggbb
由6位16进制数字来组成的颜色
#ff0000:
4、#rgb
#rrggbb的缩写，当每两位数字相同时，可以使用缩写的方式
#ff0000 -> #f00
#11ff33 -> #1f3
#333 -> #333333
5、表示颜色的英文单词
red,green,blue,... ...
2、尺寸属性
1、作用
改变元素的宽度和高度
2、属性
1、宽度
属性：width
取值：以px或%为单位的数值
2、高度
属性：height
取值：以px或%为单位的数值
所有块级元素的尺寸：
宽度：占父元素100%的宽
高度：以内容为准
所有行内元素的尺寸：
宽度：以内容为准
高度：以内容为准
注意：
html 和 css 中，除img以外的所有行内元素的尺寸是不允许修改的
3、溢出处理
1、什么是溢出
当使用尺寸属性限制元素尺寸时，如果内容所需要的空间大于元素的尺寸的话，则产生溢出的效果
2、溢出处理的属性
属性：overflow
取值：
1、visible
可见的，默认值
2、hidden
溢出的内容会隐藏
3、scroll
显示滚动条，溢出时滚动条可用
4、auto
自动，溢出时产生滚动条并可用
3、边框属性
1、边框实现
1、边框的简写方式
通过一个属性完成四个方向边框的所有效果设置(宽度，样式，颜色)
属性：border
取值：width style color
width:边框的宽度，以px为单位的数值
style:边框的样式
solid:实线
dotted:虚线(点)
dashed:虚线(线)
color:边框的颜色
取值为合法的颜色值
可以取值为 transparent(透明)
特殊用法：
border:none;
2、单边定义
定义某一条边框的宽度，样式，颜色
属性：border-方向:width style color;
方向：top / bottom / left / right
ex:
上边框3px 实线 蓝色
border-top:3px solid blue;
3、单属性定义
设置四个方向边框的某一个属性值
语法：border-属性:值;
属性：width / style / color
ex:
1、设置四个方向的边框尺寸为 5px
border-width:5px;
2、设置四个方向的边框颜色为 pink 色
broder-color:pink;
4、单边单属性定义
设置某一方向边框的某一属性值
属性：border-方向-属性:值;
方向：top / bottom / left / right
属性：width / style / color
ex:
1、下边框的样式为虚线(点)
border-bottom-style:dotted;
2、右边框的宽度为 3px
border-right-width:3px;
3、左边框的颜色为 红色
border-left-color:red;
2、轮廓
outline:none;
3、边框倒角
1、作用
将边框的四个直角变为圆角
2、语法
属性:border-radius
取值:
1、以 px 为单位的数值
2、以 % 为单位的数值 - 50%
4、边框阴影
属性：
box-shadow:h-shadow v-shadow blur spread color;
h-shadow:阴影的水平偏移距离
取值为数字
取值为正，阴影向右偏移
取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离
取值为数字
取值为正，阴影向下偏移
取值为负，阴影向上偏移
blur:阴影的模糊大小
取值为数字
数字越大越模糊
spread:阴影的大小
取值为数字
color:阴影的颜色
七、框模型 - Box Model
1、什么是框模型
框：页面元素皆为框
框模型：定义元素的尺寸和距离的一种计算方式
Box Model ：盒模型，方框属性
包含：尺寸，边框，外边距 和 内边距
当框模型属性介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下：
占地宽度=左右外边距+左右边框+左右内边距+宽
占地高度=上下外边距+上下边框+上下内边距+高
2、外边距
1、什么是外边距
围绕在元素边缘之外的空白距离就是外边距
外边距是不允许被其他元素占据的
2、语法
1、属性
1、margin
最多能够设置四个方向的外边距值
2、margin-top
上外边距的值
3、margin-right
右外边距的值
4、margin-bottom
下外边距的值
5、margin-left
左外边距的值
2、取值
1、以 px 为单位的数字
ex：做外边距的值为20px
margin-left:20px;
2、以 % 为单位的数值
以父元素尺寸的占比作为外边距的值
3、取值为 负数
目的是为了移动元素
元素设置上外边距为正数，元素下移
元素设置上外边距为负数，元素上移
元素设置左外边距为正数，元素右移
元素设置左外边距为负数，元素左移
4、取值为 auto
自动：自动计算左右外边距的值
注意：
1、auto只能应用在左右外边距上，上下无效
2、只能为设置宽度的块级元素设置左右外边距为auto，目的是为了让块级元素水平居中
3、margin的简介写法
1、margin:value;
value表示的是上下左右四个方向的外边距值
ex:
margin:10px;
2、margin:v1 v2;
v1 : 表示上下外边距的值
v2 : 表示左右外边距的值
ex:
margin:0px auto;
3、margin:v1 v2 v3;
v1 : 表示上外边距的值
v2 : 表示左右外边距的值
v3 : 表示下外边距的值
ex:
margin:5px auto 3px;
4、margin:v1 v2 v3 v4;
v1 : 上外边距
v2 : 右外边距
v3 : 下外边距
v4 : 左外边距
3、页面中具备外边距的元素
body,p,h1~h6,ul,ol
以上元素都具备默认的外边距
CSS重写：通过元素选择器将标记的默认样式改掉
3、内边距
1、什么是内边距
内容与元素边缘之间的距离
注意：内边距会扩大元素边框的所占区域
2、语法
属性：
padding:四个方向的内边距值
padding-top/right/bottom/left:值;
取值：
1、以 px 为单位的数值
2、以 % 为单位的数值
简洁写法：同margin
padding:value; 上下左右
padding:v1 v2; 上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上 右 下 左
3、页面中具备默认内边距的元素
1、ul,ol
2、文本框，密码框，按钮
4、box-sizing
1、作用
指定框模型(尺寸，边框，内边距)的计算方式
2、语法
属性：box-sizing
取值：
1、content-box
默认值，元素的width和height，只规定到元素的内容区域的宽和高。内边距和边框的尺寸是需要额外计算再附加到当前元素上的。
div{
width:300px;
height:40px;
border:1px solid #000;
padding:1px 12px;
box-sizing:content-box;
}
内容宽度：300px
内容高度：40px
左右边框：各1px
上下边框：各1px
左右内边距：各12px
上下内边距：各1px
整体宽度：326px
整体高度：44px
2、border-box
元素的width 和 height，能够规定到元素的边框，内边距 以及 内容尺寸的。
width=边框宽度+内边距+实际内容宽度
height=边框宽度+内边距+实际内容高度
div{
width:300px;
height:40px;
border:1px solid #000;
padding:1px 12px;
box-sizing:border-box;
}
整体宽度：300px
整体高度：40px
左右边框：各1px
上下边框：各1px
左右内边距：各12px
上下内边距：各1px
实际内容宽度：274px
实际内容高度：36px
八、背景属性
1、背景颜色
属性：background-color
取值：合法的颜色值
注意：背景颜色是从边框的位置处就开始绘制
2、背景图像
属性：background-image
取值：url("图片路径")
3、背景平铺
属性：background-repeat
取值：
1、repeat
默认值，横纵都平铺
2、no-repeat
不平铺
3、repeat-x
横向平铺
4、repeat-y
纵向平铺
4、背景图片尺寸
属性：background-size
取值：
1、width height
以px为单位的数值
2、width% height%
采用当前元素的尺寸占比作为背景图尺寸
5、背景图片位置
1、作用
改变背景图在元素中的默认位置
2、属性
属性：background-position
取值：
1、x y
以 px 为单位的数值，用空格隔开
x ：背景图像水平偏移距离
取值为正，背景图向右偏移
取值为负，背景图向左偏移
y ：背景图像垂直偏移距离
取值为正，背景图向下偏移
取值为负，背景图向上偏移
2、x% y%
1、0% 0%
背景图在左上角
2、100% 100%
背景图在右下角
3、50% 50%
背景图在中间
4、95% 0%
偏右，靠上
3、关键字
x ：left / center / right
y ：top / center / bottom
6、背景属性 - 简写方式
属性：background
取值：color url() repeat position;
ex:
background:red;
background:url(a.jpg) no-repeat 95% center;
九、文本格式化属性
1、字体属性
1、指定字体
属性：font-family
取值：由 , 隔开的字体列表
注意：如果字体中包含中文或空格的话，要用引号引起来
ex:
font-family:"微软雅黑";
font-family:"Microsoft Yahei";
font-family:"微软雅黑",Arial,Helvetica;
2、指定字体大小
属性：font-size
取值：px 或 pt
3、字体加粗
属性：font-weight
取值：
1、normal ：非加粗显示
2、bold ：加粗显示
3、value
取值为无单位的数字
400 ：normal
900 ：bold
4、字体样式
属性：font-style
取值：
1、normal ：非斜体显示
2、italic ：斜体显示
练习：
1、创建01-font.html
2、创建一个div，内容随意
3、设置div的字体为 "楷体",加粗，斜体，大小为18pt
5、字体属性(简写)
属性：font
取值：style weight size family;
注意：
使用简写方式时，必须要设置family的值，否则无效
font:12px;/*无效*/
font:12px "微软雅黑";
2、文本属性
1、文本颜色
属性：color
取值：合法的颜色值
2、文本的排列方式
作用：控制某元素内的文本，图片和行内块元素的排列方式
属性：text-align
取值：left / center / right / justify
justify ：两端对齐
3、文字修饰
作用：指定线条修饰效果
属性：text-decoration
取值：
1、none : 无任何线条显示
2、underline : 下划线
3、overline : 上划线
4、line-through : 删除线
4、行高
作用：指定一行文本数据的所占高度
特点：如果行高的高度高于文本的高度的话，那么文本将在行高的范围内垂直居中显示
使用场合：
1、文本垂直居中
2、行间距
属性：line-height
取值：
1、以 px 为单位的数字
2、无单位的数字，表示的是当前字体大小的倍数
ex:
#d1{
font-size:12px;
/*line-height:24px;*/
line-height:2;
}
练习：
1、创建一个网页 03-lineHeight.html
2、创建一个div，200*200，编写一行文本，通过css的方式，使得当前文本绝对居中(水平和垂直都居中)
3、创建一个div，多编写几行文本，模拟1.5倍行间距
十、表格属性
1、表格的常用属性
1、尺寸属性
2、边框属性
3、文本格式化
4、背景属性
5、框模型
margin不能用在td上的
2、表格的特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框(双线边框)模式
2、collapse
边框合并
2、边框边距
作用：设置每两个单元格之间的距离
属性：border-spacing
取值：
1、指定一个数值
水平和垂直间距相等
2、给定两个数值
第一个值：表示水平间距
第二个值：表示垂直间距
两个数值之间使用空格隔开
注意：
必须要在分离边框模式下使用
即border-collapse的值为separate的时候有效
十一、过渡效果 - transition
1、什么是过渡
使得CSS的属性值在一段时间内平缓变化的一个效果
2、语法
1、指定过渡属性
作用：指定哪个属性值在变化的时候使用过渡效果
属性：transition-property
取值：
1、属性名称
2、all
但凡能使用过渡效果的属性值在变化时一律都使用过渡来体现
允许使用过渡效果的属性：
1、所有与颜色相关的属性
2、所有取值为数字的属性
ex:
transition-property:background-color;
2、指定过渡时长
作用：指定在多长时间内完成过渡效果
属性：transition-duration
取值：以 s 或 ms 为单位的数字
1s = 1000ms
300ms = 0.3s = .3s
ex:
transition-duration:0.3s;
3、指定过渡的速度时间曲线函数
作用：指定过渡效果变化速率
属性：transition-timing-function
取值：
1、ease
默认值，慢速开始，快速变快，慢速结束
2、linear
匀速
3、ease-in
慢速开始，加速结束
4、ease-out
快速开始，减速结束
5、ease-in-out
慢速开始和结束，中间先加速后减速
4、指定过渡延迟
作用：当激发过渡效果后，等待多长时间再开始执行操作
属性：transition-delay
取值：以 s 或 ms 为单位的数字
练习：
创建200*200的元素，红色背景
鼠标悬停：
1、尺寸变为400*400
2、背景颜色变为黄色
3、变成圆形
以上三个效果使用过渡效果，在5s中之内完成变换,鼠标移出时，使用过渡效果恢复成原来的状态
5、过渡属性
属性：transition
取值：property duration timing-fun dalay
ex:
transition:color 5s linear,background 3s;
transition:all 5s linear;
十二、定位(重难点)
1、什么是定位
表示的是元素在网页中的位置
2、定位的分类
在css中，定位主要分为以下几类：
1、普通流定位(默认定位方式)
2、浮动定位(重难点)
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
普通流定位，又称为"文档流定位"。是页面中默认的定位方式。典型的"流式布局"。
特点：
1、每个元素在页面中都有自己的位置，并占据一定的空间
2、每个元素都是从其父元素的左上角开始排列的
3、每个元素基本上都是按照从左到右，从上到下的方式排列的
块级元素：从上到下，每个独占一行
行内元素&行内块元素：从左到右，排列不下时换行
4、浮动定位
1、浮动元素的特点
将元素设置为浮动定位,元素将具备以下特点:
1、浮动元素会被排除在文档流之外 - 脱离文档流，那么元素将不在占据页面空间
2、剩余未浮动元素会上前占位
3、浮动定位的元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
4、浮动只能在当前行浮动
5、浮动解决的问题：让多个块级元素在一行内显示的问题
2、语法
属性：float
取值：
1、none
默认值，即无任何浮动效果
2、left
浮动到父元素的左边，或停靠在左边已有的浮动元素的边缘上
3、right
浮动到父元素的右边，或停靠在右边已有的浮动元素的边缘上
3、浮动引发的特殊效果
1、如果父元素显示不下所有已浮动子元素的话，那么最后一个将换行，但有可能被卡住
2、元素一旦浮动起来之后，就将变成块级元素
行内元素一旦浮动，就允许修改尺寸
3、元素一旦浮动起来之后，在未指定宽度的情况下，宽度将由内容来决定
主要针对块级元素
4、文字，图片，行内元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的
4、清除浮动
元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在底下。如果元素不想被压在底下的话，则可以通过清除浮动影响的方式来解决问题。
1、语法
属性：clear
取值：
1、none
默认值，不做任何清除浮动的操作
2、left
清除当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动而压在底下
3、right
清除当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动而压在底下
4、both
清除当前元素前面元素任何一种浮动方式所带来的影响
5、浮动元素对父元素高度的影响
由于浮动元素会脱离文档流，所以是不占据页面空间的，那么也就不占父元素的空间。那么父元素的高度是以未浮动的子元素的高度为准的。
解决父元素的高度：
1、为父元素设置高度
弊端：不一定每次都清楚的知道父元素的高度
2、设置父元素也浮动
弊端：会对父元素后面的元素产生位置的影响
3、设置父元素的 overflow 为 hidden 或 auto
弊端：如果有溢出要显示的元素，也一同被隐藏了
4、在父元素中追加空块级元素，并设置其clear属性为both
5、其他定位
1、相关属性
1、定位方式
属性：position
取值：
1、static - 静态的，默认值
2、relative - 相对定位
3、absolute - 绝对定位
4、fixed - 固定定位
注意：将元素的position设置为relative/absolute/fixed任意一种的话，那么该元素就称为"已定位元素"
2、偏移属性(共4个)
作用：配合着已定位元素实现位置的移动
属性：top / right / bottom /left
取值：以 px 为单位的数值
top:以元素的上边为基准边移动元素
right:以元素的右边为基准边移动元素
bottom:以元素的下边为基准边移动元素
left:以元素的左边为基准边移动元素
2、定位方式 - 相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
2、场合
元素位置微调时使用相对定位
3、语法
属性：position
取值：relative
配合着 偏移属性 实现位置的移动
练习：
创建一个网页 03-position-relative.html
创建一个ul以及四个li
每个li 100*30，背景颜色，左浮动，10px右外边距
1、使用相对定位
当鼠标悬停在li上时，li向左上偏移10px
2、使用margin 完成上述操作
3、定位方式 - 绝对定位(难点)
1、什么是绝对定位 & 特点
1、绝对定位的元素会脱离文档流-不占页面空间
2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化
3、如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化
2、语法
属性：position
取值：absolute
配合着 偏移属性 实现位置的定位
3、注意
绝对定位的元素会变为块级元素
(任何元素变成绝对定位的话，就可以直接修改尺寸)
4、堆叠顺序
1、什么是堆叠顺序
已定位元素们堆叠在一起的排列顺序
2、语法
属性：z-index
取值：无单位的数字，数字越大元素越靠上，默认值为 0
3、注意
1、如果堆叠顺序相同的话，则后来者居上
2、只有已定位的元素才能使用z-index
relative/absolute/fixed
3、父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的
5、定位方式 - 固定定位
1、什么是固定定位
让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变
2、语法
属性：position
取值：fixed
配合着 偏移属性 实现元素位置的固定
3、注意
1、固定定位的元素永远都是相对于body实现位置初始化的
2、固定定位元素会变成块级元素
十三、显示
1、显示方式
1、什么是显示方式
决定了元素是以什么样的方式显示在网页中（块级/行内/行内块）
2、语法
属性：display
取值：
1、none
让元素不显示 - 隐藏
脱离文档流 - 不占据页面空间
2、block
将元素变为块级元素
3、inline
将元素变为行内元素
4、inline-block
将元素变为行内块元素
特点：
1、多个元素能够在一行内显示 - 行内
2、允许修改尺寸 - 块级
2、显示效果
1、可见性属性
属性：visibility
取值：
1、visible
默认值，可见的
2、hidden
隐藏的，未脱离文档流，所以还占据着页面空间
面试：
visibility:hidden和display:none的区别
visibility:hidden 未脱离文档流
display:none 脱离文档流，不占空间
2、透明度属性
属性：opacity
取值：0(完全透明) ~ 1(完全不透明)
测试：
网页中创建两个h1标记，
第一个h1，使用rgba设置红色背景，0.5透明度
第二个h1，设置红色背景，并设置元素的透明度为 0.5
3、垂直方向对齐方式
属性：vertical-align
取值：top / middle / bottom / baseline
1、放在td中
相当于是valign的作用
取值：top / middle / bottom,middle是默认值
2、图片 和 行内块元素中
设置元素两端的文本相对于元素的垂直对齐方式
取值：top / middle / bottom / baseline，baseline是默认值
3、光标
作用：改变鼠标悬停在元素上时鼠标的样子
属性：cursor
取值：
1、default
2、pointer - 小手
3、text - I
4、crosshair - +
5、wait - 等待
6、help - 帮助
#main{
cursor:pointer;
}
十四、列表
1、表现特征
1、上下外边距
2、左内边距
3、列表项标识
4、纵向排列
2、列表属性
1、list-style-type
取值：
1、none (不显示任何标识)
2、disc (实心原点)
3、circle (空心圆点)
4、square (实心方块)
... ...
2、list-style
作用：列表的简写属性
常用用法：
list-style:none;
十五、转换属性 - transform
1、什么是转换
改变元素在页面中的位置，尺寸，角度的一种方式
2、属性
1、转换属性
属性：transform
取值：
1、none ：默认值，无任何转换效果
2、转换函数
如果有多个转换函数的话，中间要用空格隔开
2、转换原点
1、什么是转换原点
转换原点就是转换操作所围绕的一个点
2、语法
属性：transform-origin
取值：使用空格隔开的两个值
1、以 px 为单位的数值
2、以 % 为单位的数值
3、关键字
top / bottom / center / left / right
注意：默认的转换原点是在元素的中心位置处
3、转换效果
1、位移
1、作用
改变元素在页面中的位置
2、语法
属性：transform
取值(函数)：
1、translateX(x)
x表示元素在x轴上的位移距离(横向)
x取值为正，元素右移
x取值为负，元素左移
2、translateY(y)
y表示元素在y轴上的位移距离(纵向)
y取值为正，元素下移
y取值为负，元素上移
3、translate(x)
等同于 translateX(x)
4、translate(x,y)
同时在x轴和y轴上做位移操作
2、缩放
1、作用
改变元素在页面中的大小
2、语法
属性：transform
取值(函数)：
1、scaleX(x)
x表示横向缩放比例
x默认值为1，原始大小
大于1的数字：放大的比例
大于0小于1的数字：缩小的比例
小于0：物极必反
2、scaleY(y)
y表示纵向缩放比例
效果等同于 x
3、scale(value)
value表示x轴和y轴的缩放比例是相同的
3、旋转
1、作用
改变元素在网页中的角度
2、语法
属性：transform
取值：
1、rotate(ndeg)
n为旋转角度
n取值为正，顺时针旋转
n取值为负，逆时针旋转
3、注意
1、转换原点会影响转换效果
2、旋转操作时，会连同坐标轴也一同跟着旋转。会影响旋转之后的位移操作。
十六、附录：目录
附：FSCapture工具（取色和尺寸）和EditPlus（常用设置和配置）
EditPlus:常用设置和配置
字体大小颜色
文本编码格式
tab空格数量
ctrl+B：打开默认浏览器
行号、折叠、竖线
去掉备份功能
tab自动补全
自动生成文字：Lorem （按tab）、Lorem100（按tab生成100个单词）
html新建快捷键：ctrl+shift+N
FastStone Capture 快捷键设置（取色alt+c；尺子alt+r）
工具下载：https://github.com/hilqiqi0/AI/tree/master/3.Web/tools
附：颜色名称
扫一扫
322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
