前端虽然相对后端和其他开发相对简单，但是一个月的前端学习应该只是到达一个简单页面的书写的程度。 首先对html标签进行理解学习 css样式简单学习 js逻辑代码的简单学习 不管哪项技术，都要抱着终身学习的态度。特别是前端，框架更新速度快。内容繁琐。。。。 一个多月的时间能保证简单的页面，简单的逻辑我觉得差不多了。后续多加练习，学学框架。
html笔记
ctrl + Z 撤回
ctrl + Y 撤销撤回的操作
ctrl + enter 快速在下面新建一行
ctrl + shift + enter 快速在上面新建一行
b/strong 加粗
i/em 斜体
u/ins 下划线
s/del 删除线
CSS引入方式：
1.内嵌式 写在title下面 head里面，用style标签包裹，只作用于当前页面
2.外联式 CSS单独写在css文件中，通过link标签引入 多个页面生效
3.行内式 css写在标签的style属性中 只对当前标签生效
自定义列表：
dl表示自定义列表的整体
dt表示自定义列表的主题（标题）
dd表示自定义列表中的每一项解释说明
table单元格合并
1. 确定目标单元格 左上原则
2. 确定是跨行合并rowspan 还是 跨列合并 colspan
3. 确定合并的数量
4. 删除多余的单元格
cellspacing 表格单元格边距
CSS笔记
字体font样式连写
style{
font: style weight size/line-height family
}
口诀：swsf（稍微舒服）
文本缩进（首行缩进）：
数字+em
例 text-indent:2em 缩进两个字
文本水平对齐方式
text-align:left/center/right
文本修饰
text-decoration:underline 下划线
text-decoration:line-through 删除线
text-decoration:overline 上划线
text-decoration:none 去除装饰线
水平居中方法总结：
text-align:center;
1.文本
2.span、a
3.input、img
以上需要设置父元素text-align:center
margin:0 auto; 好用的居中方式
行高：上间距+文字高度+下间距
line-height:数字+px
line-height:倍数（当前font-size倍数）
可设置单行文本的垂直居中
line-height:父元素高度；
要写在font样式连写后面
颜色取值类型：
1 关键词： 例如 red green blue等
2.rgb法：color:rgb(255,255,255);
红 绿 蓝
3.rgba法：color:rgba(255,255,255, a )
透明度0~1
0透明 1实心
4.十六进制表示法：color:#ffffff
省略写法：color:#fff (每两个一样的可以省略)
选择器进阶↓
后代选择器：选择器1 选择器2 ...{} 所有后代标签
子代选择器：选择器1 > 选择器2 ...{} 只选择子代标签
并集选择器：选择器1 ， 选择器2 ,... {} 全部已经选择的选择器
交集选择器：选择器1选择器2{css} 连在一起写
emmet语法:div class id 语法糖
伪类选择器：
:hover{css} 选中链接悬停状态
背景相关属性：
bgc:背景颜色
bgc:transparent; 透明
background-image:url('路径') 背景图片 不会撑开盒子 语法糖 bgi
background-repeat:no-repeat; 不重复不平铺
background-repeat:repeat; 水平垂直平铺
background-repeat:repeat-x; 水平平铺
background-repeat:repeat-y; 垂直平铺
background-position:水平方向位置 垂直方向位置
（left center right）
(也可以是坐标像素 左上角原点)
background:color image repeat position 连写样式要先写
元素显示模式：
块级元素 (db) display:block 块级元素标志
1.独占一行
2.宽度默认父元素宽度，高度内容撑开
3.可以设置宽高
行内元素 display:inline 行内元素标志
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：a,span,b,u,i,s,strong.ins,em,del
行内块元素 display:inline-block 行内块元素标志
1.一行可以显示多个
2.可以设置宽高
代表标签：
input，textarea，button，select...
特殊情况：img在google中调试查询为inline
元素显示模式转换
display:block 设置成块级元素
display:inline 设置成行内元素
display:inline-block 设置成行内块元素
html嵌套注意
p标签不能嵌套 div、p、h等元素
a标签不能嵌套a标签
img的图片默认下方有3px，转换成块级元素可以去掉
测量上内边距要注意行高！！！
css三大特性：
1.继承性
color font-style font-weight font-size font-family text-indent text-align line-height
ul {list-style:none} 去除小圆点
body {font-size:...} 统一浏览器默认文字大小
注意：继承失效例子
a标签 color会继承失效 因为a标签有自己的color样式
h系列标签 font-size失效 h有自己的样式
div标签 高度不能继承，宽度类似于继承
快捷键 ctrl+d 快速选择下一个相同区域
2.优先级
继承 < 通配符选择器 <标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
权重叠加不存在进制
3.层叠性
下面优先
边框：
(bd)border:宽度 实线 颜色
bt 上边框
bb 下边框
bdr 右边框
bl 左边框
box-sizing:border-box;
建议写在*里面 此时width、height为盒子总宽高
transparent 透明色
行内元素的margin padding 上下不生效，左右生效，不会影响布局
高度塌陷解决方式：
1.给父元素添加border-top或者padding-top
2.给父元素设置over:hidden
3.转换为行内块元素
4.设置浮动
结构伪类选择器：
1.E:first-child(){} 匹配父元素中第一个子元素，并且是E元素
2.E:last-child(){} 匹配父元素中最后一个子元素，并且是E元素
3.E:nth-child(n){} 匹配父元素中第n个元素，并且是E元素
4.E:nth-last-child(n){} 匹配父元素中倒数第n个元素，并且是E元素
tips：n的取值 2n even 偶数
2n+1 2n-1 odd 奇数
-n+5 找到前五个
n+5 找到后五个
伪元素：
::before 在父元素内容的最前添加一个元素
::after 在父元素内容的最后添加一个元素
tips：
1.必须设置content属性才生效
2.伪元素默认是行内元素
标准流：文档流，浏览器默认排版规则
浮动：
脱离标准流，
浮动会去找浮动，
浮动会受上面元素边界影响
层级比标准流高半个级别，
一行可以显示多个，并且可以设置宽高
float：left 左浮动 fll
float: right 右浮动 flr
清除浮动：
推荐方式：
单伪元素清除法
.clearfix::after{
content:'.', //必写内容，写 . 为适应其他网站
display:block; //块级
clear:both //清除浮动
height:0; //不占空间
visibility:hidden; //当前元素隐藏
}
tips：可以方便的加在类里
双伪元素清除法，还能解决塌陷问题
.clearfix::before,
.clearfix::after{
content:'',
display:table;
}
.clearfix::after{
clear:both;
}
给父元素添加overflow：hidden；，还能解决塌陷问题
BFC盒子
1.浮动是BFC盒子
2.行内块元素是BFC盒子
3.html标签是BFC盒子
4.overflow属性取值不为visible。如: auto、hidden...
定位
position:absolute 绝对定位（psa）
脱离标准流，不占位置,参考最近一层定位父元素，如果没有默认浏览器
position:relative 相对定位 （psr）
不脱离标准流，占位置，参考自身
定位垂直居中：子绝父相
left:50%
top:50%
margin-left:-盒子自身一半px
margin-top:-盒子自身一半px
transform:translate(-50%,-50%) 自身回一半
层级关系
z-index:数字；
只给定位的添加，提高层级
vertical-align：只能设置给行内元素和行内块
baseline 默认基线对齐
middle 图片和文字垂直居中对齐
top 上基线对齐
bottom 下对齐
cursor：光标
pointer小手
not-allowed 禁止
disabled:禁用button或者input
overflow:
visibile 可见的(默认)
hidden 溢出隐藏
auto 自动
单行文本省略显示
white-space：nowarp; //不换行
overflow:hidden; //溢出隐藏
text-overflow:ellipsis //溢出省略省略号
隐藏：
display：none; 常用隐藏 不占位置
opacity：透明度 0~1
transition: 1s 2s 速度 默认全部变化
变化时间 延迟时间 ease-in 变速
ease-out 变速慢
liner 匀速
背景尺寸大小
background-size:contain 等比例一边铺满容器
background-size:cover 等比例全部铺满容器
background-size:100px 或者 百分比 背景图片可能会拉伸
background:url no-repeat position/size 背景连写
定位/尺寸（）
box-shadow:水平偏移 垂直偏移 模糊程度 阴影尺寸 颜色 内外阴影（inset内阴影）