web的学习笔记
前端学习的笔记目录
- 一、前端简介
-
- 1、什么是前端
- 2、前端的发展历程
- 3、大前端能做什么
- 4、大前端的前景如何
- 二、HTML
-
- 1、HTML是什么
- 2、浏览器
- 3、W3C
- 4、基本语法
- 5、标签分类
-
- （1）、h标签
- （2）、段落标签
- （3）、换行标签
- （4）、水平线标签
- （5）、加粗/强调显示
- （6）、斜体
- （7）、删除线标签
- （8）、扩展
- （9）、特殊符号
- （10）、列表标签
- （11）、图片标签路径
- （12）、超链接标签
- （13）、表格标签
-
- 1. 基本格式
- 2. table属性
- 3. table中的 行tr 属性（tr=table+row）
- 4. table中的 单元格td 属性（td=table+date）
- 5. table中的行列合并属性
- （14）、表单标签
- 三、CSS
-
- 1、CSS是什么
- 2、语法
- 3、样式的创建
-
- 1）、外部样式
- 2）、行内样式
- PS：不同路径样式的优先级
- 3、css选择器
-
- 1）、元素选择器/类型选择器（element选择器）
- 2）、class选择器
- 3）、id选择器
- 4）、通配符
- 5）、群组选择器
- 6）、包含选择器/后代选择器
- 7）、伪类选择器
- 8）、选择器的权重
- 4、css属性（css属性和属性值的定义）
-
- 1）、css文本属性
-
- **字体大小**
- **字体类型**
- **字体颜色**
- **字体加粗**
- **字体倾斜**
- **文本水平对齐**
- **行高**
- **首行缩进**
- **字间距**
- **文本修饰**
- **文字简写**
- **检索大消息**
- 2）、css列表属性
-
- **定义列表符和样式**
- 将图片设置为列表符和样式
- 设置列表项标记的放置位置
- 简写
- 3）、css背景属性
-
- 背景颜色
- 背景图片
- 背景图片的平铺
- 背景图片的定位
- 背景图片的固定
- 背景图片的大小
- 背景的复合属性
- 4）、css边框属性
- 5）、css浮动属性
- 6）、溢出属性
-
- （1）、空余空间
- （2）、省略号显示
- 7）、盒子模型
- 8）、元素内容相互转换
- 9）、二级菜单
- 10）、定位
-
- （1）静态定位
- （2）、绝对定位
- （3）、固定定位
- （4）、粘性定位
- （5）、定位中的层级
- （6）、通过定位实现水平垂直居中
- 11）、定位和浮动的区别
- 12）、锚点
- 13）、精灵图
- 14）、宽高自适应
-
- （1）细则
- （2）浮动元素的高度自适应
- （3）浮动元素的自适应-伪元素
- 15)、窗口自适应
- 5、两栏模型
-
-
- calc函数
-
- 6、三栏布局
- 四、CSS进阶学习
-
- 1、表单进阶-单选
- 2、上传文件和隐藏字段
- 3、下拉菜单
- 4、文本域
- 5、字段集
- Ap1、H5新增内容
-
- Ap1.1、H5介绍
- Ap1.2、新增语义标签
- Ap1.3、新增的音频/视频标签
-
- 音频
- 视频
- Ap1.4、新增表单
-
- input
- 选项列表
- Ap1.5、新增表单属性
- Ap2、CSS3新增内容
一、前端简介
1、什么是前端
例如我们点开抖音所看到的界面就是前端，而我们用户看不到的，例如：抖音企业号商家管理后台、抖音客服系统、抖音云控系统等等，是和用户交互的
2、前端的发展历程
前端的发展，在05到06年，它属于美工范畴，主要制作一些静态网页。06到10年，我们利用网络三剑客用于网页制作动画。11到15年，web开发越来越重要了，HTML5基本奠定了它在互联网中的地位。
3、大前端能做什么
1）、网站
网站又分为PC端和移动端，PC端的有：京东官网、B站官网等等。移动端网站又称M站，例如：猫眼电影、京东等等
2）、管理系统
例如学校官网中教务系统中对学生的管理系统，又例如小程序的管理系统。
3）、APP
例如微信内嵌的公众号、咸鱼客户端等。
4）、小程序
例如微信小程序，滴滴出行、猫眼电影。
5）、数据可视化
我们可以将一些大数据做的可视化，甚至可以做出一些交互系统。
6）、智能电视
智能电视的交互页面
7）、桌面应用
指的是一些电脑上可装机使用的软件。严格上他也是混合开发的。
8）、网页游戏
例如PvZ
9）、工具和后端
可以为后端开发制作工具等，相辅相成
4、大前端的前景如何
大前端所利用的语言是Javascript是近五年全世界使用最多的语言。
二、HTML
1、HTML是什么
HTML是一种标记语言
2、浏览器
各种乱七八糟的浏览器
3、W3C
同一各大浏览器的语言规范。
HTML好比汽车框架，CSS就是汽车内外饰，JS就是让汽车做出一些动作。
4、基本语法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页title>
head>
<body>
<center>
AAAA，<br/>BBBB
center>
body>
html>
（1）标记语法
-
常规标记
<标签>这是双标签 -
但标签
例如
（2）VSCode
合理利用，注意文档声明和字符编码。
（3）语义化
没有CSS时为了呈现更好的结构，我们就需要语义化。
5、标签分类
（1）、h标签
`
`
（2）、段落标签
（3）、换行标签
（4）、水平线标签
（5）、加粗/强调显示
或者强调内容
（6）、斜体
或
（7）、删除线标签
（8）、扩展
下划线
下标
上标
（9）、特殊符号
尖角号：<，>
空格： ， 后者占据一个中文字符的宽度，且不受字体影响
版权：©©
商标：&rtade;™，®®
div标签没有具体含义，独占一行
span没有具体含义，主要用于对于文本独立修饰的时候，内容多宽就占用多宽的距离
（10）、列表标签
- 无序列表
<ul>
<li>li>
<li>li>
ul>
- 有序列表
<ol type="" start="">
<li>li>
<li>li>
ol>
可以定义由数字还是字母和从和开始的有序列表。
3. 自定义列表
<dl>
<dt>dt>
<dt>dt>
dl>
（11）、图片标签路径
alt=""会在图片无法显示的时候会出现提示。
title=""鼠标移上去会由图片名称提示
（12）、超链接标签
能够实现在不同页面的跳转
在当前窗口打开（默认值）
2. target="_blank" 在新窗口打开。
如果需要设置点击图片跳转，则需要代码：
<a href="网页地址" target="_blank">
<img src="图片地址" alt=" ">
a>
（13）、表格标签
1. 基本格式
<table>
<tr>
<td>1td>
<td>2td>
tr>
<tr>
<td>atd>
<td>btd>
tr>
table>
Q：如何快捷创建一个2x2的表格？
A：table>tr>td*2+回车
Q：如何快速创建拥有两个tr的表格呢？
A：table>(tr>td*2)*2+回车或者table>tr*2>td*2+回车
2. table属性
宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 alight="left/right/center"
单元格与单元格之间的间距 cellspacing=""
单元格与内容之间的空隙 cellpadding=""
3. table中的 行tr 属性（tr=table+row）
高度 height
背景颜色 bgcolor
文字水平对齐 align="left/right/center"
文字垂直对齐 valign=“top/middle/bottom”
注意：tr之中的宽度受父元素table的限制，但是他的高度可以自由设置
4. table中的 单元格td 属性（td=table+date）
宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=:left/right/center"
文字竖直对齐 valign="top/middle/bottom"
注意宽度和高度的影响对象：
如果一个单元格设置了宽度，将会影响这一整列的宽度
如果一个单元格设置了高度，将会影响这一整行的高度
背景颜色、对齐方式只会影响那一个单元格
5. table中的行列合并属性
合并列：colspan="numble"
合并行：rwospan="numble"
其中numble指的是需要合并的列数
注意：合并行列的属性必须给td。
合并后后面的表格将会被吞掉消失，并且不能合并成L型
示例1：
代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50" align="center">
<td width="100">会员姓名td>
<td width="150">td>
<td width="100">出生日期td>
<td width="150">td>
tr>
<tr height="50" align="center">
<td width="100">身份证号td>
<td colspan="3">td>
tr>
<tr height="50" align="center">
<td width="100">通讯地址td>
<td colspan="3">td>
tr>
<tr height="50" align="center">
<td width="100">联系电话td>
<td colspan="3">td>
tr>
<tr height="50" align="center">
<td width="100">会员卡号td>
<td colspan="3">td>
tr>
table>
body>
html>
示例2：
目标样式：
代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<table border="1" cellspacing="0px" width="1000px" style="margin-left:auto;margin-right:auto;">
<caption>居民家庭信息登记表caption>
<tr align="center">
<td style="width:70px">户主姓名td>
<td style="width:50px">性<br/>别td>
<td style="width: 150px">身份证号码td>
<td>文化程度td>
<td style="width:50px">民<br/>族td>
<td>入党时间td>
<td>党员关系<br/>所在单位td>
<td>现工作单位<br/>及职务td>
<td rowspan="2" width="70px">
<form>
<input type="checkbox">在职
<input type="checkbox">退休
<input type="checkbox">离休
form>
td>
tr>
<tr>
<td height="50px">td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr align="center">
<td height="50px">户口单位td>
<td colspan="2">td>
<td>户口变动<br/>情况td>
<td colspan="2">td>
<td>爱好<br/>特长td>
<td colspan="2">td>
tr>
<tr align="center">
<td>配偶姓名td>
<td>性<br/>别td>
<td>身份证号码td>
<td>文化程度td>
<td>民<br/>族td>
<td>入党时间td>
<td>党员关系所在单位td>
<td>现工作单位<br/>及职务td>
<td rowspan="2">
<form>
<input type="checkbox">在职
<input type="checkbox">退休
<input type="checkbox">离休
td>
tr>
<tr>
<td height="50px">td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr align="center">
<td height="50px">户口单位td>
<td colspan="2">td>
<td>户口变动<br/>情况td>
<td colspan="2">td>
<td>爱好<br/>特长td>
<td colspan="2">td>
tr>
table>
<table border="1" cellspacing="0px" width="1000px" style="margin-left:auto;margin-right:auto;">
<tr align="center">
<td rowspan="5" width="30px">家<br/>庭<br/>成<br/>员<br/>及<br/>居<br/>住<br/>成<br/>员td>
<td width="80px">与户主关系td>
<td width="60px">姓名td>
<td>性别td>
<td>身份证号码<br/>（或出生年月）td>
<td>文化<br/>程度td>
<td>户口单位td>
<td>现工作单位<br/>及职务td>
<td>政治面貌td>
tr>
<tr height="50px">
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr height="50px">
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr height="50px">
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr height="50px">
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
<td>td>
tr>
<tr align="center">
<td colspan="2">家庭成员计划生育需备案内容td>
<td colspan="7">td>
tr>
<tr align="center">
<td colspan="2">育龄妇女计生管理单位td>
<td colspan="2">td>
<td>计划措施td>
<td colspan="2"> <form>
<input type="checkbox">放环
<input type="checkbox">结扎
<input type="checkbox">避孕套
<input type="checkbox">其他
td>
<td>领取独生子女证时间td>
<td colspan="2">td>
tr>
<tr align="center">
<td colspan="2">志愿服务<br/>项目td>
<td colspan="7">
<input type="checkbox">慰问走访
<input type="checkbox">心理辅导
<input type="checkbox">社区调查
<input type="checkbox" disabled>医疗服务
<input type="checkbox">社区代购
<input type="checkbox">环保绿化
<br/>
<input type="checkbox">维修服务
<input type="checkbox">电脑技术
<input type="checkbox">社区安全
<input type="checkbox">文化体育
<input type="checkbox">功课辅导
<input type="checkbox">其他
td>
tr>
<tr align="center">
<td colspan="2">优抚对象td>
<td colspan="5">
<input type="checkbox">军属
<input type="checkbox">烈属
<input type="checkbox">伤残
<input type="checkbox">复员
<input type="checkbox">退伍
td>
<td>是否低保td>
<td>
<input type="checkbox">是
<input type="checkbox">否
td>
tr>
<tr align="center">
<td colspan="2">家庭成员<br/>有无残疾td>
<td colspan="4">td>
<td>家庭成员<br/>有无重大疾病td>
<td colspan="4">td>
tr>
<tr align="center">
<td colspan="2">婚姻状况td>
<td colspan="3">
<input type="checkbox">未婚
<input type="checkbox">已婚
<input type="checkbox">离婚
td>
<td>结婚登记<br/>日期td>
<td>td>
<td>违反计划生育<br/>及处理情况td>
<td>td>
tr>
<tr align="center">
<td colspan="2">房屋产权td>
<td>
<input type="checkbox">自有
<input type="checkbox">租住
td>
<td>产权人td>
<td>td>
<td>身份证号td>
<td>td>
<td>手机号td>
<td>td>
tr>
<tr align="center">
<td colspan="2">家庭车辆<br/>号码td>
<td colspan="4">td>
<td colspan="3">是否愿意将户口迁入本地：
<input type="checkbox">是
<input type="checkbox">否
td>
tr>
<tr align="center">
<td colspan="2">参加何种<br/>养老保险td>
<td colspan="3">
<input type="checkbox">城镇职工
<input type="checkbox">城镇居民
<input type="checkbox">农村
td>
<td colspan="2">参加何种<br/>医疗保险td>
<td colspan="3">
<input type="checkbox">城镇职工
<input type="checkbox">城镇居民
<input type="checkbox">新农舍
td>
tr>
<tr align="center">
<td colspan="2">其他情况<br/>说明td>
<td colspan="8">td>
tr>
table>
body>
html>
（14）、表单标签
<form method="get或post" action="向何处发送表单数据">
<input type="">
form>
input属性（单标签）
type：
）这个属性是用来定义输入框类型）
a) 文本框 type="text" placeholder="" 密码框 type="password"
属性 placeholder 描述输入字段预期值的简短的提示信息，兼容到IE8上
b) 提交框 type="submit" 和
c) 按钮框 type="button"单纯的按钮效果
d) 重置框 type="reset" 清空的效果
按钮的value属性
value是用在type="submit"（提交按钮）中的，用于修改按钮上的字
<form>
<input type="submit" value="login">
form>
提交数据的地址
<form action="http://www.baidu.com">
username：<input type="text" placeholder="Enter Your Username" name="username">
<br/>
password：<input type="password" placeholder="Enter Your Password" name="password">
<br/>
<input type="submit" value="login">
form>
单纯的添加action不会使页面的内容提交至百度网址，而需要我们在input中添加name属性。
属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
form当中method属性的post和get的区别？（后续在JS中会详细说）
1、get是 从服务器上获取数据，post是向服务器发送数据。
2、get是把参数数据队列加到提交表单的Action属性所指的URL中，值和表单各个字段一一对应，在URL中可以看到。Post是通过http post机制，将表单内各个字段与其内容放置到HTML HEADER中一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3、对于get方式，服务器端用==Request.QueryString获取变量的值，而post方式，服务器端用Request.Form获取提交数据。
4、get传送的数据量较小，不能大于2kb。post传输的数据较大，一般被默认为无上限，但理论上在IIS4中最大量为80kb，ISS中为100kb
5、get的安全性非常低，post的安全性较高。但是执行率还是get较好。
三、CSS
1、CSS是什么
Cascading Style Sheet 层叠样式表
简单来说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C的CSS3.0
他是用来表现XHTML和XML等样式文件的计算机语言。
不过我们需要先学1998年W3C推出的CSS2.0
2、语法
1）每个CSS样式由两个部分组成，即选择符和声明，声明由分为属性和属性值
2）属性必须放在花括号内，属性和属性值用冒号链接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，谁能告知与属性值不分先后顺序，用空格隔开。
5）在书写样式过程中，空格、换行等操不影响属性显示。
3、样式的创建
1）、外部样式
我们可以利用link或者import引入css文件。
<style>
@import url(css地址);
style>
扩展知识：link和import之间的区别？
- 差别1、本质差别：link属于XHTML标签，而@import完全是css提供的一种方式。
- 差别2、加载顺序的差别：当一个页面被加载的时候（就是被浏览器加载的时候），link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完之后在被加载。所以有的时候浏览@import加载css的页面是会开始没有样式（就是闪烁），网速慢的时候会比较明显。
- 差别3、兼容性的差别：@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link则不会有这个问题。
也可以直接写在标签上，这称之为行内样式。
2）、行内样式
行内样式就是在标签上直接写，但是这样看的太乱了!
<h1 style="color:red;">早安h1>
PS：不同路径样式的优先级
就近原则
如果我们内外部和行内样式同时写，行内优先级最高，内外部谁写在后面谁的优先级就较高。
如果外部有的属性，而行内没有，则外部的属性会被保留。
当然，这个顺序是可以更改的，只要我们在任意属性后面!important就可以将优先级设置为最高。
3、css选择器
1）、元素选择器/类型选择器（element选择器）
语法：元素名称{属性名:属性值;}
2）、class选择器
语法：.class名{属性:属性值}
一般我们写在css文件中。
说明：
A）当我们使用class选择符时，应该先为每一个元素定义一个class名称
B）class选择符的语法格式是：
html中：
<div class="top">顶部div>
css中：
.top{
width:200px;
height:100px;
background:green;
}
用法：class选择符更适合定义一类样式
如果一个标签有多个class，则优先使用style标签中后者的属性。（不管class=""双引号里的顺序）
3）、id选择器
语法：#id名{属性:属性值;}
说明：A）当我们使用id选择符时，应当为每一个元素定义一个id属性
如：
B）id选择符的语法格式时“#”加上自定义的id名
如：
#box{
width:300px;
height:200px;
}
C）起名时要去英文名，不要用关键字：所有标记和属性都是关键字
如：head标记
D）一个id名称只能对应文档中一个具体的元素对象。（唯一性）
对于说明中的D，解释为：一个标签不能不能拥有两个或者多个id（区别于class）
错误示范：
<div id="box1 box2">111div>>
id少用！！！
4）、通配符
语法：*{属性:属性值;}
其含义就是指所有元素
`*{
margin:0;
padding:0;
}
margin是外边距，padding是内边距
代表清除所有元素的默认边距值和填充值。（貌似它就这么一个用法）
5）、群组选择器
语法：选择符1、选择符2、选择符3……{属性:属性值;}
例如：
#top1,#nav1,h1,.box{
width:960px;
}
说明：当有多个选择符应用相同的声明时，可将选择符用“,”隔开，合并为一组吗，选择符里可以有id选择符也可以有class选择符
此外：margin:0 auto;实现盒子的水平居中
6）、包含选择器/后代选择器
语法：选择符1 选择符2{属性:属性值;}
说明：含义就是选择符1中包含的所有选择符2；
用法：当我的元素存在父元素的时候，我要改变本身的样式，可以不另加选择符，可以直接用包含选择器的方式解决。
例如：
HTML中：
<ul class="list">
<li>li>
<li>li>
<li>li>
ul>
CSS中：
.list li{
background:red;
}
后代选择器是从右往左匹配的，上例中：先找li，再找包含着li的class="list"的标签
7）、伪类选择器
语法：
a:link{属性:属性值;}超链接的初始状态；
a:visited{属性:属性值;}超链接被访问后的状态；
a:hover{属性:属性值;}鼠标悬停，即鼠标滑过超链接的状态；
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下超链接的状态；
说明：
A）当这四个超链接伪类选择符联合使用的时候，应当注意他们的顺序，正常的顺序为：a:link，a:visited，a:hover，a:active，错误的顺序有时候会让超链接的样式失效；（写在后面的优先级高）
B）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中。
例如：a{color:red;} a:hover{color:green;}表示超链接的初始和访问后的状态一样，鼠标滑过和点击时的状态一样。
8）、选择器的权重
当多个选择器作用与同一个元素，且都为他定义了样式，如果属性发生冲突，会选择权重来执行。
内联样式>id选择器>class选择器>元素选择器
| 选择器 | 权重 |
|---|---|
| 类型（元素）选择器 | 0001 |
| class选择器 | 0010 |
| id选择器 | 0100 |
| 包含选择器 | 包含选择符的权重之和 |
| 内联样式 | 1000 |
| !important | 10000 |
css选择器解析规则1：当不同选择符冲突时，高权重的会覆盖掉地权重的。
规则2：相同权重时，样式遵循就近原则（那个选择符最后定义，就采用哪个选择符样式）
4、css属性（css属性和属性值的定义）
1）、css文本属性
字体大小
font-size单位是px，浏览器默认是16px，设计图常用12px
字体类型
font-family当字体是中文字体、英文字体中间有空格时，需要加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有则解析第二个字体，以此类推
字体颜色
color可以用英文、十六进制表示和三原色（rgb）数值表示
字体加粗
font-weight属性值：font-weight:bolder（更粗）/bold（加粗）/normal（常规）
字体倾斜
font-style属性值：font-style:italic（斜体字）/oblique（倾斜文字）/normal（常规）
文本水平对齐
text-align属性值：text-align:left水平靠左、text-align:right水平靠右、text-align:center居中、text-align:justify两端对齐（只对多行起作用）
行高
line-height当我们行高的值=height的值时，可以实现单行文本垂直居中
首行缩进
text-indent可以取负值，也只对第一行起作用
字间距
letter-spacing控制文字之间的距离
文本修饰
text-decoration属性值：text-decoration:none（无）/underline（下划线）/overline（上划线）/line-through（删除线）如果需要添加多条线，需要用空格隔开，我们也可以用none将a链接的下划线取消掉
文字简写
font他是字体倾斜、字体加粗、梯子大小/行高和字体类型的综合缩写，写法是：font:italic 800 30px/80px "宋体";顺序不能改变，必须同时指定font-size和font-family属性时才能起作用
检索大消息
text-transform属性值：capitalize（所有单词首字母大写）、lowercase（所有单词小写）、uppercase（所有字母大写）、none（无）
2）、css列表属性
定义列表符和样式
list-style-type:disc（实心圆）/circle（空心圆）/square（实心方块）/none（无符号）;
将图片设置为列表符和样式
list-style-image:url();
设置列表项标记的放置位置
list-style-position:outside（列表的外面，默认值）/inside（列表的里面）;
将前面的点放在列表的外边还是里边
简写
list-style:none;去掉列表符号
3）、css背景属性
背景颜色
background-color:颜色;
背景图片
background-image:url(地址)
背景图片的平铺
background-repeat:ne-repeat（不平铺）/repeat（平铺）/repeat-x（水平x轴平铺）/repeat-y（竖直y轴平铺）
背景图片的定位
background-position:x yx水平位置和y垂直位置是定位值，也可以说是距离左边、距离上边的距离，可以给负值；也可以用单词组合：left、center、right和top、center、bottom任意两种组合，默认是左上（left top）；
背景图片的固定
background-attachment:scroll（滚动）/fixed（固定，固定在浏览器窗口里面，固定后就相对于浏览器窗口了可以做视差效果。
背景图片的大小
background-size:400px 400px;我们可以取数值，也可以取百分比"100% 100%"（相对于图片所在的盒子），还可以用单词：cover：它可以把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（可能会导致部分无法显示）；contain将图像放大至最大尺寸，使其宽度和高度完全适应内容区域，铺不满盒子，留白。
背景的复合属性
1、需要用空格隔开
2、顺序可以换（但是图片定位的两个值前后不能调换）
3、只可以取一个值，并且放在后面的值会覆盖掉前面的值
4、background-size属性只能单独使用
4）、css边框属性
1.*{padding：0;}清除内边距
2.常见边框
1）solid 单实线
2）double 双实线
3）dashed 线段线
4）dotted 点状线
外边距特性：
1、垂直方向上，外边距取最大值
2、水平方向上，外边距合并处理
3、父子嵌套边距（子元素上有间距）
1）、margin→padding
2）、父盒子设置边框
3）、加浮动
4）、父盒子加overflo：hidden，构建BFC
5）、css浮动属性
| 属性 | 描述（属性值） | 说明 |
|---|---|---|
| folat | float:left; |
元素靠左浮动 |
| float | float:right; |
元素靠右浮动 |
| float | float:none; |
元素不浮动 |
| 浮动的作用1： | 定义网页中的其他文本如何环绕该元素显示 |
|---|---|
| 浮动的作用2： | 让竖着的东西横过来 |
对于作用1：在一个块元素内有文本，另一个块元素浮动于该该块元素时，文本会环绕浮动元素显示（也可以理解成文本是半层浮动）
谁先设置的浮动谁就先靠在那一边。
6）、溢出属性
容器的溢出属性
（1）、空余空间
（1）nowrap
（2）pre预格式化文本
div{
background:yellow;
width:200px;
height:200px;
wite-space:pre;
}
（3）其他
nowrap：不换行
pre：显示空格，回车，不换行
pre-wrap：显示空格，回车，换行
pre-line：显示回车，不显示空格，换行
（2）、省略号显示
text-overflow:cliip/ellipsis
clip:默认值，不显示省略号;
ellipsis：显示省略标记
当单行文本溢出显示省略号需要同时设置以下声明：
·、容易宽度：width:;
2、强制文本在同一行显示：white-space:nowrpa;
3、溢出内容为隐藏：overflow:hidden;
4、溢出文本显示为省略号：text-overflow:ellipsis;
7）、盒子模型
1 span行内元素
只能设置编剧的左右编剧，不能设置上下边距
8）、元素内容相互转换
display:inline/block/line-block/none;
分别为：行特性、块特性、行内块特性和隐藏
9）、二级菜单
注意：父>子，同名不亲无效
10）、定位
（1）静态定位
.box2{
background:blue;
position:relative;
top:100px;
left:100px;
}
（2）、绝对定位
无父：相对于浏览器
有父：相对于父元素
（3）、固定定位
.ad{
width:100px;
height:200px;
background:red;
position:absolute;
right:0;
bottom:200px;
}
（4）、粘性定位
.nav{
background:red;
width:500px;
height:50px;
margin:0 auto;
position:sticky;
top:0px;
}
（5）、定位中的层级
position：relative后来者居上
1）z-index：x；（x>0，数字越大，层级越高）
绝对定位在层级上的表现
1.在父子关系上，子元素添加z-index
2.在兄弟关系上，看位置与z-index大小
3.总结之一：如何使一个行内元素变为块元素
（6）、通过定位实现水平垂直居中
1：快的水平居中
div{
width:200px;
height:200px;
background:yellow;
margin:0 auto
}
2.块的水平垂直居中
width:200px;
height:200px;
background:yellow;
/*margin:0 auto*/
position:absolute;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
11）、定位和浮动的区别
文字环绕方式
定位：文字不环绕（全脱离）
浮动：文字环绕（半脱离）
12）、锚点
13）、精灵图
14）、宽高自适应
（1）细则
宽度自适应
width:auto;宽度不写或者写成auto就是自适应
（2）浮动元素的高度自适应
（3）浮动元素的自适应-伪元素
伪元素：div::first-letter
15)、窗口自适应
方法：html,body{height:100%}
5、两栏模型
calc函数
6、三栏布局
常规布局
calc函数
展示效果
四、CSS进阶学习
1、表单进阶-单选
2、上传文件和隐藏字段
常规上传按钮：
隐藏：
disable：不可选中
3、下拉菜单
代码：
<select>
<option>1option>
<option>3option>
<option>5option>
<option>7option>
<option>9option>
select>
select的属性：
1 size ：显示几个
2 multiple ：选多个
option的属性
1 value：提供给后端所需要的值
2 select
4、文本域
代码：
<div>
<textarea dols="30" rows="10">textarea>
div>
1 cols：列数，rows：行数
2 placeholder：提示文字
css：
5、字段集
代码：
Ap1、H5新增内容
Ap1.1、H5介绍
Ap1.2、新增语义标签
Ap1.3、新增的音频/视频标签
音频
此外，还有muted是静音
视频
Ap1.4、新增表单
input
选项列表
Ap1.5、新增表单属性
