HTML/CSS
Web组成
结构（HTML）、表现（css）、行为（javaScript）
W3c：万维网联盟
Ecma：欧洲电脑网商联合
相关概念
HTML：超文本标记语言
XHTML：可扩展的抄本文本标记语言
HTML5：HTML的第五次重大修改
命名规范
- 小写英文字母、数字、下划线的组合
- 其中不得包含汉字、空格和特殊字符
- 必须以英文字母或下划线_开头，不可以数字开头
HTML基本结构
<!doctype html> 声明文档类型
<html> 跟标签
<head>头部信息
<title>网页的标题</title>
<meta chartset="utf-8"/>网页的编码格式
</head>
<body>主体内容</body>
</html>
HTML的基本语法
双标签（常规标签）
<标签 属性="属性值" 属性="属性值"> </标签>
单标签(空标签)
<标签 属性="属性值"/>
单标签结束的反斜杠可有可无，有指的是XHTML，没有指的是HTML
属性和标签之间用空格隔开，属性和属性值之间用等号连接，属性值必须写在引号里边（引号必须是英文模式下的）
一个标签可以有多个属性，属性之间不分先后顺序
HTML的常用标签
文章类标签
标题标签：h1--h6 默认加粗 h1最大 h6最小
h1标签在一个页面一般只出现一次
段落标签：p
特殊字符：
空格： ；
版权图标：©；
商标：®；
大于号：>；
小于号：<；
修饰标签：
加粗：b strong
倾斜：i em
下划线： u ins
删除线： del s
上角标：sup
下角标：sub
强制换行标签：<br/>
水平线：<hr/>
列表标签：
有序列表：<ol type="1,a,A,I,i"><li></li></ol>
无序列表：<ul type="disc(实心圆)，circle（空心圆），square（实心方块）"><li></li></ul>
自定义列表：<dl><dt><dd></dd></dt></dl>
图片：
<img src="路径" alt="替换文本” title=“提示信息”/>
alt和title的区别
两者都有利于SEO(搜索引擎的优化) alt比较倾向于SEO，title更注重的是用户体验度；alt是当图片不存在或出现错误是显示的替换文本 title是鼠标放在图片上时显示的提示信息
三种相对路径
当前文件与目标文件在同一文件夹中直接写 文件名+拓展名
当前文件与目标问价所在的文件夹在同一目录下 目标文件夹名称/目标文件名+拓展名
当前稳价所在文件夹于目标文件在同一目录下 ../目标文件名+拓展名
超链接
href厚棉鞋具体路径
url：统一资源定位符
<a href="#">空连接</a>
链接具体网址
<a href="http://www.baidu.com">去百度</a>
链接本地站点资源
<a href="路径"></a>
用图片做超链接
<a href="路径"><img src="路径"></a>
超链接的打开方式：target="_self/_blank"
_self:默认值
_blank:在新窗口打开超链接
表格标签
<table>
<tr>
<td></td>
</tr>
</table>
表格的属性：
边框 border
宽度 width
高度 height
单元格的间距 cellspacing
内容与边界之间的距离 cellpadding
边框颜色 bordercolor
表格的标题 caption
水平对齐方式align = “left/center/right”
垂直对齐方式 valign ="top/middle/bottom" (不能写给table)
行合并rowspan
列合并 colspan
表单标签 form table thead tfooter tbody input th td tr
布局标签 div span
表单标签
表单的作用：收集用户信息
表单的组成：
表单域 form
表单控件 input
提示信息 lable
表单控件input的type属性值：
text 文本框
password 密码框
radio 单选按钮
checkbox 复选框
button 按钮
reset 重置按钮
submit 提交按钮
input其他属性
value 默认值
name 名称 （其他可有可无，单选按钮一定要有，一组保持一致）
checked 默认选中 （单选按钮和复选框）
disabled 禁用
size 尺寸
maxlength 最多输入字符
下拉菜单
<select>
<option selected></option>
<option></option>
</select>
下拉菜单的默认选中selected给option
多行文本域
<textarea cols="控制一行显示的字符数和宽度" rows="控制文字写多少行后出现滚动条和高度”></textarea>
form中的属性
表单名称:name
表单提交时方法 method=“get/post”
get：从服务器上获取数据，安全性低
post：向服务器传输数据，安全性高
表单提交地址：action
提交时在当前窗口或者新窗口 target="_self / _blank"
css
css是什么
层叠样式表
css的语法
css由两部分组成：选择器和声明
声明又包含属性和属性值
选择器{属性：属性值 ；}
一个选择器可以有很多歌属性，不分先后顺序
乳沟是最后有个属性值结束的分号可以省略
css样式表
1.内联样式表： 权重最大
写在html标签内部 exp：
<div style="color:red;"></div>
2.内部样式表
写在head与head之间用style包裹
3.外部样式表
创建在HTML的外部 在head之间引用
<link rel="stylesheet" href="路径">
@import url
选择器
-
标签选择器
html标签
-
ID选择器
ID名称{属性：属性值
}
-
clss选择器
.class名称{属性：属性值}
一个标签可以又多个类名
-
通配符选择器（一般用来重置网页默认样式）
*
-
群组选择器
选择器1，选择器2···
-
包含关系选择器（后代选择器）
选择器1 选择器2 ···
-
伪类选择器
：link 初始状态
：visited 点击过后状态
：hover 鼠标滑上 （常用）
：active 点击未抬起
选择器的优先级
当给一个元素使用多个选择器时，设置相同的属性，值不同时会产生权重，权重大的被显示
标签选择器的权重 0001
class选择器的权重 0010
ID选择器的权重 0100
内联样式表的权重 1000
群组选择器的权重是选择器本身
包含关系选择器的权重是选择器的和
继承的权重最小是 0000
在属性之后添加 ！important 此时这个选择器的权重将是无穷大
权重相同 按顺序生效 相同的会覆盖
【两种外部样式表引用方式的区别：link与@import的区别】
- 老祖宗不同，link是HTML提供的一种方式，可以引用css还可以引用其他文件，@import是css提供的一种方式，只能引用css文件
- 加载顺序不同，link与html同时被加载，@import是当所有的HTML加载完成之后，再加载css文件
- 兼容性不同，@import必须是ie6以上支持，link没有版本要求
- 控制dom时，link支持，@import不支持
文字颜色color
英文单词 color ：red/green/]blue/black;
十六机制数 color：#ff0000； 如果两两相同可以缩写成三位 #f00；
三原色 color ：rgb(255,255,0)
三原色+透明度 color：rgba（255,255,0,0.5） a代表透明度 取值0-1
文字属性
font-weight：bold 加粗 normal 不加粗
font-style：italic 倾斜 oblique 倾斜 normal不倾斜
font-size：16px；
单位： px em rem pt
浏览器默认文字大小16px 1em=1rem=16px 9pt=12px
font-family：“楷体”
如果是汉字字体需要写在引号里边font-family:”楷体”;
如果由一个英文单词组成的字体不需要加引号font-family：arial
如果由一组英文单词组成的字体需要添加引号font-family: "times new roman"
可以同时为一个标签设置多个字体font-family: "times new roman","楷体";浏览器会优先解析第一个字体，如果第一个字体不存在，则向下解析第二个...如果设置的所有字体电脑都不存在则按照系统默认字体去解析
line-height：行高
值可以设置具体的像素，如果不加单位代表的是文字大小的倍数
如果行距等于元素的高度可以实现单行文本垂直方向的居中
font-variant：将小写字母变成小型的大写字母small-caps normal（默认值 无）；
文字缩写
font：font-weight font-style font-variant font-size/line-height font-family；
font：font-size/line-height font-family;
文本设置
水平对齐方式text-align
left（默认值）、center（居中）、right（右）、justify（两端对齐）
垂直对齐方式vertical-align
baseline（默认值 基线对齐）、top（上）、middle（中）、bottom（下）
字符间距letter-spacing 文字之间的距离 可以设置负值
词间距word-spacing 词与词之间的距离
文本修饰text-decoration
underline下划线、overline上划线、line-through删除线、none无
首行缩进text-indent
首行缩进两个字的值取决于文字大小 可以设置负值
首行缩进一般设置text-indent：2em；
英文字母大小写 text-tranform
capitalize 手字母大写、uppercase 全部大写、lowercase全部小写、none默认值
文本阴影text-shadow：1px 1px 1px #ddd；
值：水平偏移 垂直偏移 模糊半径 阴影颜色
可以给一个元素设置多组阴影中间用逗号隔开 1px 1px 1px #ddd，2px 2px 3px #f60；
边框设置
border：1px solid #ff0；
border-style：solid实线 double双实线 dashed虚线 dotted点状线 none没有线
border-width：2px；
border-color：red；
边框设置三角形
div{width:0;border：1px solid transparent;border-left-color：red；}
float浮动
float：left、right、none；
float的特性：
- float可以是自上而下显示得元素自左向右在一排显示（元素失去独占一行的特性）
- float的元素如果没有设置宽高，就是内容的宽高，如果设置了宽高就是我们给定的值
- float的元素总宽度超过父元素的宽度，会自动换行显示
- float的元素会脱离正常的文档流，但是float的元素会占据自身的空间，所以导致文字环绕效果
- float的元素如果全部都float：right，会造成顺序的颠倒，float：left不会，如果想在最右边并且在一排显示，把所有需要在一排显示的元素添加一个大盒子，这个大盒子float：right；小盒子float：left，就不会造成顺序的颠倒
- float的元素是在当前布局上去float的，如果上边元素没有float，那么他将float在自己所在的那一排
- float的元素永远是float向自己的父元素的边界
- float的元素后边一个紧跟着前边一个去显示
clear：both、left、right、none； 清除浮动
盒模型
盒模型组成
margin padding border content(width、height)
margin 外边距 外填充 外补丁
设置一个值代表上下左右 margin：10px；
设置两个值：第一个代表上下 第二个代表左右 margin ：10px 12px；
设置三个值：第一个代表上 第二个代表左右 第三个代表下 margin：10px 20px 30px；
设置四个值：上右下左 margin：10px 22px 30px 40px；
可以单独设置某一个方向margin-top/bottom/right/left
margin：可以设置负值，背景颜色是不会出现在margin区域的
margin是否可以影响盒子的大小？
如果单独拿一个盒子来说margin不会影响盒子的实际大小
一个大盒子里如果存在多个小盒子，小盒子的margin会影响一排摆放的个数，此时我们说margin会影响盒子的大小
【padding内边距 内填充 内补丁】
Padding：不可以设置负值，背景颜色是会出现在padding区域。Padding会影响盒子的大小。
其他和margin用法一样
【盒子实际宽高的算法】
宽度=(margin-left)+(border-left)+(padding-left)+width+(padding-right)+(border-right)+(margin-right)
高度=(margin-top)+(border-top)+(padding-top)+height+(padding-bottom)+(border-bottom)+(margin-bottom)
【盒子模型使用中的问题】
margin-top不能正常显示（子元素的margin-top解析给父元素）
解决方法：
A：给父元素添加padding值，父元素的宽高会被撑大
B：给父元素添加border，父元素的宽高会被撑大
C：给父元素添加float属性，float的元素会脱离正常文档流
D：给父元素添加overflow:hidden; 内容有溢出会被裁切
E：给元素本身写float属性，float的元素会脱离正常文档流
上下margin会发生重叠，取较大值
列表设置
【设置列表符号list-style-type】
Circle、disc 、square、 none（常用）
【使用图片做列表符号list-style-image】
list-style-image：url（图片路径）
【列表符号的位置list-style-position】
list-style-position：outside（默认值）inside（里边）
去掉列表符号list-style-type或者list-style：none
背景设置
【背景颜色background-color】
直接添加颜色即可
【背景图片background-image】
直接添加背景图片background-image：url（路径）
【背景图片的位置 background-position】
background-position：值1 值2
第一个代表左右 第二个代表上下
可以使用对应方向值 left center right 、top center bottom，如果水平垂直方向都处于居中位置可以缩写成一个值
可以使用具体的数值：background-position:10px 20px
正值向右 向下 负值向左 向上 （动的是图片）
【背景图片的重复方式background-repeat】
repeat(默认值重复) no-repeat(不重复) repeat-x（水平方向重复） repeat-y（垂直方向重复）
综合写法：background:颜色 图片 重复方式 位置（没有顺序要求）
【插入图片和背景图片的区别】
背景图片上可以写字，插入的图片文字在图片后边不会在图片上边
背景图片不可以另存为，插入的图片可以
【网页中所支持的图片格式】
jpg 有损压缩格式 普通图片
png有损压缩格式 支持透明
gif有损压缩格式 支持透明和动画
【背景图片的固定background-attachment】
scroll 不固定 fixed固定
网页的制作
1.建立站点
2.建立HTML、CSS文件
3.Css文件引入带HTML中
4.重置网页默认样式（css的重置）
5.搭建网页的外围结构
6.添加对应的内容
7.设置对应的css效果
8.去掉搭建结构式不需要的背景颜色
9.页面的代码优化
overflow属性
- visible：默认值
- hidden：溢出裁切，溢出内容不可见
- scoll：无论内容是否有一处都会显示滚动条的位置，溢出内容可见
- auto：如果内容有溢出，件显示对应方向溢出的滚动条，没有溢出则不显示滚动条
- inherit：继承父元素的overflow的属性值
空白控件属性white-space
- pre:将代码中的所有空白区域都解析出来，遇到边界不会换行显示，如果遇到br会换行
- pre-line：将代码中的回车换行解析出来，遇到边界会换行
- pre-wrap：将代码中的所有空白区域都解析出来
- nowrap：将代码中的空白区域都忽略，内容遇到边界不会换行，强制在一行显示，遇到br会换行
- normal：默认值
省略号属性text-overflow
-
clip：裁切
-
ellipsis：省略号、
-
单行文本溢出显示省略号的必要条件
有一定的宽度 width：value 强制在一排显示 white-space：nowrap 溢出裁切 overflow：hidden 显示省略号 text-overflow：ellipsis
元素类型
-
块状元素
div、h1、h2、h3、h4、h5、h6、p 、ul、ol、li、dl、dt、dd、form、table、tr
-
内联元素
span、a、b、strong、i、em、u、ins、del、s、sup、sub、img、input
-
可变元素(根据上下文决定元素的类型)
buttton、iframe
元素类型的转换属性display
- block：块状元素（如果给元素添加float属性相当于给元素添加display：bolck属性）显示
- inline：内联元素
- none：隐藏元素
- inline-block：行内块
- table-cell：表格元素 类似于td、th
- list-item：列表元素
【块状元素与内联元素的区别】
块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高就是其内容；
块状元素自上而下独占一行显示，内联元素自左向右在一排显示
块状元素和内联元素都遵循盒子模型的设置（border，padding、margin、width、height）但是内联元素的某些属性不能正常显示
块状元素一般作为其他内联元素的盒子去使用
大多数内联元素的display属性值默认是inline，
input，img，select，textarea他们的display属性值默认值是inline-block（只有值为inline-block的元素支持vertical-align属性）
大多数块状元素的display属性值默认是block，其中li的display属性值为list-item
【图片大小不一致如何实现水平垂直居中】
1. 给图片找一个参照物，这个参照物的display属性值为inline-block，高度为100%，设置vertical-align：middle；图片设置vertival-align：middle；
2. 给父元素添加display：table-cell，设置vertival-align：middle（父元素不能添加float属性）
3. 给父元素添加相对定位position：relative；图片本身写绝对定位，四个方向清零，margin：auto；
4. 给父元素添加position：relative；图片绝对定位，top：50%；left：50%；tranfrom：translate（-50%，-50%）；
5.给父元素添加display:flex;justify-content:center;align-items:center;
置换元素和费置换元素
通过属性或属性值决定其显示效果的元素叫做置换元素
常见的置换元素;input,img,select,textarea
【img为什么可以设置宽度高度】
他们的display属性值为inline-block
特闷是在置换元素，置换元素在解析的时候或默认生成一个框
定位属性position
static：静态的默认值
relative：相对定位，相对于元素原来位置的偏移，不会脱离正常文档流
absolute：绝对定位，会脱离正常的文档流，根据其最近的有定位的父元素去定位，如果父元素没有定位则根据浏览器窗户去定位
fixed：固定定位，根据浏览器窗户去定位，无论浏览器是否出现滚动条都会处在给定位置不动
sticky：粘性定位（css3.0出现，不是所有浏览器都支持）吸顶效果
【相对定位和绝对定位 的区别】
相同点：都是定位的属性值
不同点：参照物不同，相对定位的参照物是元素本身，绝对定位的参照物是有定位的父元素，如果元素没有定位则参照浏览器窗口
【包含块】
包含块是绝对定位的基础，为绝对定位提供坐标、偏移值、百分比
父级元素相对定位，自己元素绝对定位
【固定宽高水平垂直居中根据浏览器窗口】
div{
width:200px;
height:100px;
background:#f00;
position:absolute/fexed;
margin-left:-100px;
margin-top:-50px;
}
div{
width:200px;
height:100px;
background:#f00;
position:absolute/fixed;
top:0;left:0;right:0;bottom:0;
margin:auto;
}
z-index
检索定位元素的排列顺序
定位的元素默认谁在下边谁在上边显示，可以通过z-index更改显示顺序
z-index的值越大，越靠上显示，值可以无穷大，也可以无穷小，还可以设置负值，z-index的默认值auto；z-index必须与定位属性连用才能生效，定位的属性值不能为static默认值
锚点
锚点作用：实现同一页面不同位置的跳转
想去哪里就在那里添加id选择器 ，超链接的href="#ID"
侧边栏使用的较多
透明度
背景透明rgba：内容不会透明
Opacity：value （0-1） 其他浏览器支持
Filter：alpha（opacity=value值0-100） IE浏览器支持
内容会跟着透明（如果内容不想透明，name内容需要单独写一层）
全屏banner广告图
.banner{
height:300px;
overflow:hidden;
position:relative;
}
.banner img{
position:absolute;
left:50%;
margin-left: - 图片宽度的一半；
}
<div class="banner">
<img src="banner.jpg">
</div>
二级导航菜单
二级导航菜单需要注意脱离正常文档流，如果下面有定位需要注意顺序，用z-index修改
宽高自适应
Width：固定的宽度，如果浏览器的宽度小于给定值，则会出现滚动条
Min-width: 最小宽度，如果浏览器的宽度大于给定值，那么整个浏览器的宽度就是这个元素的宽，如果小于给定值，则会出现滚动条（无限大）
Max-width:最大宽度，如果浏览器的宽度大于给定值，那么整个浏览器里的这个元素的宽度就是给定值，如果浏览器的宽度小于给定值，则这个元素的宽度是浏览器的宽度（无限小）
Height：固定高度，给多少页面就显示多少，如果里边有内容，内容比较多会溢出
Min-height：最小高度，一开始没有内容时就显示给定值的高度，如果里边有内容，内容比较多，会随之内容的增多而增高
Max-height：最大高度，一开始没有内容就不会显示高度，如果里边有内容，内容少，则高度就是内容的高度，内容比较多则高度为给定值的高度，多余的内容会溢出
* 如果想要元素宽度自适应，一般用width：100%，如果由一个定值的宽度还需要随之窗口的缩写而缩小，不会出现滚动条此时用max-width
如果想要高度自适应，可以不设置高度或者是高auto，如果想要高度自适应还需要一开始不管是否有内容都会显示一定区域此时用min-height
宽高函数的设置calc（100% - 像素值）
高度坍塌（父元素不设置高度，子元素float）
1.给父元素添加overflow:hidden;
优点：简单易记
缺点：内容溢出会被裁切
2.给float的元素下面添加一个空的div，div设置clera：both；height：0；overflow：hidden；
3.万能清除法
父元素：after{
content：“”；
display：block；
clear：both；
height：0；
overflow：hidden；
visibility：hidden；
}
优点：内容溢出不会被裁切，有利于SEO
缺点：不利于记忆
伪对象选择符
内容之后
:after{
content:"hello"; //内容如果是文字需要添加在引号里面
}
内容之前
：before{
content：url（路径）； //内容如果是图片直接写url
}
：first-letter 第一个字符（必须是块状元素）
：first-line 第一行（必须是块状元素）
：：selection 文字选中的状态（可以更改背景颜色和文字颜色，必须是双冒号）
【visibility：hidden与display：none的区别】
都可以实现隐藏，display是彻底隐藏不占据位置，visibility元素和内容都隐藏，保留位置
【最小高度的兼容】
方法一：
min-height：value；
_height:valule;
方法二：（实用性角度来说方法二为最优解）
min-height：value；
height：auto ！important；
height：value；
【元素宽高自适应窗户的宽度】
html,body{
height:100%;
}
元素{
height：100%；
weight：100%；
}
iframe框架集标签
属性frameborder=“no” 去掉边框
属性scrolling=“no” 去掉滚动条
超链接的target属性等于iframe的name属性值
超链接的target属性值
_self当前页面打开
_blank新窗口打开
_top单页面里超链接用iframe标签去引入是辞职可以跳出iframe在当前页面打开
表单的补充
-
表单的组成：表单域form、表单控件input提示信息label
-
表单字段集标签fieldset相当于是一个框，可以在fieldset里去设置禁用，在这里设置一次里边的所有元素都是禁用状态
-
字段集标题:legend 此标签必须是fieldset里的第一个元素
-
提示信息label：如果将input写在label里边可以实现点击文字是将光标定义到对应的input标签上
<label>提示信息:<input type="text"></label> 如果label和input是分开写的，给label添加for属性,属性值为input的ID选择器名称 <label for="pwd">密码:</label><input type="password" id="pwd"> -
上传文件域:
<input type="file" multiple="multiple"> multiple实现多选的属性 -
上传图像域:
<input type="image" src="img.gif" width="100"/>
表格补充
表格按照数据行分组可以分为：thead表头、tbody表体、tfoot表尾
在一个表格中表头和表尾只能有一个，表体可以有多个，他们三者的顺序是thead、tfoot、tbody
表格的属性写给table的rules="all,none默认值,rows,cols,groups列分组"
列分组rulse="groups"需要与col(单标签)或者colgropup(双标签)连用
如果像是相邻的几列合并需要在col或者colgroup里添加span,想要几列合并就写几，span的默认值为1，默认情况下1列是一组
表格里的css属性
设置单元格与单元格的间距 border-spacing:0;(此属性必须写给table)相当于html的cellspacing="0"
合并相邻单元格的边框：borde-collapse：collapse；必须写给table
单元格礼物内容是隐藏：empty-cells：hide/show；隐藏/展示
单元格的宽度股东table-layout：fixed;(提高运算效率)
设置表格标题的位置caption-side：left/right/top/bottom;(left、right只有火狐支持)
css统筹
网页优化：页面头部优化(关键字，描述信息)，页面本身优化
页面本身的优化：超链接的title,img的alt和title，重置样式reset，起名规则，网站地图
子代选择器与后代选择器的区别：
写法不一样：子选择器是大于号，后代选择器是空格
控制范围不一样：子选择器只选择后边的一级，后代选择器不管后边几级都选择
bfc
1.概念
BFC(Block formatting context)直译为"块级格式化上下文"。他是一个独立的渲染区域，只有Block-level box（块）参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。
2.BFC的布局规则
1> 内部的box会砸垂直方向，一个接一个地放置。
2> box垂直方向的距离有margin决定。属于同一个bfc的两个相邻boxmargin会发生重叠
3> 每个元素的margin box的左边，与包含块border box的左边相接触
4> bfc的区域不会与float box重叠
5> bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
6> 计算bfc的高度时，浮动的元素也参与计算
3.哪些元素或属性能触发bfc
根元素
float属性不为none
position为absolute或fixed
diplay为inline-bolck，table-cell，table-caption(表格标题),flex,inline-flex
overflow不为visible
4.bfc的应用
两栏布局（左边固定中间自适应）
<div class="left"></div>
<div class="right"></div>
【第一种全部float利用calc函数】
.left{
width:100px;
background:#f00;
height:100px;
float:left;
}
.right{
width:calc(100%-100px);
height:100px;
background:#0ff;
float:left;
}
【第二种，左边float右边overflow：hidden】
.left{
width:100px;
background:#f00;
height:100px;
float:left;
}
.right{
height:100px;
background:#0ff;
overflow:hidden;
}
三栏布局(左右固定中间自适应)双飞翼布局、圣杯布局
【第一种，float】双飞翼
<div class=”left”></div>
<div class=”center”></div>
<div class=”right”></div>
.left{
width:100px;
background:#f00;
height:100px;
float:left;
}
.right{
width:100px;
height:100px;
background:#0ff;
float:left;
}
.center{
width:calc(100% - 100px -100px);
height:100px;
background:#0f0;
float:left;
}
【第二种左右float,中间overflow：hidden需要注意顺序问题】
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”></div>
.left{
width:100px;
background:#f00;
height:100px;
float:left;
}
.right{
width:100px;
height:100px;
background:#0f0;
float:right;
}
.center{
height:100px;
background:#0f0;
overflow:hidden;
}
【利用定位的方式去屑position】(无顺序要求)
如何实现三栏布局(左右固定中间自适应)，要求先加载中间区域在加载左右
.left{
width：200px;
height:200px;
background:#0f0;
position:absolute;
left：0;top:0;
}
.right{
width:200px;
height:200px;
background:#000;
position:absolute;
right:0;top:0;
}
.center{
height:300px;
background:#f00;
margin: 0 200px;
}
过渡属性transition属性
可以看到一个状态到另一个状态的过程，过度属性不支持display：block和display：none
过渡属性值：那个属性有过度 过度事件 延迟执行时间 时间曲线
transition: property duration timing-function delay;
transition： all 2s 2s ease-in;复合写法
transition-property：all； 那个属性有过渡
transition-delay：2s； 过渡的延迟时间
transition-duration：2s； 过渡的执行时间
transition-timing-function：ease-in； 过渡的事件曲线
浏览器兼容的前缀
- 谷歌，苹果 -webkit-
- 火狐 -moz-
- IE -ms-
- 欧朋 -o-
2d属性transfrom属性
【偏移：translate()在原来位置上的偏移】
transform:translate(value);
写一个值代表x轴方向，正值向右赋值想左
transform：translate(value,value);
写两个值，第一个代表x轴，第二个代表y轴
可以单独设置translateX(value)代表左右
translateY(value)代表上下
如果偏移的value是写的百分比的值，指的是元素本身宽高的百分比
【旋转 rotate()】
给定度数去旋转，内容也会跟着旋转，正值顺时针，赋值逆时针 deg代表度数单位
transform：rotate(value deg) 只能给定一个旋转的角度值
可以单独设置x轴和y轴 rotateX(value deg)代表上下
rotateY(value deg)代表左右
【扭曲倾斜 skew()】
写一个值代表x轴方向，正值向左向上，负值向下向右
transform：skew(value deg)
写两值，第一个代表x轴，第二个代表y轴，transform：skew(value deg,value deg)
可以单独设置transform：skewX(value deg);代表左右
transform：skewY(value deg);代表上下
【缩放 scale()】
缩放指的是原来宽高缩放的倍数
一个值，代表宽度和高度同时缩放，transform：scale(1.2);
两个值,第一个代表宽度，第二个代表高度transform:scale(2,1);
可以单独设置某一个方向scaleX(),scaleY(),如果设置负值是咋你这个值放大或缩小的基础上将元素反方向显示，内容会跟着放大或缩小
如果transform同时使用多个属性值，需要注意顺序问题，值都一样顺序不一样最终显示效果是不一样的
鼠标屏蔽事件
pointer-events:none;想屏蔽谁的鼠标换上,就写给谁
基点
transform-origin:value1 value2;
value1 左右 value2 上下 可以是具体的方向值，还可以是具体的数值
背景颜色的渐变
【线性渐变】
background：渐变(线性,初始位置,结束为止,从哪个颜色,到那个颜色)
background:-webkit-gradient(linear,0 0,0 100%,from(#f00),to(#00f));
background:-webkit-gradient(inear,left top,right bottom,from(#f00),to(#00f));
background:-webkit-gradient(linear,left top,right bottom,color-stop(0,#f00),color-stop(0.3,#ff0),color-stop(.5,rgb(255,0,255)));
background:线性渐变(初始位置(可以是方向单词，还可以是给定度数),颜色，颜色,颜色...)
background:-webkit-linear-gradient(left top,#f00,#00f,#0f0,#0ff);
background: -webkit-linear-gradient(180deg,#f00,#ff0,#00f,#0f0,#0ff);
0deg相当于left，180deg相当于right
-90deg和270deg相当于从上到下 ，90deg从下到上
【径向渐变】
background:-webkit-radial-gradient(位置,颜色...)
background:radial-gradient(closet-side at 60% 55%,blue green,yellow,black);
【重复渐变】
background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,$f00 15%);
background:repeating-linear-gradient(90deg，#f00,#f00 10px,#ff0 10px;#ff0 20px);
关键帧动画
创建关键帧动画
@keyframes name{
from{}
to{}
}
@keyframes name{
0%{}
50%{}
100%{}
}
引用关键帧动画
animation 属性(属性值至少有两项,动画名称和动画执行时间)
animation:dog 1s 3 1s linear alternate forwards paused;
animation:动画名称 动画执行时间 执行次数(infinite无限循环) 运动曲线(ease,ease-out,ease-in-out,linear,step-start,step-end) 动画下一个周期如何执行(alternalte) 动画执行完成之后保留的状态(forwards保留动画最后一次执行完成的状态) 动画是否执行(pauseed停止)
/* 动画名称 */
animation-name: bian;
/* 动画执行时间 */
animation-duration: 1s;
/* 动画运动曲线 */
animation-timing-function: linear;
/* 动画延迟执行时间 */
animation-delay: 1s;
/* 动画的执行方式 */
animation-direction: alternate-reverse;
/* 动画的执行次数 */
animation-iteration-count: 2;
/* 动画执行完成之后保留的状态 */
animation-fill-mode: forwards;
/* 动画是否执行 */
animation-play-state: running;
【transition和animation的区别】
相同点：都有过渡效果，都可以设置执行时间，延迟时间，过渡曲线
不同点：transition需要将其绑定在某个元素上，当鼠标触发时才能执行，animation引用的动画可以实现浏览器加载完成之后自动执行；transition是指某个或多个属性的一个过渡效果，animation是引用关键帧动画
3d
【景深】
在多远的距离去观察事物
perspective值越大效果越小
两种写法：
perspective：value 此写法直接写个父元素
transform：perspective(value) 写给元素本身
景深基点 perspective-origin：值1 值2 (值1代表左右 值2代表上下)
transform-style: preserve-3d;/*透视效果*/ 写给父元素
【rotate3d()】
rotate3d(x,y,z,deg)xyz的取值0或者是1,0代表不旋转，1代表旋转给定度数
如果用3d的写法我们的xyz轴要么旋转，要么就不旋转，此方式限制了旋转的度数必须一致，如果度数不一致需要单独设置transform:rotatex()、rotatey()、rotatez()
【translate3d(x,y,z)】
transform:translate3d(100px,50px,0px);
translatez: 正值向前，负值向后
HTML5新增结构标签(有意义的标签)
头部区域 header
导航区域 nav
内容区域 section 、main
底部区域 footer
文章区域 article
标题组 hgroup
侧边栏 aside
媒体组 figure figcaption(媒体组标题)
时间标签 time (内联元素与span相似)
HTML5新增的input的type类型
颜色 <input type="color"/>
邮箱 <input type="email"/>
网址 <input type="url"/>
时间 <input type="time"/>
日期 <input type="date"/>
周 <input type="week"/>
月份 <input type="month"/>
数字 <input type="number"/>
搜索 <input type="search"/>
滑块 <input type="range"/>
HTML新增的表单属性
提示信息 placeholder
自动聚焦 autofocus
表单必填项 required
正则验证 pattern pattern="\d{3}"限制用户输入的数字不能大于3
表单不进行验证直接提交novalidate （写个form）
表单的历史记录(自动补全) autocomplate="on默认/off关闭"(写给form)
历史记录：
<input type="text" list="biao">
<datalist id="biao">
<option value="第一条">第一条</option>
<option >第二条</option>
<option >第三条</option>
<option >第四条</option>
</datalist>
datalist的id与input的属性list的值是一致的
输出标签output
<form oninput="res.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>
html5里的视频音频
视频的引用方式：
1.<video src="video/3the.mp4" width="500" controls loop poster="a2.jpg" autoplay muted></video>
2.（此方式type必须写）<video controls>
<source src="video/3the.mp4" type="video/mp4"></source>
</video>
显示控制台controls
是否循环播放loop
加载等待的画面poster
自动播放autoplay（在静音的情况下自动播放是好用的）
静音muted
网页中所支持的视频格式：mp4、ogg、webm
网页中所支持的音频格式：mp4、ogg、mp3
其他标签
注释标签
<ruby>
夼
<rp>(</rp>
<rt>kuang</rt>
<rp>)</rp>
</ruby>
<mark>文字会默认添加黄色背景颜色</mark>
详细信息：
<details>
<summary>哈哈</summary>
<dd>第一个</dd>
<dd>第一个2</dd>
<dd>第一个3</dd>
<dd>第一个4</dd>
</details>
CSS3的选择器
1、基本选择器
Id、通配符、class、标签选择器、群组选择器
2、（层次）关系选择器
子代选择器 大于号
后代选择器 空格
相邻兄弟选择器 加号 向后找相邻的第一个兄弟
通用选择器 波浪线 向后找所有的兄弟
3、动态伪类选择器
：link
：visited
：hover
：active
：focus 获取焦点
4、目标伪类选择器
：target 指id选择器所在的元素
5、UI元素状态伪类选择器
：checked选中状态
：enabled 启用状态
：disabled禁用状态
6、结构伪类选择器
：first-child结构中的第一个
：first-of-type 这个类型中的第一个
：last-child结构中的最后一个
: last-of-type这个类型中的最后一个
N的取值可以是具体的数字，也可以是n的倍数，直接写n代表所有，偶数2n或者even 奇数2n+1或者2n-1或者odd
: nth-child(n) 这个结构中的第几个
: nth-of-type(n) 这个类型中的第几个
: nth-last-child(n) 这个结构中的倒数第几个
: nth-last-of-type(n)这个类型中的倒数第几个
: only-child 这个结构中只有一个元素
: only-of-type这个类型的元素只有一个
: empty 这个元素内容为空时的效果
7、否定伪类选择器
：not（）取反
8、属性伪类选择器
[value] 存在此属性的元素
[value=”值”] 存在此属性并且值是给定的值的元素
[value^=”值”] 存在此属性并且属性值里初始位置包含给定值
[value$=”值”] 存在此属性并且属性值的结束位置包含给定值
[value*=”值”] 存在此属性并且属性值的任意位置包含给定值
9、伪元素选择器
：first-letter
：first-line
：after
：before
怪异盒模型和box-sizing属性
border-box：怪异盒子，将border和padding都计算在width与height里面，即border与padding不会撑大盒子
content-box：标准盒子，将border和padding都计算在width与height外边，即border与padding会撑大盒子
当html结构中没有<！doctype html>是，IE浏览器会触发怪异盒模型
文本与阴影属性
盒子阴影box-shadow：水平偏移 垂直偏移 模糊半径 阴影颜色
可以同时设置多组，用逗号隔开 inset是在盒子的内部添加阴影
背景相关属性
显示范围background-clip:border-box\padding-box\content-box
显示基点background-origin：border-box\padding\box\content-box
背景图片的尺寸background-size：值1(宽) 值2(高)
contain：等比例缩放背景图片，当宽度高度都不能缩放时停止，会使背景图片全部显示在子元素中，可能会导致这个元素区域不能全部都有背景图片
cover：等比例缩放背景图片，宽度高度有一个方向不能缩放就停止，会导致背景图片超出部分被裁切
Css3支持一个元素添加多张背景图片，用逗号隔开，需要注意，谁在前边谁在上边显示，如果需要添加背景颜色那么将其放在最后位置
圆角，用图片做边框
border-radius：最多可以设置8个值 第五个到第八个值通过反斜杠去写代表的是y轴的弧度
border-image：路径 裁切位置 裁切位置 裁切位置 裁切位置/边框粗细 重复方式 是否扩展
优雅降级和渐进增强
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation：一开始就构建完整的功能，然后在针对低版本浏览器进行兼容
区别：优雅降级是从复杂开始，并试图减少用户体验的供给，而渐进增强则是从一个非常杰出的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级(功能衰减)意味着往回看；而渐进增强则意味着朝前看，同事保证其根基处于安全地带。
媒体查询
集中创建页面的图片排版大小，可以智能的根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局（实现 响应式布局）
@media all and (min-width){}
@media all and (min-width)and(max-width)
【外部样式表】
<link rel="stylesheet" media="(min-width:400px) and (max-width:7-1px)" href="green.css"/>
【横屏竖屏】
@media all and (orientation:portrait){
body{background:#ff0;}
}
@media all and (orientation:landscape) {
body{background: #00f;}
}
单位
Px：是给定的固定像素值 定值
Em：是根据父元素的font-size值去计算
Rem：是根据跟标签html的font-size值去计算
Vw：设备视窗宽度的百分比 1vw =设备视窗宽度的百分之一
Vh：设备视窗高度的百分比 1vh=设备视窗高度的百分之一
Vmin：设备视窗宽度高度百分比较小的值
Vmax：设备视窗宽度高度百分比较大的值
移动端单位的设置
Html的font-size设置成vw(vw会随着窗口的改变而改变)
里边元素的单位设置成rem（rem会随着html的font-size的改变而改变）
名词
屏幕尺寸：屏幕对角线的长度
屏幕分辨率：指横纵方向上的像素点数
屏幕像素密度：屏幕上每英寸可以显示像素点的数量，单位是ppi（像素密度越大图片越清晰）
DPR：设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下，设备像素和CSS像素的比值
布局
两栏布局：左边固定右边自适应
三栏布局：左右固定中间自适应（双飞翼或圣杯）
弹性布局（100%布局）：宽度高度不变，中间空隙改变
响应式布局：利用媒体查询方式去实现（在不同的屏幕尺寸上时排版布局会发生改变）
等比缩放布局（rem布局）:随着屏幕变大而变大，缩写而缩小
工作中或者写项目的时候具体流程是什么
1.拿到设计图
看看图片的大小 就是那个ps中 选择图像------>图像大小 （通常美工给我们的设计图都是750/640的设计图）那么在这个时候iphone6的分辨率刚好符合750 如果给我640那么我就是用iphone5 640的分辨率
2.确定dpr值 都 2
3.因为我们要使用rem 但是rem 是根据html根节点的font-size来走的 所以我们需要在不同设备下改变这个值 使用vw这个单位就可以 1vw=当前设备的大小的百分之1
4.我们需要计算当前的页面需要多少vw才完成100px（100px的原因是好计算）
5.这是固定的记住就好
我要先计算出1vw
根据设计图我们幻想就是750的设计图那么使用的就是iphone6 375 1vw=375*1% =3.75
我们现在已经计算出了1vw=3.75px 那么100px是多少vw呢 100/3.75=26.67vw
6.如果美工给我们的设计图是750 那么就可以使用上面计算出来的26.67vw 设置给html的font-size：26.67vw;
7.在写项目的时候就把原来的px全部替换成为rem 1rem=100px；
多列
创建多列column-count
设置列的空隙column-gap
设置列中间边框column-rule
指定元素跨越的列数column-span：1或者all
在哪里中断列break-inside: avoid
网格布局
父元素设置为网格：display:grid/line-grid
设置列宽度：grid-template-columns: 100px 100px 100px ;
grid-template-columns: repeat(3,20%);
grid-template-columns: repeat(4,1fr);
grid-template-columns: 200px 2fr 3fr;
grid-template-columns: repeat(auto-fill,200px);
设置行高度 ：grid-template-rows:100px 200px 300px;
设置单元格的空隙grid-gap 一个值表示横竖都一样，两个值，第一个代表横向，第二个代表竖向
单元格的划分grid-template-areas:
"b1 b2 b2 b3"
"b4 b2 b2 b5"
"b6 b7 b8 b5"
"b6 b9 b9 b9";
给子元素分配区域：grid-area：b1
控制单元格内容的对齐方式place-items（justify-items与align-items的缩写）：start，center ，end
控制单元格在整个区域的对齐方式place-content：
place-content: justify-content/align-content:
start | end | center | stretch | space-around | space-between | space-evenly;
隐藏元素背面backface-visibility:hidden;
浏览器的内核
trident： IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
webkit：代表Safari、Chrome是一个开源项目
presto:代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎 ( Opera前内核 已经废弃,现在欧鹏浏览器 用的是 谷歌的 Blink )。
blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
常见的浏览器兼容（hack）
1、图片向下撑大3像素问题
给父元素添加font-size:0;或者高度与图片的高度一致
给图片添加display:block;vertical-align:top\middle\bottom
float
2、IE浏览器中用图片做超链接时会产生边框
给图片添加border:none\0\hidden;
3、表单行高不一样
给input写float
4、按钮大小不一致
给按钮元素添加box-sizing：content-box；
给按钮元素单独设置高度
用其他标签代替按钮
给按钮标签外面嵌套一个标签
使用背景图片左按钮
5、鼠标指针
cursor：pointer;(小手)
6、透明度兼容
filter：alpha(opacity=value); value取值0-100
opacity：value; value取值0-1
7、IE6的双边距问题
ie6将float向边界的margin值按照双倍去解析
给float的元素添加display：inline；
8、IE6的默认高度问题
在IE6上将低于16px一下的高度都按照16px去解析
去添加font-size：0；或者overflow：hidden；
9、IE的百分比bug
IE6将50%与50%的宽度按照四舍五入计算，大于100%
把float向右边的元素添加clear：right；
过滤器filter
下划线写法：ie6支持 _height:20px;
星号写法：ie6、ie7支持 *background：#ff0；
background：#f00 \9; ie浏览器支持
关键字写法： ！important；
图像整合技术（精灵图，雪碧图）
图片整合的好处：减少向服务器请求的次数，减少网络带宽占有，提高页面加载速度，提高用户体验度，减小图片体积
图像整合技术原理：利用背景图片的可移动性，核心属性background-position：
背景图片整合的注意事项：一定是背景图片才能整合，整合的五篇最好不要太大，不要超过100kb。整合图片是需要注意整合的方向，注意兔玉兔之间要留有空隙，最好有规律可循
css那些属性可继承
继承，父元素的属性同样在子元素中生效。
块状元素内联元素都可以继承：文字的一系列属性都可以继承，color属性给超链接标签除外font-size、font-family、font-weight、font-style、line-height、color、text-transform(控制文本大小写)、text-decoration
块状元素可以继承：text-indent(首行缩进)、text-align、
列表标签:list-style、list-style-type、list-style-image、list-style-position
表格标签：border-spacing(合并相邻单元格的边框)、empty-cells
