前端lv1学习总结

                                                 HTML & CSS

1.html:表格，表单 表格：

 table:表格容器 

 border：边框

cellspacing:单元格之间的距离

cellpadding: 单元格内容与边框的距离

 tr:设置行 

 th:设置表格头部 控制列数

 td: 设置单元格内容 也控制列数 

 - rowspan 行合并属性 - colspan 列合并属性 

 caption 表格标题

 thead 头部

 tbody 主体 

表单：

收集数据

 form: action: 提交地址

 method: 提交方式 

post在后台显示

 get会显示在网页上 

 input: 代表输入框

 type属性可以决定输入框类型

 text 文本输入框 

 submit 提交按钮

 password 密码输入框

 radio 单选按钮

 name属性可以 进行分组确定单选和多选

 checkbox 复选框 也需要

name 进行分组 

 value 属性可以确定选择 

 file 用于做文件上传

 button label： 创建文本和输入框的联系 配合id 和for使用 比如设置用户协议 select （name） option (value) textarea: 文本域 button:按钮

                                                          2.CSS

层叠样式表，用于为网页设置样式

 1、语法：

 1.选择器 

 2，样式声明

 3.属性

 4.属性值 

 p{ color:red; font-size:30px； backrgoung-color:skyblue; } h1{ background-color:lightcoral; } 

 2、引入方式 

 1.行内样式 每行标签直接引入 

 2.内部样式 style标签里面设置样式 一般处于head 标签内部 

 3.外部样式 引入css文件 link标签引入

 4.@import url( css文件)； ./进入同级目录 ../返回上级目录 

 3.选择器：

 - 基本选择器： - 标签选择器 直接获取标签 - 加. 类选择器 标签的 class="p1"属性 .p1 来获取 - 加# 

id选择器 id="qg"属性 #qg 来获取 一个id只能获取一个标签 为js准备 

 - 通配符： * 选择所有的标签 

 - 属性选择器： - 通过标签的属性选择标签 - 名称=内容 【id=qg】 中括号 - 伪类选择器 - ：name - ：hover 用得较多的 鼠标悬停到元素上 体现某些效果 

 - 复合选择器（选择符、组合选择器）：描述两个选择器之间的关系 - 空格 .box p 后代选择器 - .box > 子代选择器 - h1 + P 相邻兄弟选择器 直接选择h1下面的p标签 - ~ ：

 兄弟选择器 

 后面所有的 - ， ：h1,p 并列选择器 两个标签都会选择 - .p1#qg 交集选择器 但需要标签内同时包含这两个元素 - p.p1#qg 三个元素 但P标签要在最前面才能选中 多个标签组合使用 

 - 伪元素选择器： - 两个冒号 ::name - ::before 例如 设置某一段字体中某一个字体颜色 或者改变他的样式 

 4.样式优先级 

 1.选择器权重: *< 标签 伪元素 < 类，伪类 属性< id < 行内样式 

 - 行内样式 1 0 0 0 

 - Id ： 0 1 0 0 

 - 类 伪类 属性 0 0 1 0 

 - 标签，伪元素 ： 0 0 0 1 - * ，复合 0 0 0 0 2. 

如果权重相同 看层叠性 ——就近原则 

 3.- 特殊声明 !important 如果同时出现会互相抵消 不建议写

                              0909 - 基础样式&盒模型

内容： 1. 基础样式（字体，文本，背景） 2. 元素分类 3. 盒模型 4. BFC 目标 - 掌握基础样式 - 掌握CSS 元素的分类 - 掌握盒模型  

