CSS学习
CSS ⭐⭐⭐
css定义
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现
CSS基本特性
统一性
使用统一的属性解决属性的样式问题，让不同的标签也可以使用统一的属性来
设置样式
便捷性
性主要指的是CSS提供丰富多样的选择器，它可以让我们批量或单个的去选取页面上面的元素去操作样式
分离性
分离性指提原本HTML代码与CSS代码应该是混合在一起写的，现在可以通过某些技术实现结构代码与样式代码的分离，以其实现样式代码的复用
CSS基础语法
CSS的代码大体上面可以写在三个地方
行内样式
<标签名 style="css属性名:css属性值;css属性名2:css属性值2"></标签名>
内部样式块
//内部样式块使用 <style> 标签来封闭构成
<style type="text/css">
h2{ color: red; font-size: 40px; border: 2px solid red; } </style>
<body>
<h2 >这是一个二号标题</h2>
<p>这是一个段落</p>
</body>
外部样式表
些样式单独的构成 一个CSS文件，然后再通过一些特殊的方式去导入进去
\1. 使用 link 标签来进行引入
<link href="./css/07.css" rel="stylesheet" type="text/css"/>
\2. 通过CSS命令 @import 的方式来导入。请注意，它是CSS的命令，只能在CSS的区域书写
<style> @import url("./css/07.css"); </style>
浮动与定位
float浮动
浮动的意思指的是元素脱流当前文档流，
float:left; /*向左浮动*/
float:right; /*向右浮动*/
float:none /*不浮动*/
浮动的影响
(1)脱流会造成父级的高度坍塌---不给父盒子设宽高，子浮动
(2)浮动会脱流当前布局的标准流---不占布局位置
float浮动的本质影响
1. 浮动会脱流，高于普通文档流一个Z轴层级，并且不再占用布局的位置
2. 浮动脱流的元素不再适用于标准流里面的任何居中规范
3. 浮动脱流以后元素无视元素类型，类型一律变成 block 类型
4. 浮动脱流以后的元素会造成宽度丢失，宽度就不再是默认的100%，而是由内容来撑开。但是仍然可以通过 width/height 来重新设置宽度与高度
5. 浮动脱流会形成一个 BFC(块级格式化上下文) ，这样就不会有 margin 的穿透与折叠现象
清除浮动
(1)使用 clear 来清除浮动，恢复父级高度(在浮动元素的后面添加一个块级元素，使用 clear 属性来清除)
<div class="box">
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
<div style="clear:both"></div>
</div>
(2)使用 ::after 伪元素去完成
.clearfix::after{
content: "";
display: block;
clear: both;
}
(3)使用 BFC 去清除浮动overflow:auto
position定位
5种定位方式
（1） 相对定位position:relative（相对定位没有脱流）
1. 相对原来的位置在发生位置偏移
2. 相对定位的元素即使位置发生了偏移，仍然占用原来的位置
3. 相对定位的元素位置发生偏移以后不占用新位置，并且高于标准流一个层级
4. 相对定位的元素无视元素类型， 上下左右以及Z轴都可以设置
（2） 绝对定位 position:absolute
1. 绝对定位会造成脱流（它在当前位置直接脱流），不再占用当前位置，并且高于标准流一个层级
2. 绝对定位默认以浏览器会标准来进行定位，但是如果外层发现了其它定位，则以这个外层元素为标准进行定位
（3）固定定位position:fixed
1. 固定定位也会造成脱流（它在当前位置直接脱流），不再占当前位置，并且高于标准流一个层级
2. 固定定位一定以浏览器为标准来定位，外边的任何因素都不能影响它
3. 固定定位不会随着浏览器滚动条的滚动而发生位置变化
（4）静态定位position:static
静态定位就是清除定位，让原本已经定位了的元素清除掉定位，让元素素回归正常文档流。
（5）粘性定位position:sticky
定位脱流的影响
1. 定位脱流以后元素不占用当前位置，高于Z轴一个层级【一定是在当前位置脱流】，但是可以通过z-index 去调整这个层级
2. 定位脱流以后的元素无视元素类型 ，所有的元素都会变成block块级元素
3. 定位脱流以后的元素会造成宽度丢失，宽度由里面的内容来撑开，但是仍然可以通过
width/height 重新设置
4. 定位脱流以后的元素大小不仅仅可以通过 width/height 来进行设置，还可以通过 left/right 去拉开宽度，可以通过 top/bottom 去拉开高度
5. 定位脱流以后的元素不适于标准流里面的任何居中规范【定位脱流有它自身的居中规范】
6. 定位脱流以后的元素是会形成BFC，所以它没有 margin 的穿透与折叠现象
CSS选择器
基本选择器
| 名称 | 描述 | 例子 |
|---|---|---|
| 标签选择器 | 最根本的选择器，以HTML的标签名为选择器 | h2 |
| ID选择器 | 通过ID去设置，原则上面不能重复 | #p1 |
| class选择器 | 一个标签可以使用多个class样式，一个class可以被多个标签使用 | .aaa |
| 分组选择器 | 将不同的选择器使用 , 来进行连接，这样就实现了一个分组 | p,h2 |
| 后代选择器 | 后代选择器使用空格隔开，空格左右两边的选择器可以是任意类型后代选择器可以是儿子辈，也可以是孙子辈，内部的所有都可以 | #bbb a |
| 子代选择器 | 子代选择器使用 > 来表示，直接子q | ul>li |
| 通配符选择器 | 用*表示页面页面文档样式 | * |
复杂选择器
属性选择器
| 选择器 | 描述 | 用法 |
|---|---|---|
| [属性名^="属性值"] | 代表以什么开头的属性值 | [src^="img"]{border: 10px solid black;}/src属性以img开头的/ |
| [属性名$="属性值"] | 代表以什么 结尾的属性值 | [src$="png"]{ height: 200px; } /src属性以png结尾/ |
| [属性名*="属性值"] | 代表属性值包含特定的值的 | [src="2"]{ width: 300px;} /src属性包含2的*/ |
伪类选择器
:hover 鼠标放上去以后的特殊效果
:active 鼠标点击下去不松开的特殊效果
以上两个效果是网页上面任何元素都可以实现的效果
:link 代表链接未访问之前的状态
:visited 代表链接访问之后的状态
上面的四个状态在链接标签a标签里面都是可以适用的，但是要注意使用顺序，必须按照 :link,:visited,:hover,:active 这个顺序，记得时候记 lv/ha (由爱love生恨hate)
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(xn+y) 选中特定位置的子元素，将元素按x个分成一组，取每个分组里面的第y项
当x>1时，将元素按x个分成一组，取每个分组里面的第y项,如 nth-child(3n+2)
当x=1时，则可以理解为第y项开始一直到最后，如 nth-child(n+3)
当x=0时，则相当于第所有元素的第y项，如 nth-child(3)
当x=-1时，相当于取前y项，如 nth-child(-n+3) 就是取前3项
nth-child(odd)/nth-child(even) 分别代表偶数项与奇数项
以 *-child 结尾的选择器是先找个数，再判断选择器是否符合要求，如 p:nth-child(3) ，则是找到3个子元素，并且第3个元素是p元素
:first-of-type 指定类型第一个子元素
:last-of-type 指定类型最后一个子元素
:nth-of-type(xn+y) 指定类型的分组的子元素，用法与 nt-child(xn+y) 类似以 *-of-type 结尾的选择器是先根据类型查找一遍结果，然后再到这个结果里面去找指定的个数
:checked 代表表单元素里面的单选按钮或复选按钮选中以后的状态
:focus 代表表单元素里面获取焦点的元素的状态
:read-only 用于设置表单元素的只读状态
:disabled 用于设置表单元素被禁用的时候的效果
:root：匹配文档根元素
:not(选择器) 排除指定的选择器
:target：匹配当前活动的target对应的锚点
:enabled：匹配被启用的元素
:in-range：匹配值在指定范围内的元素
:invalid：匹配具有无效值的元素
:valid`：匹配具有有效值的元素
:optional：匹配没有"required"属性的元素
:read-only：匹配具有"readonly"属性的元素
:read-write：匹配没有"readonly"属性的元素
:not 是可以叠加使用的,如下所示
<style>
/* fieldset下面除了p与a之外，所有的标签都变红 */
fieldset *:not(p):not(a){ color: red; }
</style>
<fieldset>
<p>第一个段落</p>
<h2>无题</h2>
<a href="#">我在人间凑数的日子</a> <h1>皮皮虾出品</h1>
<font>这是字体标签</font>
</fieldset>
伪元素选择器
::first-line 选中段落文字的第一行，它是一个伪元素选择器
::first-letter 选中第一个文字，它是一个伪元素选择器
::before 在当前元素内部的最前面去插入内容
::after 在当前元素内部的最后面去插入内容
::placeholder 表单元素输入框里面的 placeholder 属性所生成的样式
::selection 设置段落里面文本选中以后的样式，它也是一个伪元素，它也是一个伪元素
伪类与伪元素选择器的区别
1，在一次选择上面，可以出现多个伪类选择器，但只能出现一次伪元素选择器
2，一个选择器里面，伪元素只出现一次，并且只能在结尾【这句话的意思就是在一个选择器里面，伪类与伪元素可以同时存在，如果同时存在，则伪元素必定在选择器的结尾】
3，伪类使用`:`来进行，而伪元素则可以使用`:`或`::`(低版本的IE必须使用双冒号)
CSS常用样式
宽度和高度
(1). width/height 用于设置元素的固定宽度与固定高度，它们一般使用像素px为单位
(2). min-width/min-heihgt 用于设置元素的最小宽度与最小高度，元素的实际大小是可以大于这个值的，但是不能小于这个值
(3). max-width/max-height 用于设置元素的最大宽度与最大高度，元素的实际大小是可以小于这个值的，但是不能大于这个值的
max-width/max-height/min-width/min-height 它们是有兼容性的，只能在IE9及以上使用
背景样式
(1). background-color 设置背景颜色
(2). background-image 用于设置背景图片
(3). background-repeat 当图片小于容器的时候，背景图片默认会出现一个平铺的行为，我们可以通过这个属性来设置重复平铺行为，它的属性有以下几个
repeat-x 仅仅只在X轴（水平方向）去重复平铺
repeat-y 仅仅只在Y轴（垂直方向）去重复平铺
repeat 在水平方向与垂直方向都去重复平铺，默认就是这个值
no-repeat 不重复平铺
(4). background-position 设置背景图片的位置，它在水平方向可以设置 left/center/right ,在垂直方向可以设置为 top/center/bottom
background-position-x 设置水平方向
background-position-y 设置垂直方向
(5). background-size 用于设置背景图片的大小，它可以设置1~2个值
cover **与** contain
cover 覆盖的意思，背景图片会完全的覆盖容器，但是某一个边可能会发生裁剪而显示不全
contain 包含的意思，容器会完全包含这个背景图片，但是某一人边可能会显示不全
(6)background-origin规定背景图片相对于什么位置来定位,有三个属性值
padding-box：背景图像相对于内边距框来定位。
border-box ：背景图像相对于边框盒来定位。
content-box : 背景图像相对于内容框来定位。
倒影box-reflect
三个属性值
direction 定义方向
above：指定倒影在对象的上边
below：指定倒影在对象的下边
left：指定倒影在对象的左边
right：指定倒影在对象的右边
offset定义反射偏移的距离
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值
mask-box-image定义遮罩图像
取值：
none：无遮罩图像：
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。
eg：
img{
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8));
}
文本效果
(1)text-shadow文字阴影（可以允许多值）
描述：
text-shadow 可向文本应用阴影，规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
语法：
text-shadow: h-shadow v-shadow blur color;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur ：可选。模糊的距离。
color：可选。阴影的颜色
(2)text-stroke(文字描边）
描述：
设置或检索对象中的文字的描边。
语法：
text-stroke： text-stroke-width text-stroke-color
text-stroke-width 设置或检索对象中的文字的描边厚度
text-stroke-color 设置或检索对象中的文字的描边颜色
(3)direction文本描绘
描述：
属性规定文本的方向 / 书写方向
语法：
direction:rtl/ltr
ltr:默认。文本方向从左到右。
rtl:文本方向从右到左
(4)text-align
描述：
指定元素文本的水平对齐方式。
属性值：
left:把文本排列到左边。默认值：由浏览器决定。
right:把文本排列到右边.
center:把文本排列到中间。
justify:实现两端对齐文本效果(补充:最后一行要写：text-align-last:justify;
inherit:规定应该从父元素继承 text-align 属性的值
文字与字体
1. font-size 设置字体的大小
单位像素单位 px，px 像素单位，网页默认的字体大小是16px
pt 字号，网页默认的字号大小是12pt
vw 响应式字体大小，以当前屏幕宽度的百分比为大小。 vw 的全称叫viewport width ，2vw代表当前屏幕宽度的百分之2
vh 响应式字体单位，以当前屏幕的高度百分比在大小，1vh相当于屏幕高度百分之1
rem 它也是一个响应式单位。rem的全称叫root element也就是根元素，网
页根元素就是 html 元素，所以我们可以使用它来做标准1rem相当于一个网页字体，
个网页字体默认就是16px
2. font-family 用于设置字体的样式，这个字体一定是你当前系统里面存在的字体
3. @font-face 自定义定体。它的使用步骤如下
/*第一步：先定义字体*/
@font-face{ font-family:biaogege; /*这个字体的名称我们定义为biaogege*/ src:url(./font/biaogege.ttc); }
/*第二步：使用刚刚定义好的字体*/
.div1{font-family:biaogege; }
4. font-weight 设置字体的粗细
normal 正常
bold 加粗
bolder 更粗（要看当前的字体是否支持）
lighter 变细
字100~900，默认400
5. font-style 设置字体的样式风格
normal 正常
italic 斜体字
oblique 倾斜
6. text-decoration 文字描述样式，后面接收三个属性值，分别在表线条位置，颜色，类型
text-decoration-line underline 下划线
overline 上划线
line-through 中划线
text-decoration-color text-decoration-style solid 实线
dotted 点线
dashed 虚线
double 双线
groove 线槽
wavy 波浪线
7. text-align 用于设置文字的水平排列
常用的属性值有 left/center/right
8. text-transform 文字大小写进行转换
uppercase 大写字母
lowercase 小写字线
capitalize 首字母大写
9. text-indent 首行缩进
一般中文会首行缩进2个字体
10. text-shadow 文字阴影，它有4个属性值设置如下
text-shadow:水平偏移 垂直偏移 阴影模糊度 阴影颜色;
text-shadow: 80px 60px 11px #b41d1d;
水平偏移与垂直偏移的数值遵守规则“上负下正，左负右正”，阴影模糊度数值越大，阴影则越模糊
11.letter-spacing 文字间距
12.word-spacing 英文单词的间距
13.line-height 用于设置行高，行文字上下居中
14.text-align:justify 文字分散对齐
文字溢出省略
单行溢出省略(一定要写宽度width)
/* 第一步：文字不换行 */ white-space: nowrap;
/* 第二步：溢出隐藏 */ overflow: hidden;
/* 第三步：如果是文字则添加省略号 */ text-overflow: ellipsis;
多行文字省略(一定要写宽度width)
/* 多溢文字溢出省略 */
/* 第一步：把当前元素转换成一个-webkit-box */ display: -webkit-box;
/* 第二步：你要在第多少行的时候省略 */
-webkit-line-clamp: 3;
/* 第三步：设置文字的书写方式是自上向下，也就是垂直 */
-webkit-box-orient: vertical;
/* 第四步：溢出隐藏 */ text-overflow: ellipsis;
overflow: hidden;
writing-mode 排列
writing-mode 不仅仅适用于文字，还适用于行内块级元素（与弹性盒子相似）
/*l:left
r:right
t:top
b:bottom
vertical:垂直的 */
writing-mode: lr-tb; 从左到右，从上到下
writing-mode: vertical-lr;垂直，从左往右
writing-mode: vertical-rl;垂直，从右往左
列表样式
1. list-style-type 设置每一项前面的符号 ，常见的属性值有以下几个
none 取消列表项前面的符号
decimal 数字
decimal-leading-zero 以0开始的数字，如 01,02,03 disc/circle/square 这三个属性值以之前保持一致，分别是实心圆，空心圆以及实心矩形
cjk-heavenly-stem 采取古代十天干记表示“甲、乙、丙、丁、戊、己、庚、辛、壬、癸” cjk-earthly-branch 采取古代十二地支表示“子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥”
lower-alpha 小写字母
upper-alpha 大写字母
2. list-style-position 设置列表样式符号的位置，它有两个属性值
outside 列表样式符号在盒子模型 content 的内部外边
inside 列表样式符号在盒子模型 content 的内容里边
3. list-style-image 使用图片去代表列表项前面的符号
4. list-style 它是一个综合属性，是上面三个属性的结合
表格样式
1. 设置表格及单元格的边框
直接在表格上面设置 border=1
2. 单元格与单元格之间的缝隙
cellspaicng="10"
3. 单元格内容的水平与垂直排列
用 align 来实现水平对齐，使用 valign 来实现垂直对齐
CSS计数器
1. counter-reset:计数器名 起始值 ，这个起始值默认可以不写，不写就是0
2. counter-increment:计数器名 自增长值 ，这个自增长值可以不写，不写就是1 3. counter(计数器名) ，将计数的结果通过 ::before/::after 插入到某个元素上面去
边框与轮廓
border边框：
（1）. border 它是一个综合属性，后面接三个属性值，分别代表边框粗细，类型，以及颜色,如果要去掉边框，只需要设置 none 属性即可
（2）. border-color 设置边框的颜色
（3）. border-width 设置边框的粗细
（4）. border-style 设置边框的类型
solid 实线
dotted 点线
dashed 虚线
double 双线
groove 线槽
（5）border-left 左边框
（6）border-right 右边框
（7）border-top 上边框
（8）border-bottom 下边框
边框—border-radius(圆角)：
语法：
border-radius: 10px;
上下左右四个方向圆角均为10像素
border-radius: 10px 30px;
上左下右为10像素 上右下左为30像素
border-radius: 10px 30px 40px;
上左方向10像素 下右方向为40像素
上右下左方向为30像素
border-radius: 10px 30px 40px 50px;(顺时针)
上左方向为10像素 上右方向为30像素
下右方向为40像素 下左方向为50像素
边框— box-shadow（边框阴影）
描述：
box-shadow 属性向框添加一个或多个阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur ：可选。模糊的距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色
inset：可选。将外部阴影 (outset) 改为内部阴影。
边框— border-image（图片）
描述：
box-image 属性向框添加图片
语法：
border-image: source slice width outset repeat;
source:用于指定要用于绘制边框的图像的位置
slice ：图像边界向内偏移
width：图像边界的宽度
outset:边框图像区域超出边框的量。
repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
outline:轮廓
outline-color 颜色
outline-width 宽度
outline-style 类型
outline-offset 轮廓的偏移。执行内负外正
鼠标光标 cursor
属性值
1. pointer 鼠标变成一个手的形
2. help 鼠标光标变成一个问号
3. wait 鼠标光标变成等待状态
4. text 文本状态
5. move 鼠标光标变成可移动状态
6. no-drop 鼠标光标变成禁用状态
7. *-resize ，其中 * 代表方位，方位遵守上北(north)下南(south)，左西(west)右东(east),如ns-resize 就代表南方向可以调整大小，而南北方向就是上下，所以是上下可以调整大小的光标样式
8. progress 光标进度条的状
9. zoom-in 鼠标光标变成放大状态
10. zoom-out 鼠标光标变成缩小状态
11. none 隐藏鼠标的光标
溢出overflow
1. overflow:hidden 溢出的部分隐藏掉
2. overflow: visible; 溢出的部分直接显示，默认就是这个属性值
3. overflow: scroll; 产生滚动条
4. overflow:auto 根据盒子的溢出情况自动决定是否有滚动条
overflow 还可以拆分成x与y轴来进行分开设置，它们如下
overflow-x:scroll
overflow-y:hidden
显示与隐藏
display属性
1. display:none 隐藏元素
2. display:block 块级元素
3. display:inline 行内元素
4. display:inline-block 行内块级元素
visibility属性
1. visibility:visible 设置当前元素可见
2. visibility:hidden 设置当前元素不可见
display与visibility
（1）display:none 隐藏元素以后不再占用位置，而 visibility:hidden 隐藏元素以后仍然占用这个位置
（2）display:none 的隐藏具备一个“株连性”，父级元素如果设置display:none 子级元素是无论如何也不可能再显示的；如果是父级元素设置 visibility:hidden 隐藏子级元素还可以重新设置 visibility:visible 来显示
透明度设置
第一种情况：颜色的透明
rgba颜色模式
第二种情况：让元素透明(opcity具有继承性)
1. opacity:0.5 这样透明度设置为了0.5，如果设置为1代表全不透明，0则代表全透明【 这个属性是有兼容性的，在低版本的IE里面需要参照第二种设置方式】
2. filter: alpha(opacity=50); 后面的50就相当于 50% 的意思【这一个是在低版本的IE里面设置】
滤镜设置
1. 高斯模糊
filter:blur(10px) 后面的像素越大，模糊越明显
2. 透明度设置
filter:alpha(opacity=50); 后面的50就相当于 50% 的意思【这一个是在低版本的IE里面设置】
3. 色相饱和度旋转
filter:hue-rotate(30deg) 这样代表当前颜色在色盘里面旋转30度
4.filter函数
常用函数：grayscale(0%-100%)：将图像转换为灰度图像，100%为全灰
sepia(0%-100%)：将图像转换为深褐色
saturate()：设置图像饱和度
opacity()：设置透明度
blur()：设置模糊度，不接受百分比值
盒子阴影
box-shadow:水平依稀 垂直依稀 阴影模糊度 阴影扩散 阴影颜色 inset(内阴影)
裁剪clip-path
1.矩形裁剪inset
clip-path:inset(上边 右边 下边 左边 round 圆角);
/*如下所示*/
clip-path: inset(20px 30px 50px 10px round 30px);
2.圆形裁剪circle
clip-path:circle(半径 at 圆心横坐标 圆心纵坐标);
/*如下所示*/
clip-path: circle(100px at 300px 100px);
3.椭圆裁剪ellipse
clip-path:ellipse(横轴半径 纵轴半径 at 圆心横坐标 圆心纵坐标);
/*如下所示*/
clip-path: ellipse(200px 100px at 200px 200px);
4.多边形裁剪polygon
clip-path:polygon(x1 y1,x2 y2,x3 y3....);
/*如下所示*/
clip-path: polygon(200px 0,400px 200px,200px 400px,0px 200px);
CSS表单
基础表单
文本输入框text
<input type="text" placeholder="请输入账号" value="biaogege" readonly="readonly" disabled="disabled" />
type="text" 代表文本输入框
value 用于设置表单的默认值
placeholder 是占位符的意思，如果内容为空则显示占位符的内容，如果值不为空则占位
符内容隐藏
readonly 设置只读
disabled 设置禁用
密码输入框password
<input type="password" />
文件选择框file
<input type="file" multiple accept="application/pdf">
multiple 代表多选
accept 代表可选择的文件类型，这个类型是MIME类型
单选框radio
<input type="radio" name="aaa" />男 <input type="radio" name="aaa" checked>女
checked 属性用于默认选中
多个单选框如果要构成一组，它们的 name 属性就必须相同
复选框checkbox
<label><input type="checkbox" name="hobby">看书</label>
<label><input type="checkbox" name="hobby">睡觉</label>
<label><input type="checkbox" name="hobby" checked>玩游戏</label>
下拉选择框select
<select multiple size="7">
<optgroup label="南方">
<option>湖北省</option>
<option>湖南省</option>
<option selected>广东省</option>
<option>福建省</option>
</optgroup>
<optgroup label="北方">
<option>吉林省</option>
<option>黑龙江省</option>
<option>山东省</option>
<option>内蒙古</option>
</optgroup>
</select>
multiple 用于设置多选
size 属性用于设置每次展示多少个选项
optgroup 用于对选项进行分组， label 就是设置这个分组的名称
selected 属性用于设置默认选中项
提交按钮submit
将当前的表单（form）的内容提交到后台服务器
<input type="submit" value="我要注册">
重置按钮reset
<input type="reset" value="我要重来" />
普通按钮button
<input type="button" value="按钮1" />
文本域textarea
实现多行文本输入
<textarea rows="5" cols="30" placeholder="请输入你想说的话"></textarea>
控件组标签fieldset
<fieldset>
<legend><b><font color="red">请填写信息</font></b></legend>
账号：<input type="text"> <br> 密码：<input type="password"> <br>
性别：<input type="radio">男 <input type="radio">女 </fieldset>
/*legend标签可以在横线上写文字*/
预格式化标签pre
<pre>床前明月光 疑是地上霜 举着望明月 低头思故乡 </pre>
CSS3新增表单
| 电子邮件地址输入框 | IE不支持，FireFox4.0，Chrome10.0 | |
|---|---|---|
| 表单类型 | 描述 | 兼容性 |
| url | 网址输入框，输入的网址要加上协议前缀；如http://、https:// 等 | IE不支持，FireFox4.0，Chrome10.0 |
| number | 数值输入框，只能输入数值相关字符，如数字、.(小数点)、-(负号)等 | IE不支持，FireFox不支持，Chrome10.0 |
| range | 滑动条，默认区间是0~100，可以通过max min 属性设定滑动范围 | IE不支持，FireFox不支持，Chrome10.0 |
| data | 日期控件value {string} ：设置或获取日期控件的值，值的格式要为："yyyy-MM-dd"。 | IE不支持，FireFox不支持，Chrome10.0 |
| month | 年月控件，代码示例:
value {string} ：设置或获取控件的值，值的格式要为："yyyy-MM" | IE不支持，FireFox不支持，Chrome10.0 |
| week | 周数控件，代码示例:
value {string} ：设置或获取周数控件的值，值的格式要为："yyyy-Www"。(格式中的W字符不能省略，并且ww周数要为2位数) | IE不支持，FireFox不支持，Chrome10.0 |
| time | 代码示例: value {string} ：设置或获取时间控件的值，值的格式要为："HH:mm",、"HH:mm:ss"或"HH:mm:ss.SSS" | IE不支持，FireFox不支持，Chrome10.0 |
| search | 搜索框，代码示例: | IE不支持，FireFox4.0，Chrome10.0 |
| color | 颜色控件，代码示例: value {string} ：设置或获取颜色控件的值，值的格式要为："#rrggbb"。 | IE不支持，FireFox不支持，Chrome10.0 |
表单属性
form标签属性
| 属性 | 描述 | 值 |
|---|---|---|
| novalidate | 规定当提交表单时不对其进行验证 | novalidate |
| autocomplete | 自动填充 | on ：默认。规定启用自动完成功能。
off ：规定禁用自动完成功能。 |
| autofocus | 属性规定当页面加载时 ,input 元素应该自动获得焦点。 | autofocus |
| height/width | 规定 元素的宽度和高度。只适用于 | px,%,em |
| list | list 属性引用
CSS高级特性
继承性
CSS的继承性指的是父级元素的样式会被后代元素所继承
默认的
可以被继承的样式
color/font-*/text-*/line-height/visibility/letter-spacing
不可以被继承的样式 width/height/display/float/position/border/margin/padding/background-*
能够被继承的多半与样式有关，而不能被继承的多半与布局有关
强制的
设置属性值 inherit（所有属性都具备）
层叠性
层叠性规范当样式发生冲突的时候应该怎么计算。
继承样式<默认样式<内部样式 或 外部样式<行内样式
优先级
| 选择器 | 权重值 |
|---|---|
| * 星号选择器 | 0 |
| 标签选择器 | 1 |
| class 类选择器，伪类选择器，属性选择器 | 10 |
| id选择器 | 100 |
| style行内样式 | 1000 |
| !important | 10000 |
注: 选择器的优先级不是能越位的，eg：十个class选择器比一个ID选择器无法比较
盒子模型
在网页设计中经常用到的CSS技术所使用的一种思维模型。它主要用于布局思维,网 页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。也就是说学习盒子模型就是学习这几个属性
margin外边距
（一）margin定义
指的是两个元素（也叫两个盒子）四周的外边距，它有四个方向分别通过四个属性来表示
默认是以左上为参照---上负下正，左负右正
margin-left 左边距
margin-right 右边距
margin-top 上边距
margin-bottom 下边距
margin 可以拆分成四个方向分开来设置，同时也可以直接通过一个综合属性 margin 来设置。 margin如果在直接设置四个方法的时候，它可以接收1~4个属性值
如果只有1个属性值，则代表4个方向都相同
如果有2个属性值，则第1个值代表上下，第2个值代表左右
如果有3个属性值，则第1个值代表上，第2个值代表左右，第3个值代表下
如果有4个属性值，则按“上，右，下，左”（12点方向顺时针转1圈）四个方向依次赋值
（二）margin居中
块级元素水平居中使用的就是 margin:auto
四个边都应该是 auto 代表，上下的 auto 默认是0
（三）margin的穿透与折叠
穿透现象还是折叠现象都只发生在上下两个方向，左右是不存在的
margin穿透（父子穿透） 指的是本来作用于子元素的 margin 效果却展示在了外层元素上面
margin穿透解决方案
1. 在外层的盒子上面加上一个透明上边框 border-top:1px solid transparent 【这个时候有个隐患，盒子的大小会多1个像素，后期使用 box-sizing 来解决】
2. 使用 BFC 解决，最常见的解决方法就是添加 overflow:auto overflow:auto 本意是溢出处理，但是在这里作为 css hack 用于处理了 margin 穿透
margin折叠（兄弟折叠）指两个兄弟元素之间的上边距与下边距发生了重合
margin的折叠现象（上下边距发生了折叠）。在折叠的时候上下边距谁的值大就表示为谁的效果
margin折叠解决方案
BFC
padding内边距
padding 也可以分别设置四个方向
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
在设置盒子的内边距的时候，默认情况下盒子是会被内边距撑大的，如果想保证盒子的大小不变，这个时候我们应该添加 box-sizing:border-box
box-sizing属性
用于设置盒子模型大小的标准
1. content-box 这是默认值，它代表当前元素的 width/height 是以内容content为标准，盒子的实际占用空间大小为content+padding*2+border*2
2. border-box 它代表当前元素的 width/height 以边框为标准，这个时候盒子实际占用的大小就是所设置的 widht/height
元素类型
块级元素block
块级元素是网页当中最常见的一种标签元素，如 div,p,h1~h6,ul,li,table 等。
块级元素特点
1. 块级元素独占一行，宽度默认是外层元素的100%，高度由内部的内容撑开
2. 块级元素是可以通过 width/height 来设置宽度与高度的
3. 块级元素遵守标准的盒子模型，它的 margin 与 padding 都是正常的
4. 块级元素通过 margin:auto 实现水平居中
过渡transition
/*第一点*/
属性：
1. transition-property 要执行过渡的CSS属性
2. transition-duration 要执行过渡的持续时间
3. transition-timing-function 要执行过渡的时间函数（过渡效果）它主要有以下几个属性值
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 开始和结束比较慢，中间快
linear 匀速进行
4. transition-delay 过渡的延时等待，默认是0s
综合属性:
transition: CSS属性 过渡持续时间 运动曲线 过渡等待时间;
/*第二点*/
过渡的注意事项：
不能执行过渡的属性有以下几个
1. float
2. position
3. z-index
4. display
5. visibility
6. font-* 除了 font-size 以外
7. text-align/text-indent/text-transform
8. cursor
/*第三点*/
过渡的兼容性
1. 以谷歌为核心的浏览器它们有一个共同的特征，它们的兼容性都是在属性前面加 -webkit-
2. 以微软的IE为核心的浏览器它们的兼容性是在属性的前面添加 -ms-
3. 以火狐浏览器为核心的它们的兼容性是在属性前面添加 -moz-
4. 以欧朋为核心的浏览器兼容性是在前面添加 -o
变换transform
变换的时候有2D变换与3D变换，变换主要的行为有位移，缩放，旋转以及变形
位移translate
指元素的位置发生了变化
1. translateX(大小) 在水平方向发生位置移动
2. translateY(大小) 在垂直方向发生位置移动
3. translateZ(大小) 在Z轴上面发生位置移动（前提条件是要开启3D转换模式）
4. translate(X轴方向,Y轴方向) 同时在水平方向与垂直方向发生位置移动
缩放scale
元素的大小发生了变化
1. scaleX(倍数) 在X轴方向发生缩放。默认值是1，大于1则放大，小于1则缩小，等于0则缩放为0
2. scaleY(倍数) 在Y轴方向发生缩放
3. scale(X轴缩放,Y轴缩放) 这个括号里面可以设置1个或2个值，如果设置1个，则水平方向与垂直方向相同，如果设置2个则分别代表水平方向与垂直方向各1个 4. scale3d(X轴缩放,Y轴缩放,Z轴缩放) 同时设置3根轴的缩放
旋转rotate
元素的角度发生变化
1. rotateX(30deg) 沿着X轴发生30度的旋转
2. rotateY(30deg) 沿着Y轴去发生30度的旋转
3. rotateZ(30deg) 沿着Z轴去发生30度的旋转
旋转一般以度 deg 为单位，但是也可以圈 turn 为单位进行， 1turn=360deg
变形skew
1. skewX(度数) 没X轴倾斜变形
2. skewY(度数) 在Y轴上面发生倾斜变形
3. skew(X轴度数,Y轴度数) 同时在X轴的角度或Y轴的角度发生斜体
开启3D变换
3D变换是一种特殊的变换效果，主要是通过以下两种方式来完成的
1. 通过添加视据（透视）来进行3d变换 [透视(perspective)]透视的单位是像素
.box{
width: 400px;
height: 400px;
border: 2px solid black;
perspective: 400px;
}
2. 自身开启3D效果（开启Z轴效果）
tranform-style:flat 保持2D平台空间，默认是这个值
transform-style:preserve-3d 开启3D空间，这样自身就会形成一个Z轴空间
变换的其它属性
1. transform-origin 设置变换起点
trasnform-orign:left;
transform-origin:right top;
一旦设置了变换的起点位置，则在开始变的时候就会沿着这个点来进行
2. backface-visibility 设置当元素经过变换以后如果是背对着用户的时候是否显示
visible 元素背对用户的时候显示，默认是这个属性值
hidden 元素背对用户的时候隐藏
渐变gradient
CSS3里面的渐变指的是背景色的渐变，主要有三种渐变方式，分别是线性渐变，径向渐变以及圆锥渐变 注意：渐变虽然是一个背景色，但是它不能够设置在 background-color 这个属性上面，要设置在background-image 这个属性上面（CSS3里面它把背景渐变色当成一个背景图片来处理）
线性渐变linear-gradient
语法格式如下
/* 标准写法 */
background-image: linear-gradient(to right,blue,green,red);
/* 兼容性写法 */
background-image: -webkit-linear-gradient(right,blue,green,red);
注意：标准写法与兼容写法有区别，兼容性写法里面是没有 to 的关键字，同时它们的颜色相反
linear-gradient 代表线性渐变
to 方向 代表沿着某一个方向发生渐变，它可以使用left/right/top/bottom 来设置方向。
如 to right ， to left top , to right bottom 等方向的后面跟不同的颜色值，不同的颜色值之间使用逗号进行隔开
渐变色的位置
/*基本写法*/
background-image:linear-gradient(to 方向,颜色1 [位置1],颜色2 [位置2],颜色3 [位置3]....);
background-image: linear-gradient(to right,red 50%,blue 70%,green 100%);
重复线性渐变
background-image: repeating-linear-gradient(to right,red 10%,blue 30%);
径向渐变radial-gradient
/*标准写法*/
background-image:radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置2]...);
/*兼容性写法*/
background-image:-webkit-radial-gradient([渐变形状],颜色1 [位置1],颜色2 [位置 2]...);
渐变的形状可以设置为椭圆 ellipse 与圆形 circle
径向渐变的起点位置at
background-image:
radial-gradient(circle at 100px 100px,red,blue,yellow)
重复的径向渐变
background: repeating-radial-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
圆锥渐变conic-gradient
语法格式如下:
background-image:conic-gradient(颜色1 [位置1],颜色2 [位置2]......);
重复圆锥渐变
background: repeating-conic-gradient(red 0% 10%,blue 10% 20%,lightseagreen 20% 30%);
在圆锥渐变里面，如果将开始渐变的颜色与结束渐变的颜色设置为同一个颜色，这样就会形成一个无缝衔接
动画
定义动画
语法格式
/*第一种*/
@keyframes 动画名称{
from{
/*动画开始时候的CSS代码*/
}
to{
/*动画结束时候的CSS代码*/
}
}
/*第二种*/
@keyframes 动画名称{
0%{ /*动画开始*/ }
25%{}
50%{/*动画执行一半的时候*/ }
75%{}
100%{/*动画结束*/ }
}
调用动画
animation:动画名称 动画时间 [等待] [运动曲线] [动画方向] [次数] [暂停/播放] [停止状态]
1. animation-name 设置动画的名称
2. animation-duration 设置动画播放一次的持续时间
3. animation-iteration-count 设置动画播放的次数，它的【默认值是1】。如果希望动画一直执行下去，我们要使用 infinite 这个属性值，它代表无穷大
4. animation-timing-function 动画播放的时间函数，也叫动画的动去曲线，它的属性值与过渡的值一样，其中 linear 代表匀速，它的【默认值是ease】
5. animation-delay 动画的延时等待，它的【默认值是0】这里的动画的延时设置不仅可以设置为正数，还可以设置为负数。正数代表延时，负数代表提前
6. animation-play-state 代表动画的播放状态，它有两个属性值
running 动画的运行状态，【默认值是这一个】
paused 暂停状态
7. animation-direction 设置动画的播放方向，它有以下几个属性值
normal 默认方向【默认值】
reverse 逆反方向
alternate 正反交替运行
alternate-reverse 先反再正交替运行
8. animation-fill-mode 设置动画结束时候停留在哪个状态，它有三个属性值
forwards 让动画结束的时候停留在结束状态
backwards 让动画结束的时候停留在开始状态【默认值】
both 开始或结束状态都可以
Animate.css动画网
使用：
1.引入animate.css文件
<link rel="stylesheet" href="animate.min.css">
//或者href="http://www.bootcdn.cn/animate.css/"
2. 给指定的元素加上指定的动画样式名
<div class="animated fadeInUp"></div>
弹性盒子
弹性盒子的属性
1. display:flex 当一个盒一旦设置这个属性以后它就变成了一个盒子。一个元素一旦变成弹性盒子以后，内部就会多出两根轴，分别是横轴 row 与纵轴 column
2. flex-direction 设置弹性的方向【官方的说法叫设置主轴的方向】，它的属性值有4个，默认值是 row
row 横轴
row-reverse 反转的横轴
column 纵轴
column-revrese 反转的纵轴
3. justify-content 设置内部元素在主轴上面的排列行为，它的属性值有下面几个
flex-start 弹性开始的地方
flex-end 弹性结束的地方
center 居中
space-between 使用空间撑开元素到两边
space-around 空间环绕
space-evenly 每个元素的空间均匀分布
4. align-items 设置内部元素在副轴上面的排列行为，它的属性值有以下几个
flex-start 弹性开始的地方
flex-end 弹性结束的地方
center 居中
baseline 文字基线对齐
stretch 拉伸【默认值】
5. flex-wrap 当内部的元素在主轴上面排列不下的时候，通过这个属性可以设置是否换行
nowrap 不换行【默认值】
wrap 换行
wrap-reverse 换行，但是要翻转方向
6. flex-flow 它是一个综合属性，结合了 flex-direction 与 flex-wrap 两个属性
flex-flow:row wrap; /*主轴为row 并且换行*/
flex-flow:column nowrap; /*主轴为column 并且不换行*/
7. align-content 多主轴设置。当弹性盒子内部的元素如果出现了换行以后，则会多出几根主轴，这个属性就是用于设置多个主轴的排列，所以这个属性也叫副轴上面的主轴排列
flex-start
flex-end
center
space-between
space-around
space-evenly
8. align-self 设置自身元素在父级的副轴上面的排列，它的属性值与 align-items 保持一致
9. flex:数值 代表当前元素占弹性盒子剩下主轴空间的百分比，我们经常会使用它进行弹性切割
10. order 用于弹性盒子内部元素的排序，默认值都是0，值越大，越在弹性的结束的地方
弹性盒子的影响
对自身的影响
1. 一个盒子变成弹性盒子以后， 内部会多两根轴，元素沿主轴方向排列
2. 内部的 <br> 是不能实现的换行，即使在主轴上面排列不下了，也不换行，它会压缩内部的子元素
3. 弹性盒子在主轴方向设置 overflow 是没有效果的
4. 弹性盒子自身会形成一个 BFC ，它会不有 margin 穿透的现象存在
对子元素的影响
1. 弹性盒子内部子级元素无视元素类型，所以元素都变成了 block 块级元素
2. 弹性盒子内部的子级元素宽度主轴大小会丢失（宽度丢失），副轴会拉伸，但是仍然可以通过width/height 去设置宽度与高度
3. 弹性盒子内部的子元素仍然可以使用定位，但是就是不能使用浮动
移动端布局
1. 视口的设置
视口指的是网的展示窗口叫 viewport ,我们在进行移动端的网页开发之前，我们一定要设置视口。视口设置如下
<meta name="viewport" content="width=device-width, initial- scale=1.0,user-scalable=no,minimum-scale=1.0,maximum=1.0">
width=device-width 设置视口的宽度与设备的宽度相同
initial-scale=1.0 设置初始缩放1.0
user-scalable=no 设置不允许用户缩放
minimum-scale 设置最小缩放
maximum-scale 设置最大缩放
initial-scale 缩放
2. 全屏盒子的设置
(1) 使用固定定位
固定定位一定以浏览器为标准,设置宽度与高度的时候就以浏览器为参照。而这个时候的浏览器就因为设置了 viewport 所以就与设备保持一致了
(2) 设置html,body的方式(使用较多)
html,body{ height: 100%; }
#app{
width: 100%;
height: 100%;
background-color: deeppink;
}
(3)使用CSS3的新单位vw、vh来进行(常用)
(4)采用非标准模式开发（不推荐使用）
去掉了头部声明 <!DOCTYPE html> 这个时候就采用了非标准模式，而非标准模式下面HTML的高度就是100%
3.移动端尺寸
320px 375px 414px 768px
Motro/iphone5 iphone 6/7/8
（1）物理分辨率：横向像素个数*垂直像素个数
（2）DOR：设备像素比，由厂商设置，一般都为2，也有3，1.5
（3）PPI：屏幕像素密度
（4）device-width(逻辑分辨率)：物理分辨率/（DPR*scale）
（5）scale：屏幕缩放比例。默认为1
（6）移动端设计稿尺寸一般为640px或者750px
移动端布局解决方案
(1)流式布局（百分比布局）
将heigth,width,padding,margin不用固定数值，改用百分比
(2)rem布局
1.rem：font size of the root elment简写---相对根元素的font-size大小 本质：1rem默认为16px,将宽高等用rem替代
一般将1rem换算为100px or 10px
2.换算：device-width/ 设计稿尺寸 *100 or 10（移动端设计稿一般为640或750）
3.设置rem：
/1.通过js设置rem
var srceenW=window.getComputedStyle(document.body,null).width.replace("px","");
document.docuemntElememt.style.fontSize=screenW/750*100+'px';
//750为设计搞宽度
/2.通过calc设置rem
font-size:calc(100vw /750 *100);//1rem=100px
/3.media媒体查询
App布局规范
1. App的titleBar与tabBar应该都是固定的
2. 在布局之前最好弄清楚页成结构，如果需要实现页面或盒子切割可以直接使用弹性切割
3. App布局优先使用弹性布局
4. 移动端尽量不要设置固定宽度，使用元素的特性让它自动展开宽度【块级元素的宽度默认就是父级的100%】 5. 移动端尽量不要设置盒子宽度为 100% ，如果不设置这个固定宽度则我们可以通过 margin 去压缩这个盒子的宽度
媒体查询和响应式布局
媒体查询
媒体查询可以通过css实现响应式布局中最重要的一步，它可以根据屏幕的大小自动的做出样式调整
内部引入
@media only 媒体类型 and (min-width:最小宽度) and (max-width:最大宽度){ /*这里写CSS代码*/ }
媒体类型mediatype；all 所有媒体类型
printer 打印机或打印机预览
speech 屏幕阅读器等设备
screen 电脑 平板 手机...
外部引入
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="xxx.css">
media feature参数：device-width/height:设备宽高
width/height:浏览器可视宽高
orientation：portrait---竖屏
orientation:landscape---横屏
/*设备屏幕在0~768px之间*/
@media only screen and (min-width:0px) and (max-width:768px){ .box{background-color:red; } }
/**设备屏幕大于或等于769px*/
@media only screen and (min-width:769px){ .box{background-color:blue; } }
响应式布局
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间过长
浙公网安备 33010602011771号