1.VsCode操作 1）语言切换 2）“文件”——首选项——“设置” 3）插件：view in browser open in browser 4）快捷键 alt+b 使用默认浏览器打开 shift+alt+向下箭头 向下复制一行 shift+alt+向上箭头 向上复制一行 alt+向下箭头 向下移动行 alt+向上箭头 向上移动行 shift+tab 向前移动 ctrl+z 回退一步
2.浏览器及内核 1）chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 2）Firefox火狐——Mozilla公司 特点——非盈利，Gecko项目开源 内核——Gecko 3）Safari苹果——苹果公司 特点——移动端 内核——webkit 4）Opera欧朋——挪威——Opera software ASA: 特点——自主研发presto内核 内核——presto、blink 5）IE——Microsoft 特点——IE和Windows系统捆绑推向市场 内核——trident 总结： 1)使用trident内核的：IE及国产浏览器 2)Gecko内核的:Mozilla的Firefox 3)Blink内核：chrome、opera 4)webkit内核：Safari、chrome,及一些国产双核浏览器 前缀 浏览器
-webkit- chrome、safari -moz- firefox -ms- IE -o- opera3.前端页面的构成 1）HTML：超文本标记语言 Hypertext Markup Language(结构层) 结构层由HTML标记语言，负责页面的语义 2）CSS：层叠样式表 cascading style sheets,(样式层或表现层) 表现层负责页面的样式 3）JavaScript：脚本语言(行为层) 行为层负责描述页面的动态效果
4.什么是HTML？ HTML是超文本标记语言。定义 HTML是使用标记来描述网页的一种语言。干什么 HTML是一种语法简单、结构清晰的语言。特点
5.HTML文档——网页 扩展名：.html。 文件名的格式：主文件名.扩展名
6.HTML标签语法： 标记——标签、元素 HTML标签：由尖括号包围的关键词 单标签：<标签名 />或<标签名> 双标签：<标签名>[内容]</标签名> <标签名 属性名=“属性值”>[内容]</标签名> 空元素严格模式下开始标签中进行关闭
HTML的注释：ctrl+/ <!--HTML注释内容 -->7.HTML文档的基本结构
:帮助浏览器正确的显示我们的网页 <html> <head> <meta charset="utf-8"> <title>网页标题</title> </head> <body> </body> </html> <!DOCTYPE html> <!-- 文档申明--> 网页基本结构8、常用标签： 块级标记： 1）标题标签：h系列 h1~h6大小依次减小，重要程度依次减弱 h1在同一个网页中只能使用一次；其他标签可以重复使用 特点：默认情况下宽度100%，默认情况下高度自适应，独立成行；自带间距，自带间距和加粗 2）段落标记：p标签 特点：默认情况下宽度100%，默认情况下高度自适应，独立成行；自带间距 3）div标签: 语法：
[内容] 特点：默认情况下宽度100%，默认情况下高度自适应，独立成行； 其他标签： 4）br标签：强制换行标签——不产生新段落的情况下，进行换行 语法： 或 5）hr标签：水平分割线标签 语法：行块级标签： 14)img图片标签 语法： alt属性：用来为图片定义预备替换文本 width属性：图片的宽度 height属性：图片的高度 特点：默认情况下水平布局，元素可以设置宽度和高度、换行和空格会被解析 15)
9、路径： 1）绝对路径：带有域名的文件的完整路径或盘符下的某个路径 2）相对路径：/表示根目录 ./表示当前目录，可省略 …/表示上级目录 …/…/表示上上级目录 文件名/引用下级目录
10、语义化 1）什么是HTML语义化： 根据页面内容结构，选择合适的标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，有益于SEO，便于团队开发和维护。例如：标题用h1~h6，段落使用P标签 2）语义化的好处 在没有CSS的情况下，页面也能够呈现出较好的内容结构； 语义化能使我们的代码更具有可读性，便于团队开发和维护； 语义化有利于用户体验； 语义化有利于SEO搜索引擎优化；
11、特殊符号 空格 小于号< < 大于号> > & & 已注册 ® 版权符号 © 商标 ™
12、什么是CSS？ CSS——层叠样式表， cascading style sheet 主要用于html页面文本内容、图片外形、版本布局等外观样式的设置
13、css语法规则： 1）语法： 选择器 声明语句 ; 声明语句 ;声明语句 div{width:200px;height:200px;background-color:red;} 属性名：属性值 2)注释： /* css注释内容 */
14、样式的引用方式 1）行内样式——内联式 语法：
适用于：个别元素添加特殊样式时 缺点：作用范围小，尽量不要使用 2）内部样式——嵌入式（内嵌式） 语法： 适用于：单个HTML文档需要特殊样式时 优点：相对行内样式，代码能够复用 3）外部样式——外链式，引入扩展名为.css的文件 语法： rel属性：当前文档与被链接文档之间的关系，只有stylesheet得到所有浏览器的支持，表示外部文件的类型是css文件 适用于：多个HTML文档具有相同样式时， 创建步骤： （1）新建扩展名为.css的文件，保存到网站目录的css文件夹中 （2）打开新建的.css文件，设置编码方式：@charset “utf-8” （3）在HTML文档中，链接后缀名为.css的文件： 4)样式表的优先级: 行间样式>内部样式>外部样式 外部就近原则15、基础选择器：选择器——找对象 1）通配符选择器*：单独使用选择所有元素 2）元素选择器——标签选择器、类型选择器 结构中：<标签名></标签名> 样式中：标签名{css样式} 3）class选择器——类选择器 结构中：<标签名 class=“类名”></标签名> 样式中：.类名{css样式} 选择器的命名规范： 名称尽量有含义； 名称建议以英文开头，可以包含字母、数字、连字符（—_）; 除了连字符之外特殊符号不能使用（包含空格）； 不能使用中文汉字、不能使用纯数字，不能以数字开头； 类名会区分大小写 4）id选择器——唯一 结构中：<标签名 id=“id名”></标签名> 样式中：#id名{css样式} 注意：id名称在本页面中只能出现一次 5)选择器的优先级：一般来说，选择器的权值越大，优先级越高 基本选择器的权值有小到大：通配符选择器（0）<标签选择器（1）<class选择器（10）<id选择器（100）<行间样式（1000） 如果选择器的权值相同，后写的内容会覆盖先写的内容 行间样式拥有最高优先级但是高不过!important: background-color: lightcoral !important; 16、文本文字属性 ps中的编辑-首选项-单位与标尺，将文字和标尺的单位改成像素 文字属性： 1）font-size属性：字号，单位像素 浏览器默认字号为16像素 2)font-family属性：字体、字族 如果字体名称包含空格，字体名称上加引号； 多个字体名称可以作为一个回退系统来保存，如果第一个字体不被浏览器支持，则尝试下一个，多个字体之间用逗号隔开 中英文混排：英文字体排在中文字体前面 Arial,“Time New Roman”,“微软雅黑”，“宋体” 3）font-weight属性：文字加粗,范围100900,100400都是normal font-weight:normal;正常(相当于400) font-weight:bold;加粗（相当于700） font-weight:900; 4)font-style属性:文字样式 font-style:normal;正常 font-style:italic;斜体 5)line-height属性：文字行高,文字设置了行高后，会在行高的范围内垂直居中，但是行高撑不起盒高。没有设置单位的行高值，表示字号的倍数。 6)font属性 font：[font-style][font-weight]font-size[/line-height]font-family 注意：只有同时具有font-size和font-family才有效 文本属性： 7）color:文字颜色 英文名称：transparent透明、red红色、绿色green、蓝色blue 十六进制色值：由09，af组成，6位十六进制数，红色#ff0000-#f00, RGB(r,g,b):红色，绿色，蓝色，取值范围在0-255 RGBA(r,g,b,a):红色，绿色，蓝色,a-alpha透明度，取值范围0-1之间，0表示完全透明，1表示完全不透明，0——1之间表示半透明效果 8)text-align属性：文本的水平对齐方式，设给块级元素，图片的水平对齐也可以设置 text-align:left;默认值，左对齐 text-align:center;居中对齐 text-align:right;右对齐 9）text-decoration属性:文本装饰线 text-decoration:none；去掉文本装饰线 text-decoration:underline；下划线 text-decoration:overline；上划线 text-decoration:line-through；删除线 10）text-indent属性：文本块的首行缩进，单位px,em（字符宽度的倍数），百分比（相对于父元素宽度的百分之多少）
6、css长度单位 px:像素，相对于显示器的屏幕分辩率而言的，值相对较固定，计算较容易 em:相对长度单位，跟父级（祖宗们）元素的字号大小（font-size）有关 浏览器默认字号为16像素，未经调整的浏览器都符合1em=16px 特点：值是不固定的，会继承父元素的字号大小 %:相对长度单位， rem:相对于根元素的字体大小的单位，是css3新增的单位 浏览器在默认情况下，1rem=16px 在IE8及更早版本的浏览器中不兼容
7、html中的列表 1)无序列表（ul的子元素必须是li，li里可以放任何） 语法：
特点：宽度100%；高度自适应；独立成行自带间距、填充；自带列表符（清除自带列表符list-style:none;） 2)有序列表 语法： 特点： 3）自定义列表 语法： 列表标题或专业术语 列表项或对专业术语的解释 标题 列表项 注意：浏览器显示，dd中的内容会默认缩进显示8、表格：可以将数据有效的组织在一起，并以网格的形式显示。 特性：有内容的、没有固定宽度的单元格，由内容撑开 没有固定宽度的空单元格，默认情况下平分表格的宽度 语法： 普通表格：
表格的标题 表头单元格,默认文字加粗，并且水平垂直居中表头 </tr> <tr> <td>表格单元格，默认情况下，水平居左，垂直居中</td> <td>普通单元格</td> </tr> <tr> <th>表头单元格</th> <td>普通单元格</td> </tr> </table> 复杂表格： <table border="1"> <thead><!--表格的头，主要用来放置标题之类的东西--> <th>表头</th> <th>表头</th> </thead> <tbody><!--表格的身体，用来放置数据--> <tr> <td>表格单元格</td> <td>表格单元格</td> </tr> </tbody> <tfoot><!--表格的底部，用来放置脚注之类的东西--> <tr> <td>单元格</td> <td>单元格</td> </tr> </tfoot> </table> 表格属性： border属性：表格边框 border="1|0",border="0"表格没有边框 cellpadding属性：单元格内容和单元格边框之间的距离，单位像素 <table border="1" cellpadding="20"></table> cellspacing属性：单元格之间的间距，单位像素，默认大小为2像素 <table border="1" cellspacing="20"></table> 合并单元格： 跨行合并单元格：rowspan 夸列合并单元格:colspan 表格常用的css属性： border-collapse属性：设置表格的行和单元格的边是否合并还是独立 border-collapse: separate;边框独立 border-collapse: collapse;相邻边合并 border-spacing属性：当表格边框独立时，行和单元格的边框在横向和纵向上的间距 如果是两个长度值，第一个主要用于横向间距，第二个主要用于纵向间距 如果是一个长度值，这个值作用域横向和纵向的间距 border-spacing: 10px 0; 表格优点：方便排列一些有规律的、结构均匀的内容和数据 表格缺点：产生垃圾代码、影响页面的下载时间、灵活性不大、难于修改9、表单：用于采集不同类型的用户输入数据，发送给服务器，实现用户和服务器之间的数据交互 1）表单标签form:用于声明表单，定义数据的采集范围 注意：一个页面中能有多个form标签，但是标签之间相互独立，不能嵌套； 用户向服务器发送数据时，一次只能提交一个表单中的数据；如果要提交多个表单，需要使用js中的异步交互方式来实现。 语法： 表单元素 method属性：提交表单时所用的http方法，默认情况下为get方式 get方式：将数据作为URL的一部分发送给服务器；安全性比较低；有长度限制；请求的数据可以被缓存，能够保留在浏览器的历史记录中；能作为书签被收藏； http://www.baidu.com?userneme=123&psd=asd http://www.baidu.com?参数名=参数值&参数名=参数值 post方式：将数据隐藏在http数据流中进行传输；安全性比get方式高；对数据的长度没有限制请求数据不会被缓存，也不会在浏览器，历史记录中保存，更不会作为书签被收藏 http://www.baidu.com 2）input表单域 单行文本输入框 密码框
<input type="radio">单选按钮 <input type="checkbox">复选框 checked属性：主要用于单选按钮和复选框默认选中，可以直接在input元素中写checked或者checked="checked" <input type="submit" value="提交">提交按钮 <input type="reset" value="重置">重置按钮 <input type="button" value="普通按钮">普通按钮 <button>按钮</button>默认类型为submit <button type="submit">提交按钮</button> <button type="reset">重置</button> <button type="button">普通按钮</button> <input type="file">上传文件 注意：实现后台上传文件，必须在form表单中添加enctype属性 <form action="#" enctype="multipart/form-data"> <input type="image" src="图片路径" alt="提示性文字">图片形式的按钮 注意：input必须与src属性和alt属性配合使用 <input type="hidden" value="值">隐藏域。用户不可见，目的是为了搜集或发送信息到服务器，有利于程序处理信息 3)select下拉列表 语法： <select name=""> <option value="html" selected>html</option>/*列表项，加载时预先选定的选项*/ <option value="css">css</option> </select> selected属性：主要用于下拉列表的默认选中，可以直接写成selected或selected="selected" 4)textarea多行文本域：一般用于需要输入大量文本的位置 <textarea cols="" rows=""></textarea> cols属性：cols="1"，表示宽度，一行最多可以输入一个汉字，两个字符 rows属性：表示行数 textarea{resize:none;}禁止用户调整多行文本域的大小DAY04 5)label标签：标注标注——扩大点击范围，一般与单选按钮、复选框组合使用。 关联方式： 显示方式： 吃饭 隐式方式：吃饭 6)表单相关属性: readonly属性：只读属性，不能修改，可以被提交 disabled属性：禁用表单元素，被禁用的元素，不可点击，不会被提交
maxlength属性：允许输入的最多字符数 size属性：控制input的长度 value属性：初始值 placeholder属性：文本域的提示信息 checked属性：radio和checkbox selected属性：下拉列表 select2、css选择器——复合选择器 1）后代选择器——选择器之间用空格隔开 选择器1 选择器2{css样式}/在选择器1范围内的所有选择器2全部生效/ 2）子代选择器——只能选择第一级子元素 父选择器 > 子选择器{css样式} 3）群组选择器——分组选择器，选择器之间用逗号隔开 选择器1，选择器2{css样式}/选择器1和选择器2都具有相同的属性/ 4）交集选择器——两个以上的选择器组成 结构中：
样式中：div.active{css样式} 5)伪类选择器：用来添加选择器的特殊效果 语法：选择器：伪类{css样式} 链接的不同状态都可以以不同的方式显示： a:link{链接的默认样式} a:visited{链接访问过后的样式} a:hover{鼠标悬停到链接上的样式} a:active{鼠标摁下时的样式} 四个伪类状态都生效：LV-Ha3、盒模型Box Model css盒模型也称为框模型，在页面的布局当中，将页面的元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范。包含：元素内容content、内填充padding、边框border、外间距margin等几个要素。css盒模型本质就是一个盒子，封装周围的html元素。 标准盒模型的计算公式： 盒子的实际宽度=width属性+padding-left+padding-right+border-left+border-right 盒子的总宽度=width属性+padding-left+padding-right+border-left+border-right+margin-left+margin-right 盒子的实际高度=height属性+padding-top+padding-bottom+border-top+border-bottom 盒子的总高度=height属性+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom 盒模型的相关属性： 1)内容属性： width属性:元素的宽度 属性值：auto|数值|百分比（父元素宽度）|inherit height属性：元素的高度 属性值：auto|数值|百分比（父元素宽度）|inherit（继承） max-width属性：最大宽度 min-width属性：最小宽度 max-height属性：最大高度 min-height属性:最小高度
2）padding属性：内填充（内边距），元素边框和元素内容之间的空白区域 单边的内填充设置： padding-top属性：上内填充 padding-right属性：右内填充 padding-bottom属性：下内填充 padding-left属性：左内填充 复合写法： padding: 10px;/元素的四周各有10像素的内填充/ padding:10px 20px;/元素的上下各有10px的内填充 左右20px的内填充/ padding:10px 20px 30px ;/元素的上有10px，左右各有20px，下有30px的内填充/ padding: 10px 20px 30px 40px;/元素的上有10px,左侧有20px,下侧有30px,右侧有40px的内填充/ 注意：百分比的形式的padding,上下内填充和左右内填充相对于父级元素宽度计算的
3）border属性：边框 border-width属性:边框的宽度，属性值单位像素 border-style属性：边框的样式 border-style:none;没有边框 border-style:solid;单实线 border-style:double;双实线 border-style:dashed;条状虚线 border-style:dotted;点状虚线 border-color属性：边框颜色,默认的边框颜色是元素本身的前景色 复合写法： border-width:npx border-width:npx mpx border-width:npx mpx xpx border-width:npx mpx xpx ypx border-color属性、border-style属性 单边属性： border-top:上边框 border-top-width属性:上边框的宽度 border-top-style属性：上边框的线型 border-top-color属性：上边框的颜色 border-top:border-top-width border-top-style border-top-color border-right属性：右边框 border-bottom属性：下边框 border-left属性：左边框 border简写：（四周都有） border：border-width border-style border-color 4）margin属性：外间距、外边距——定义元素周围的空间 小三角的制作： 宽高为0， border-width: 100px 100px 100px 0; border-color:transparent green; border-style: solid; 单边外间距： margin-top属性：上外边距 margin-right属性：右外边距 margin-bottom属性：下外间距 margin-left属性：左外间距 复合写法： margin:npx 上右下左 margin:npx mpx 上下 左右 margin:npx mpx xpx 上 左右 下 margin:npx mpx xpx ypx 上 右 下 左 盒子的水平居中： width属性 margin :0 auto; 固定宽度且居中，一般居中盒子需要设置固定的宽度 注意：行级元素实际不占上下外边距 margin值的问题： 1）父子关系外边距塌陷问题：元素嵌套关系时，子元素的margin值会叠加给父元素 现象：给子元素设置外间距，会和父元素的外间距合并，最终会表现出其中较大的外间距的值 原因：父级盒和子级盒公用一个上外间距导致的 解决方法： 给父元素设置边框或设置内填充； 给父元素添加overflow:hidden属性，触发BFC，改变父元素的渲染规则 2）兄弟关系的外边距叠加问题——元素并列关系，垂直方向上相邻的margin值相遇，会出现叠加 现象：上一个盒子设置下外间距，下一个盒子设置上外间距, 两个值相同，取当前值；两个值不同，取较大值 原因：上下两个兄弟关系的盒子，公用一个外间距区域 解决方法：给两个盒子都添加一个父盒子，父盒都添加overflow:hidden属性
Day05 1、背景属性 1）background-color属性:背景颜色，默认值为transparent透明 关键词|十六进制色值|rgb(r,g,b)|rgba(r,g,b,a) 背景颜色应用于内容区、padding、border区域 2）background-image属性：背景图片 语法:background-image:url(图片的路径) background-image:none;(无背景图，默认值) 3)background-repeat属性:背景图是否重复 background-repeat: repeat;默认值，背景图在水平方向和垂直方向重复 background-repeat: repeat-x;背景图在水平方向重复 background-repeat: repeat-y;背景图在垂直方向重复 background-repeat: no-repeat;背景图不重复 4）background-position属性:背景图位置 语法：background-position:xpos ypos; 属性值： 关键词：left|center|right top|center|bottom 保证不超过两个关键词，一个是水平方向，一个是垂直方向，如果只出现一个关键词，另一个关键词默认为center 长度值：图像的左上角0px 0px,负值向盒外移动，正值向盒内移动 百分比：图像在左上角0% 0%，右下角100% 100% 如果只有一个百分比的数值，这个值作为水平方向的值，垂直方向将假设为50% 5)background属性： background:background-color background-image background-repeat background-position; 注意：如果某一个属性不需要，可以再直接省略
2、css的三大特征 1）层叠性： (1)样式冲突：就近原则 (2)样式不冲突：不会层叠，但会叠加 2）继承性：——子元素会继承父元素的样式 可以继承的属性： 字体系列属性：font-family;font-size;font-weight;font-style;line-height 文本系列属性：text-indent;text-align;text-decoration;color; 列表当中属性：list-开头的属性 3）优先级： 选择器的权值越大，优先级越高；权值相同时，谁在后面优先显示谁 基础选择器权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100） 复合选择器权值计算方式：组成复合选择器的所有单一选择器的权值累加 .box div{} 权值：10+1=11 #box .box p{} 权值：100+10+1=111 行间样式的优先级高于id选择器； 继承样式的权值为0，子元素中设置的样式，会覆盖继承到的样式 在样式将中定义！important，优先级高于行间样式
3、标签分类 标签分类——行级标签、块级标签、行内块标签 1）行级元素 inline-level 常用元素：span、em、i、b、strong、sub、sup、del、a 特点：默认情况下，宽度随内容的变化而变化； 默认高度由内容撑开； 不会独立成行，相邻的行内元素排列在同一行中，直到一行拍不下，才会换行； 换行和空格会被解析； 具有部分盒模型特征：宽高无效，边框保留 使用：一般用来容纳文本和其他内联元素，通常被包含在块元素中使用。 2）块级元素 block-level 常用元素：div、p、h1-h6、ul、li、ol、dl、dt、dd 特点：默认宽度撑满父元素的宽度； 默认高度有内容撑开； 默认元素垂直布局； 具有全部的盒模型特征。 使用：块级元素中，可以添加块级元素，行级元素，行内块元素； 3）行内块元素 inline-block 常用元素：img、input 特点： 具有块级标记的特征：可以设置宽高、内填充、外间距； 具有行级标记的特征：默认横向显示，直到一行排不下，才会换行；换行和空格会被解析
4、框类型转换——display display：none;元素不会被显示；——隐藏元素,不占位 display：block;元素的显示；将元素显示为块级元素，具有块级元素的特征 display：inline;将元素显示为行级元素,具有行级元素的特征 display：inline-block;将元素显示为行块级元素,具有行块级元素的特征
5、浮动 1）什么是浮动？ 文档流：可以显示的对象在排列时所占的位置 浮动：使元素脱离正常的文档流，按照我们指定的方向发生移动，直到碰到它的父元素的边界或另外一个浮动元素的边框为止 注意：元素的水平方向浮动，元素只能左右移动而不能上下移动 2）浮动的属性： float:left；元素向左浮动 float:right；元素向右浮动 float:none；默认值，元素不浮动 3)浮动特性： (1)浮动是元素脱离正常文档流; (2)浮动元素的层级可以提升 (3)浮动可以使行级元素支持宽高设置； (4)浮动元素可以使块级元素由内容撑开； (5)元素添加浮动之后，不占位，父级盒高度为0 4)浮动带来的影响 元素浮动以后，脱离正常文档流，导致父元素高度塌陷，父元素高度为0，会影响父元素统计的后续元素的正常布局 5）清除浮动方法：（父高、父浮、父over、并div、clearfix） (1)为浮动元素的父级盒添加固定的高度——不够灵活 (2)为浮动元素的父级盒加上浮动——会产生新的浮动问题 (3)为浮动元素的父级盒设置overflow属性，属性值可以使hidden|scroll|auto可能导致内容显示不完全；代码简洁 (4)在浮动元素之后，跟浮动元素呈并列关系的位置，加一个空的div，在空div上添加一个clear:both;——代码冗余；通俗易懂、书写方便 (5)推荐方式：给浮动元素的父级盒加一个类名.clearfix .clearfix{*zoom:1;}//IE6,7兼容 .clearfix::arfer{ content:""; display：block; clear:both; overflow:hidden; height:0; } 不会在结构上产生冗余代码，可以重复使用，符合闭合浮动思想，结构语义化正确
6、overflow属性——溢出隐藏,包含水平方向和垂直方向 overflow-x:只包含水平方向 overflow-y:只包含垂直方向 overflow:visible;溢出显示，默认值 overflow:hidden;溢出隐藏 overflow:scroll;溢出显示滚动条 overflow:auto;自动 overflow:inherit;继承
7、clear属性——清浮动 clear:left;清除左侧浮动 clear:right;清除右侧浮动 clear:both;清除两侧浮动
Day06 1、浮动的目的： 为了让我们的多个块级元素在同一行显示 最核心的关键点：怎么排列、是否占位
2、伪元素选择器（行级元素） 1）element::before{content：“伪元素的内容”；属性名称：属性值} 在element的内部，内容之前添加“伪元素的内容” 2）element::after{content：“伪元素的内容”；属性名称：属性值} 在element的内部，内容之后添加“伪元素的内容”
3、样式重置——css reset 网页在现实的过程中，由于浏览器的内核不同，版本不同，对默认样式属性值的解析也是不同。将所有元素的自带样式去掉，然后重装，可以再不同内核、不同版本的浏览器中，都接地到相同的属性 *{ margin: 0; padding: 0; } body,h3,h4,p{ margin: 0; padding: 0; }
4、定位技术——position css的定位机制：普通文档流、浮动、定位 1）定位原理：允许元素相对于其正常位置、相对于父元素（祖辈和亲父亲）、相对于浏览器窗口本身的位置，做相应的调整 元素位置的调整：left|right属性、top|bottom属性 2）使用时机：出现覆盖关系 3）定位属性：position 静态定位position:static;默认值 相当于没有定位，元素会出现在正常文档流中 相对定位position:relative;相对于本身的位置进行定位（本身的位置还在） 一般用于元素的微调，作为绝对定位的参考元素 特点： （1）不会影响元素本身的特性 （2）相对定位依然占位 （3）如果没有定位偏移量，对元素本身没有任何影响，如果定义了定位偏移量，相对于原来位置发生偏移 （4）能够提升层级 绝对定位position:absolute——相对于最近的定位父元素定位（定位父级，添加了绝对相对） 特点： （1）使元素完全脱离正常文档流，不占位 （2）有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移 （3）使行级元素支持宽高；没有设置宽度的块级元素，宽度自适应。 （4）提升层级 绝对定位的步骤：——子绝父相 （1）为要做特殊定位的盒子（定位盒）添加position：absoluted;绝对定位 （2）设置初始位置，通过top|bottom、left|right属性 top:0;|bottom:0; right:0|left:0; (3)定位盒的父级盒(有固定宽度和高度)，设置position:relative；相对定位 (4)回到定位盒，通过top|bottom、left|right属性进行精确定位 固定定位：position:fixed；——相对于浏览器窗口进行的定位 特点： （1）元素定位后脱离正常文档流，不占位； （2）始终相对于浏览器的四个角为原点，进行定位设置，不会随页面内容滚动而滚动； （3）使行级元素支持宽高，没有设置宽度的块级元素宽度自适应 （4）提升层级
4）边界重叠:margin-left=-1px;额外加类名 Day08 1、定位属性 position：absolute;绝对定位，元素不占位 相对于定位父级盒 position:fixed；绝对定位 元素不占位 相对于浏览器窗口来定位 position：relative；相对定位 元素占位 相对于元素本身的位置来定位 position：static;静态定位 元素占位 相当于没有定位
定位偏移属性： left:0； right:0;水平方向偏移量 top:0; bottom:0;垂直方向偏移量
定位层级：只对定位生效 z-index属性：设置定位盒的叠放次序，属性值没单位，z-index属性值越大，叠放次序越高。 值可能为：正整数、负整数、0（默认值） 注意： 只对定位元素生效，添加了相对，绝对，固定定位 数值越大，叠放次序越高 如果取值相同，根据书写顺序，后来居上； 正值向上调整层级，负值向下调整层级； 属性值没有单位 定位实现盒子的水平垂直居中——绝对居中 1）margin负间距： 必须知道居中盒的宽度和高度 为居中盒设置绝对定位； 距离定位父级左边框和上边框的距离设置50%； 将预算分别左移和上移，移元素宽度和高度的一半。 2）margin:auto；绝对定位元素的居中 必须知道知道居中盒的宽度和高度； 为居中盒设置绝对定位； 分别设置left：0；right:0; top:0; bottom:0; 为居中盒这是margin:auto； 脱离文档流属性总结——css2中，能脱离正常文档流中的属性设置 1）float：left|right;脱离文档流，但不脱离文本流 2）position:absolute|fixed;既脱离文档流，又脱离文本流 注意：所以的标签都能够使用float和position属性,元素脱离文档流后，不再区分块级和行级元素，都具有共同的属性：宽度由内容撑开，可以设置width和height属性及所有的盒模型属性。
2、常见属性 1）vertical-align属性:设置元素的垂直对齐方式（行级、行内块） vertiacl-align:baseline;将元素放在父元素的基线上 vertiacl-align:top;顶端对齐 vertiacl-align:middle;中部对齐 vertiacl-align:bottom;底部对齐
vertiacl-align:super;上标<sup></sup> vertiacl-align:sub;下标<sub></sub>2)使用：图片下方间隙问题 （1）将图片转成块级元素，解决下方问题； （2）为图片元素设置垂直对齐方式，解决下方间隙问题； vertical-align: top|middle|bottom； （3）图片的父元素设置高度，并添加溢出隐藏（overflow：hidden）； （4）为图片的父元素设置font-size或line-height属性，属性值为0，会对子元素中的字造成影响，解决下方间隙问题： 3）使用：文本框和按钮不对齐现象 为input元素设置vertical-align属性； 为input元素设置float属性，overflow：hidden； 3、显示隐藏属性 1）display属性 display：none;元素的隐藏，将整个元素隐藏，不占用任何内存空间 display：block；元素显示， 2)visibility属性 visibility:hidden;元素内容不可见，只隐藏内容，占位空间仍然保留 visibility:visible;元素可见 3）设置元素位置，让其消失 4）overflow属性,将要隐藏的元素移出父元素的范围 5）opacity属性，实现元素的不可见,占位依然存在 4、透明度属性 1）opacity属性：——元素的不透明度，将当前元素及子元素。将内容和背景全透明 兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器下支持 取值范围：01,0表示完全透明，1表示完全不透明，01表示半透明效果 2）filter属性——IE专属：Alpha（opacity=x） 兼容性：仅支持IE6、7、8，在IE10及以上版本被废除 取值范围：0100,0表示完全透明，1表示完全不透明，0100表示半透明效果 3）rgba(r,g,b,a)——用于颜色的不透明度设置 兼容性：IE6、7、8不支持，IE9及更早版本的浏览器中都支持 r-red 红色 0-255 g-green 绿色 0-255 b-blue 蓝色 0-255 a-alpha 透明度 0-1
5、多栏布局 什么是自适应？ 自适应：让同一个页面自动去使用不同大小的设备，从而解决为不同设备提供不同版本的问题 自适应布局：解决在不同大小的设备上呈现相同网页的问题 1）两列自适应布局：左侧宽度固定，右侧宽度自适应 html结构中——左右两个盒子； 左边固定宽度，右侧宽度100%； 为左侧盒子设置position：absolute; 右侧盒子添加子盒设置padding-left，属性值为左侧盒子的宽度。 2)圣杯布局——三列布局，左右宽度固定，中间宽度自适应 html结构中——先写主体内容后侧边栏； 两个固定宽度，中间内容宽度设置width：100%； 主体内容和左右侧边栏之间分别加float：left; 左侧设置margin-left：-100%;将左侧拉到最左边，右侧设置margin-left:-右侧边的宽度； 将中间露出了：在外面的大盒子上设置padding值，padding：0，右侧边的宽度 0 左侧边的宽度； 分别为左侧边和右侧边设置position:relative；左侧设置left:-左侧边的宽度；还原左侧边。右侧边设置right:-右侧边宽度；还原右侧边 3)双飞翼布局——三列布局 两端宽度html结构中——先写主体结构后侧边，有主体内容 两侧固定宽度，中间宽度设置width：100%； 主体内容和左右侧边分别加浮动float:left; 左侧边设置margin-left=100%,;左侧拉到最左边；右侧设置margin-right:-右侧边宽度； 在主体内容盒的子盒上设置margin：0 右侧边的宽度 0 左侧边的宽度；将中间内容露出了 4)等高布局 (1)利用内外间距相抵消，为父元素设置overflow:hidden; 注意： 每一列使用padding撑开背景颜色，每一列使用padding撑开的多余的占位，用margin负值取消； 父级盒设置溢出隐藏 优点：结构简单，兼容所以的浏览器 缺点：不是真正的等高，是伪等高，需要合理控制margin和padding值 (2)利用内容撑开父元素的特点给每一列添加相对应的容器，进行相互嵌套，并且在每个容器中添加背景颜色， 三个嵌套的div负责背景，三列放在最内侧的div盒子中； 通过相对定位分配三列背景位置; 通过margin负值，将内容移到对应的背景位置； 父元素设置溢出隐藏； 优缺点：扩展性好，可以实现自适应，结构嵌套复杂； (3)利用边框模拟背景，实现等高的显示效果 左右边框颜色、内容背景分别复杂三列的背景颜色； 通过margin值，同步列的位置； 特点：扩展性差，三列+的布局不适用 Day08 2.css技巧 1）css sprites——精灵技术，雪碧技术，通常也称为“css图像拼合”或"贴图定位"，将一堆小图整合到一张大图上，通过background-imgage、background-repaet属性显示图片，并且使用background-position属性实现图片的精确显示，减少服务器对图片的请求数量。 优点： 能够减少网页的htpp请求，提高页面的性能； 减少图片命名上的困扰； 更换风格方便； 缺点： 必须要限定容器的大小，背景图片位置需要计算； 维护的时候比较麻烦 css sprites的使用步骤 制作具有多个状态的拼合图片； 给要显示背景的盒子一个固定的尺寸，以背景的方式，让其局部显示； 通过background-position背景图定位属性控制不同的显示状态 2)css小箭头 使用css绘制两个三角形，使用绝对定位让两个三角形不完全重叠，处于上层的三角形比处于下层的三角形的偏移属性多1px 两个i宽度高度为0； 设置border 在IE6中添加font-size:0；line-height：0；目的——为了让i标签的height:0;生效。 3)css滑动门技术 目的：为了使各种特殊形状的背景能够自适应元素中文本内容的多少 核心：利用css sprites、背景图位置以及盒子的padding属性撑开盒子的宽度，适应不同字数的导航栏
3、BFC——block formatting context 1)什么是BFC? 块级格式化上下文，web页面可视化css视觉渲染的一个部分，是页面中一个独立的渲染区域。用于决定块盒子的布局和浮动相互影响范围的区域，可以改变父元素的渲染规则。 2)怎么样生成BFC： 根元素 float:left|right； position：absolute|fixed; overflow:hidden|scroll|auto; display：inline-block; 3)BFC特性： 内部的元素会在垂直方向上一个接一个放置； 垂直方向上的距离由margin值决定，属于同一个BFC的两个相邻元素的margin值会重叠； 每个元素的左外间距与包含块的左边界相接触，浮动也是如此； BFC区域不会与浮动元素区域重叠； 计算BFC高度时，浮动子元素也会参与计算； BFC是页面上的一个隔离的独立的容器，容器中子元素不会影响到外面元素，反之亦然。 4）BFC解决的问题： （1）外间距折叠问题——避免margin值叠加问题 （2）自适应两栏或三栏布局 自适应两栏布局——左侧固定宽度，右侧不设宽度（或者宽度100%），则右侧宽度为自适应，随浏览器窗口宽度的变化而发生相应的变化 自适应三栏布局——左右宽度固定，中间不设宽，中间宽度自适应，随着浏览器窗口的变化而发生相应的变化 （3）防止字体环绕 （4）清浮动 Day10 2.盒子和文字的阴影 1）盒子阴影box-shadow属性: box-shadow:x轴偏移量 y轴偏移量 阴影的羽化值 阴影的大小 阴影的颜色 内阴影|外阴影（默认外阴影）； x轴偏移量：水平方向的偏移，正值向右偏，负值向左偏 y轴偏移量：垂直方向的偏移，正值向下偏，负值向上偏 阴影的羽化值：模糊值 注意：可以向一个元素添加多个阴影，多组阴影之间用逗号隔开 2）文字阴影text-shadow属性 text-shadow:x轴偏移量 y轴偏移量 阴影的羽化值 阴影的颜色； x轴偏移量：水平方向的偏移，正值向右偏，负值向左偏 y轴偏移量：垂直方向的偏移，正值向下偏，负值向上偏 阴影的羽化值：模糊值 3）文本溢出处理 单行文本溢出： text-overflow：clip；文字溢出后直接修剪 text-overflow：ellipsis;文字溢出部分用省略号代替 text-overflow:string;文字溢出后，用给定的字符串表示被修剪的文本，只在火狐浏览器中生效；text-overflow:“abc” 强制不换行 white-space:nowrap;overflow:hidden; 注意： 要实现文本溢出处理，需要与 white-space:nowrap;overflow:hidden;属性配合使用 英文在没有标点和空格情况下，要换行： word-wrap:normal;只允许在断字点换行； word-wrap:break-word;在长单词或url地址内部进行换行； 多行文本溢出显示省略号： 使用webkit的css扩展属性： overflow:hidden; text-overflow:ellipsis;
display：-webkit-box;将标签设置为弹性伸缩盒子 -webkit-line-clamp:2;行数 -webkit-box-orient:vertical;伸缩盒子元素的排列方式 使用伪元素模拟溢出显示省略号的效果 .box2{ height:60px; line-height:30px; overflow:hidden; position:relative; } .box2::after{ content:"..."; position:absolute; right:0; bottom:0; background:#fff; padding:10px; }4.ps基本操作
5、图片格式 1）psd：是ps的源文件格式，分层文件 2）在页面中常用地的图片格式 jpg格式——jpeg:不支持透明，色彩丰富；适合复杂颜色及形状，网页中的高清大图 文件相对较小；有所压缩，反复保存，图片质量会下降。 gif格式：支持透明和不透明的效果，色彩丰富，支持动画；适用于色彩单一的图标、动画图片 文件小，没有兼容性问题；只支持256种颜色 png格式：支持透明、不透明、半透明效果；适用于网页中的小图，存在半透明效果的图片 png8:支持半透明，功能和gif相似 png24：色彩丰富，对半透明效果的细节显示较好，IE6中不支持 无损压缩；不支持动画，色彩丰富，图片尺寸较大 webp格式：文件较小，支持有损压缩和无损压缩，支持动画、透明；浏览器的兼容性不好；主要适用于支持webp格式的app和webview。 6、拆分页面的原则 精确到一个像素， 先上下，后左右，从外向里， 先整体后局部，再到细节 7、智德和善 Day12 1.字体图标iconfont——https://www.iconfont.cn/ 1)通过检索界面选择需要的图标，添加到购物车 2）打开购物车，选择下载代码 3)将下载好的文件解压，并将文件中的字体（.eot|.svg|.ttf|.woff|.woff2）放入fonts文件，并将对应iconsfont.css文件拷贝到css文件夹中，链接到HTML文档中 4）在html文件中添加制定类名和图片的名称 2.边框圆角border-radius border-radius:xpx 四周xpx border-radius:xpx ypx 左上角和右下角xpx 右上角和左下角ypx border-radius:xpx ypx npx 左上角xpx 右上角和左下角ypx 右下角npx border-radius:xpx ypx npx mpx 从左上角顺时针，依次 border-top-left-radius