4.css 基本样式 字体- font font-style 规定字体样式。 注意：italic(斜体） font-variant 规定字体异体。 font-weight: 字体粗细 100-900或者写关键字 normal,bold,lighter,bolder font-size/line-height 规定字体大小和行高。 font-family 确定字体 arial(应用最广）helvetica，sans-serif; 文本- text color:颜色 snip 取色 text-align:center 居中 start 起始位置默认左边 direction 方向 rtl 向右 inherit 继承 initial 初始化 默认值 justify 两端对齐 文字超过一行才会有效果 text-indent;文字缩进 em（当前字体大小的倍数） line-height;一行的高度 改变高度字体会居中 text-decoration; underline 下划线 line-through :穿过线 , none取消字体下划线和原本颜色 a:hover{ 颜色} 鼠标悬停效果 text-transform 文字变化 比如首字母大写（用于英文） - capitalize ； - uppercase ； - lowercase ；大写 lettter-spacing : word-spacing 单词距离 word-break : 背景- background background-color:背景颜色 -image 背景图片 url里面填写图片地址 -repeat 背景平铺 no-repeat 不重复 repeat-y/x - position: center 居中 left-top 默认值居中 background-position: 100px 往中间移动100px 默认居中 background-position： left 0px bottom 0px background-size:背景图片大小 auto 500px - cover 占满整个页面，图片不变形，图片可能会被裁剪 - contain 不一定占满盒子，图片不变形，图片不被裁剪 background-attachment： 背景固定 实现滚动切换 雪碧图 - position: 向左负值移动0px 向上负值移动0px iconfont 字体图标 查资料 优化方式 2、元素分类 html - 块级元素（block）：p,h1-h6,div,ul,li,ol,dl 独占一行 - 行内元素(inline)：span, a ,img,b,em, 同排显示，不能设置宽高 - 行内块级元素(inline-block)： 同排显示，可以设置所有样式 display:block 转换块级元素 span :无法直接设置宽 高 - img input 可以设置宽 高 .item[块级转行内 width342px height:466px background-color； display:inline-block 转换行内块级元素 vertical-align:top 文本对齐方式，文字和图片对齐方法 通过display 控制元素的类型 inline 空格问题 父级设置font-size为0 字级重新设置字体大小 inline-block 元素的垂直对齐 出现对齐错误时 vertical-align ：垂直对齐设置文本与图片对齐方式 text-align 水平对齐 3、盒模型 构成方式 margin: 元素与元素之间的距离 外边距 border: 边框 padding：内容和边框之间的距离 content：内容区 计算方式 盒子大小：包含内容+边框x2+内边距x2 例子 .box{ background width height border:10px solid 蓝色 padding:10px 边框和内容的距离 margin: 0,auto 设置平分居中 font-size:0 .item{ display:inline-block background width height font-size:16 背景色 box-sizing:border-box 固定盒子大小 box-sizing: content-box 更改计算方式 box-sizing: 设置 WIDTH的计算方式 - content-box:(标准盒模型)width=content-width,默认值 - border-box: （IE 盒模型）width = content-width+padding-width+ border+width border-width border-style:solid,dashed,dotted boredr-color：边框颜色 transparent 透明 bpeder-top:5px solid red 三角形 border-top-color: border-radius:10px 边框圆角 padding:20px 40px 两种数值是上下和左右 四个值 是上右下左 margin 的问题 margin: 网页会默认加像素 需要给Body设置一个margin为0 1。 margin 叠压 在垂直方向上，两元素的外边距会进行叠压，其具体值为较大者 没有具体解决方法 自己注意 2. margin 塌陷（父子级） 产生条件：父子级都是块级元素，第一个或者最后一个子级元素设置margin-top时，会出现塌陷 解决方法: - 子级不设置margin-top距离 在父级设置 padding-top距离 - 设置子级或者父级不为块级元素 即设置displye:inline-block 转换行内块级元素，然后加上text-align：center 让他水平居中对齐 -利用伪元素在 当前盒子前添加一个空元素 BFC - display:flow-root 触发bfc 缺陷低版本浏览器不兼容 学习时可以用 overflow:hidden 将盒子内容溢出部分隐藏 overflow scroll 滚动条 overflow-y:auto 超出部分出现滚动条 

                                                  **   0910 浮动**

样式重置 reset.css 重置默认样式 推荐使用 - normalize.css 保护有用的浏览器默认样式 修复浏览器自身的bug并保证各浏览器的一致性 浮动 沿容器的左侧和右侧放置，允许文本和内联元素环绕它，该元素从网页的正常流动中移除，尽管他仍然保持部分流动性 诞生原因， 由于 正常文档流无法实现图文环绕效果，所以产生了FLOAT属性，但经过发展，float属性也普遍使用网页布局 特性 -浮动元素会脱离文档流（不完全），向设定方向移动，遇到父级边界停止移动。 - 普通元素设置float属性后 元素变为带有 inline-block 特性的block 元素 - 浮动元素无法被块级元素识别，内联元素和文本可以识别， float:left 左边 right 右边 none取消 文字和图片对齐 默认对齐文字底部 改变对齐方式使用 vertical-align middle 中间 清除浮动： 清除浮动所带来的影响 1.空标签法 - clear:both; 专门用于浮动 2. 在行内标签添加 - clearfix 清除浮动 .clearfix::after{ content: display:block clear:both 3. 定高 nth-of-type(2n-1)                  

                                              ** 0911定位**

1. 定位 - 定位特性 定位应用 定位层级 元素隐藏 层级 定位分类 position:static 静态定位 元素默认值 位置不变 *- relative 相对定位特性 -1. 相对自身原来位置进行偏移 top bottom left right 同时设置两个数值时默认向下或者向右 - 2.不改变元素本身特性 3.保留元素原来位置 应用 一般不单独使用 单独使用会保留原来位置 所以经常配合绝对定位使用 *—— fixed 固定定位 特性 1.不保留原来位置，完全脱离文档流 2.基于视口定位{浏览器可视窗口}，不会随着滚动条移动 3.将元素特性改变为用于行块特性的块级元素 应用 需要固定在页面的东西 固定导航 返回顶部 或者其他 absolute 绝对定位 用的叫多 特性 1.完全脱离文档流 2.可以改变元素特性，转换为行内块级 3.可以移动，其他定位都影响他的定位 基于最近的的定位了的父级元素，如果没有，基于body sticky 粘性定位 定位要素 display:flow-root 触发bfc transform:translate（-50% -50%） 平移居中 margin 居中 margin:auto 居中 
2. 元素隐藏

 1.display:none 元素隐藏 2.opacity: .5 50% 元素透明 3.filter;opacity( 1 ) 数值控制 透明度隐藏 4.visibility :hidden 隐藏 元素可见性 visible 5.overflow: hidden 溢出隐藏 iconfont 字体图标

**3.动效 **

 过渡

 变换

 以及动画 三部分

 display:none 不能加动效 下拉框用 z-index: -1; 改变层级 opacity: 0; 透明度 transition:.5s; 过渡 li:hover .drop-down1{ opacity: 1; z-index: 2; } transition ： 2s 过渡 所有 执行过渡属性 transition-property:all所有 持续时间 s 秒 ms 毫秒 transition-duration: 1s； 时间函数（速度曲线）关键字 贝塞尔曲线 steps() 阶越函数 transition-timing-function: ease；ea； **重要 :transition-timin-function:linear 匀速运动 ease-in 延迟时间 transition-delay: 1s ;延迟一秒 transition: width 1s linear, height 变换 transform 属性 transform: translate(0,0)平移 transform: rotate（45deg） 旋转 rotatex 垂直方向旋转 rotateY 水平方向旋转 缩放 transform :scale ( 1,2)1个值代表xy同意 不同代表分开 scaleX 水平方向缩放 倾斜 transform :skew (45deg) 行内元素无法使用transform 2.设置变换基准点：旋转，缩放 transform-origin:left top;左上 transformstyle:preserve-3d 启动浏览器的3D渲染 需要在父级设置 perspective：px; 视距 backface-visibility:hidden;元素隐藏 背面不可见 配合旋转使用 动画 @keyframes 关键帧 animation:{}执行动画 执行时 匀速运动，延迟时间 循环次数 执行方向 结束时停留位置} 动画 infinite 无限循环 altenrnate 奇数正向 偶数反向 animation-direction:alternate-reverrse 奇数反向，偶数反向正向执行 animation-fill-mode:backwards 回到原位; forwards 停留在动画结束位置 animation-play-state:paused 暂停执行 hover效果时鼠标悬停时暂停 rynning 继续执行 @keyframes ani{ from开始{ transform:translate(0px,0px) to 结束  

                                **    0916 - 弹性布局**

 内容 

 1.flex基础概念 2. flex 容器属性 3.flex 项目属性 4.flex 应用实例 5. 网格布局基础使用 1. flex 基础概念 设置弹性布局后，子元素的float,clear和 display:flex;a弹性布局 默认情况在一行显示 display:inline-flex 容器 ：设置flex的元素 项目 ：容器的直接子元素 主轴 水平方向，主轴可以改变可以从左到右，或者从上到下 侧轴 垂直方向 2. 容器属性 容器上的属性作用于所有项目上，容器属性共有6个 flex-wrap:wrap 换行 当设置内容超出盒子后，让他自动换行 nowrap 不换行 wrap-reverse 反向换行，换行后内容出现在上面 设置主轴方向 flex-direction:row;行 水平方向从左到右 flex-direction:column;列 垂直方向 从上到下 flex-direction:row-reverse 从右到左排列 flex-direction:column-reverse 从下到上排列 简写方式：direction wrap - "flex-flow:column nowrap " 主轴方向上的内容排列方式 justify-content：flex-start;描述从左边排列 and 右边排列 center 水平中间排列 space-between 两边不要 中间平分 space-around 两边中间都平分 space-evenly; 任何比例都平分 单个元素排列 align-items:stretch; 单行内容在交叉轴的排列方式，默认占满 center; 垂直居中 单行排列方式 flex-start 开始位置 flex-end 结束位置 多行元素排列 align-content: flex-start 排上面 flex-center 中间排列 flex-and 下面排列 space-between 中间平分排列 space-around 两边中间都平分排列 3.项目属性 项目上的属性作用于单个项目上 oreder：数值； -控制元素在弹性布局中的排列位置，默认为0.负值 align-self： 控制元素本身在交叉轴的排列方式 flex-end: 结束位置 flex-start: 开始位置 center: 居中 baseline: flex-grow 剩余空间的分配 默认基数为（0） 放大 flex-hrink 当空间不足需要压缩时，压缩的基数，默认基数为（1）缩小 都是默认基数而且不会换行时，内容会超出盒子 flex简写属性包含三个元素:grow shrink,basis ( 默认值;0 1 auto) basis 当产生空间分配时，元素所占初始大小 基础空间占位 四个盒子 width:calc（50% - 30%）计算公式，计算盒子两边宽度 align-content:space-evenly; fles-wrap:wrap 换行 4.应用 圣杯布局 :变换盒子顺序 oreder 负值直接变化位置 输入框布局 单位：vh=可视区域高度 网格布局 

                                    **        0917 响应式布局**

内容 1.响应式与自适应介绍 2.媒体查询的使用 3.栅格系统 4.bootstra的使用 目标： 区分响应式布局与自适应布局的区别 重点： 掌握如何实现响应式 掌握栅格系统的原理 了解如何使用bootstra 格式 @media screen-电脑屏幕 and ( max-width1000px 最大宽度) .box{ 背景颜色 宽度} 手机默认显示网页的宽度为980px viewport 控制页面内容在手机屏幕上过小的问题 栅格系统 页面宽度分成12份 清除浮动 .row::after content：空 ckear:both; display:block; .col-xs-12 最小屏幕 占100% 媒体查询 width:calc( 25% - 15px) 每个盒子25%减去15 .md-6 width:50% bootstrap col-sm-6 col-md-4 col-sm-3 移动端适配 概念 屏幕尺寸 屏幕对角线的长度，计量单位为英寸 * 像素 像素是硬件和软件所能控制的最小单位，画面上表示出来的最小单位，大小不固定。 * 分辨率-纵横向上的像素点数，单位是px * 设备像素：设备物理分辨率 * 设备独立像素：逻辑分辨率，将多个像素合并作为一个像素使用 * 设备像素比;dpr 即物理像素和设备独立像素的比值 由几个像素点合成的 web:px iso:pt an:dp viewport 视口 initial 初始化 device-width 设备宽度 如何实现移动端适配 widrh：414px height:200px 10rem=100PX rem：描述倍数单位，根标签的字体大小倍数，跟html有关 1、 10rem：网页整体宽度 flexible.js 专门设置字体大小配合rem使用 pxcook web px2rem插件自动变换rem单位 - 1vw：1/100 网页宽度 - 1vh: 1/100 网页高度 - vwin；vw与vh 较小值 - vmax: vw 与 vh较大值 2、 vw方案啊 （宽度不可控，不建议使用） 3、 vw=rem 根标签用vw font-size:13.33333% 如果使用分成100份来做网页，可以利用设计稿的宽度来除以100，来确定字体大小 /4、px,vw,flex 移动端适配的问题： - 边框问题 边框加tranform 加缩放可以缩小和缩短 .border-bootom::after{用伪元素去给元素加一条边框 position:absolute buttom:0 width；100px; content:""; display:block border-bottom:1px solid trasform:scale(1,3) 判断设备的 dpr 用@media -webkit-device-pixel-ratio (2)或者（3） - 图片显示（多倍图） 监听不同版本设备，预备3种图片，倍图 img使用方式网址 www.ruanyifeng.com/blog/2019/0… sass,less:预处理器