软件的架构：
- c/s架构：
- b/s架构：
网页的结构：
- w3c标准：
- 网页的标准框架：
元素：
- 行内元素有哪些？块级元素有哪些？空(void)元素有那些？
一般元素：
列表（块元素）：
超链接（行内元素）：
ID属性：
图片标签：
内联框架：
- iframe 有那些优点和缺点？
音频标签：
视频标签：
- HTML5的离线储存怎么使用，它的工作原理是什么
css：
css定义变量：
- link和@import的区别
- CSS 优化和提高性能的方法有哪些？
选择器：
超链接的伪类：
样式的继承：
样式的权重：
像素和百分比：
文档流：
盒子模型：
元素水平方向布局：
元素垂直方向的布局：
垂直外边距的重叠：
行内元素的盒模型：
浏览器默认样式：
练习总结：
- 网页的基本布局：
- 下拉块的隐藏：
- 下拉框上方的小三角
- 画一条0.5px的线
- 设置小于12px的字体
- 如何解决 1px 问题？
盒子的大小：
浮动：
- 浮动元素引起的问题？
- 清除浮动的方式如下：
阴影：
轮廓线：
圆角：
高度塌陷和BFC:
clear：
clear伪元素：
clearfix:
定位：
- absolute与fixed共同点与不同点
定位的层级：
字体：
图标字体：
行高：
文本的水平对齐：
行内元素的垂直对齐：
设置文本修饰：
设置网页如何处理空白：
- 单行、多行文本溢出隐藏
字体的其他属性：
字体的加粗和风格：
背景：
雪碧图：
线性渐变：
表格：
表单：
过渡：
动画：
平移：
旋转：
缩放：
Less:
弹性盒：
- 弹性元素的属性（按比例给子元素设置）：
- 弹性容器的属性：
完美视口：
- px、em、rem的区别及使用场景
VW:
媒体查询：
- 响应式布局：
- 使用媒体查询：
- 媒体特性：
- 移动端适配主要有两个维度：
移动端开发规范：
居中总结：
隐藏元素的方法有哪些
ie浏览器页面混乱的解决方式：

软件的架构：

c/s架构：

特点1.使用时必须安装 2.软件更新时服务器和客户端同时更新 3.c/s架构的软件不能同时跨平台使用 4.c/s软件客户端和服务端通信采用自有协议通信非常安全

b/s架构：

本质上也是c/s架构，只不过b/s架构的软件使用浏览器作为软件的客户端，b/s架构软件使用通过浏览器访问网页的形式来使用软件
特点：1.软件不需要安装，直接使用浏览器访问指定网页即可。
2.软件更新时客户端不需要更新
3.软件可以跨平台，只需系统中有浏览器即可
4.b/s架构的软件客户端和服务端通信采用通用的HTTP协议，相对来说不安全

网页的结构：

w3c标准：

结构html+表现css+行为javascript

网页的标准框架：

<!doctype html>声明当前网页版本
meta用来设置网页的元数据，charset用来设置网页的字符集，避免乱码
网页的标题，搜索引擎会根据title中的内容来判断网页的主要内容，会出现在百度搜索结果的题目和点进去之后的网页最上面的标签栏中 元数据中(meta)：charset指定网页的字符集，name指定数据名称（description网站描述，keywords表网站关键字），content 指定数据内容。网站的描述会显示在搜索引擎的结果中，在title下面显示，title标签的内容会作为搜索结果的超链接上的文字显示。 DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档， <ul> <li>CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。</li><li>BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。</li></ul> <a name="QsDXY"></a> <h1 id="ce7u5"><a name="ce7u5" class="reference-link"></a>元素：</h1>块元素：单独写一行、换行的元素，一般通过块元素对页面进行布局 行内元素：不换行的元素，主要用来包裹文字，一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素 块元素中基本什么都能放 P元素中不能放任何的块元素 浏览器在解析网页时，会自动将网页中不符合规范的内容进行修正（加载到内存中进行修正）比如： 1.标签写在根元素的外部 2.p元素中嵌套块元素 3.根元素中出现了除了head和body以外的子元素 <a name="GEoFk"></a> <h3 id="dgbcav"><a name="dgbcav" class="reference-link"></a>行内元素有哪些？块级元素有哪些？空(void)元素有那些？</h3><ul> <li>行内元素有：a b span img input select strong；</li><li>块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p； <a name="Aqtsf"></a> <h2 id="6zryah"><a name="6zryah" class="reference-link"></a>一般元素：</h2>语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下： </li><li>对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录； </li><li>对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。</li></ul> 常见的语义化标签： <header></header> 头部 <nav></nav> 导航栏 <section></section> 区块（有语义化的div） <main></main> 主要区域 <article></article> 主要内容 <aside></aside> 侧边栏 <footer></footer> 底部 p标签表页面中的一个段落块元素 blockquote表示一个长引用块元素（引用某个人说的话） nav表示网页中的导航（导航栏） div块元素常用 span行内元素一般用于网页中选中文字 q表示一个短引用行内元素自动加双引号 em表示语音语调的加重行内元素 strong表示强调重要内容行内元素 br表示换行 b表示加粗字体 i表示斜体 sub表示定义下标文本 sup表示定义上标文本 small表示缩小字体 <ul> <li>画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</li></ul> <canvas id="myCanvas" width="200" height="100"></canvas> 复制代码 <ul> <li>SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准</li><li>地理定位：Geolocation（地理定位）用于定位用户的位置。</li></ul> web worker: 在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。 如何创建 web worker： <ol> <li>检测浏览器对于 web worker 的支持性</li><li>创建 web worker 文件（js，回传函数等）</li><li>创建 web work</li></ol> HTML5新特性： 语义化标签：header,footer,nav aside、main、canvas 画布、audio, video、drag 拖拽、本地存储 localStorage, sessionStorage、webSocket 长连接、定位、增强型表单 input number, datalist, keygen, output, progress、svg 矢量绘图、webWorker 实现js多进程。 <a name="aL7BO"></a> <h2 id="61a2hy"><a name="61a2hy" class="reference-link"></a>列表（块元素）：</h2>1.有序列表 2.无序列表 3.定义列表 其中无序列表用的最多:使用ul来定义无序列表，用li来定义列表项 <a name="dArZz"></a> <h2 id="atfih4"><a name="atfih4" class="reference-link"></a>超链接（行内元素）：</h2>超链接虽然是行内元素，但是却在a标签中嵌套除了自以外的任何元素 属性href ：指定跳转的目标路径（指定成javascript:;时不发生跳转，作为占位符使用） 当需要跳转到服务器内部页面时一般会使用相对路径 相对路径会使用./或../开头：./可以省略不写，表示当前文件所在的目录。 ../表示当前文件所在目录的上一级目录 其他属性：target：用来指定超链接打开的位置可选值：self默认值当前页面，blank在一个新的页面中打开 跳转到页面的任何位置：只需将href属性设置成#目标元素的id属性值（#表示锚点） <a href="#top"></a> src与href的区别： <ul> <li>src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。常表示图片的目录</li><li>href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。 <a name="WOtED"></a><h2 id="bztkg9"><a name="bztkg9" class="reference-link"></a>ID属性：</h2>是元素的唯一标识，同一个页面不能出现重复的id属性值，字母开头区分大小写。 <a name="xwbjD"></a><h2 id="g6azn5"><a name="g6azn5" class="reference-link"></a>图片标签：</h2><img src="">img是一个自结束标签，属于替换元素（既有块元素又有行内元素具有两种元素的特点） src属性：路径规则和超链接一样 alt属性：是对图片的描述，默认情况下不显示，有些图片会在浏览器无法加载使显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎收录 width和height：如果只修改了高度或者宽度中的一个，另一个也会等比例缩放 图片的格式：jpeg(jpg)：支持颜色丰富，不支持透明效果，不支持动图（一般显示照片） gif：支持颜色较少，支持简单透明，支持动图（支持颜色单一的动图） png：支持颜色丰富，支持复杂透明，不支持动图（主要用的） webp：谷歌新推出的专门用来表示网页中图片的一种格式，具备其他图片格式所有的优点，而且文件特别小 base64：将图片使用base64进行编码，这样可以直接将图片转为字符，通过字符的形式引入图片，一般都是一些需要和网页一起加载的图片才会使用base64（同步加载，加快访问速度） 如果需要网页和图片共同加载时需要用base64进行加密 </li></ul> <a name="yI6qU"></a> <h2 id="qhysc"><a name="qhysc" class="reference-link"></a>内联框架：</h2>用于向当前页面中引入一个其他页面标签：iframe（替换元素） src 指定要引入网页的路径 frameborder 指定内敛框架的边框 <iframe src = "https://www.qq.com"width= '800'height="600"frameborder = '\'> <a name="FlfJp"></a> <h3 id="cwvmny"><a name="cwvmny" class="reference-link"></a>iframe 有那些优点和缺点？</h3>iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 优点： <ul> <li>用来加载速度较慢的内容（如广告）</li><li>可以使脚本可以并行下载</li><li>可以实现跨子域通信</li></ul> 缺点： <ul> <li>iframe 会阻塞主页面的 onload 事件</li><li>无法被一些搜索引擎索识别</li><li>会产生很多页面，不容易管理</li></ul> <a name="qkWHm"></a> <h2 id="npdko"><a name="npdko" class="reference-link"></a>音频标签：</h2>audio：默认情况下不允许用户自己对音乐进行播放 属性：controls：是否允许用户控制播放 autoplay：音频文件是否自动播放 loop：音乐是否循环播放 src：音乐路径 除了src之外还可以通过source来指定文件路径： <audio controls> 对不起，您的浏览器不支持播放音频，请升级浏览器 <source src = "./source/audio.mp3"> <source src = "./source/audio.ogg"> </audio> 外观通过js和css来设置 <a name="RAaw6"></a> <h2 id="4mxyka"><a name="4mxyka" class="reference-link"></a>视频标签：</h2>它的用法和audio一样但是标签时video，需要注意的是，音视频文件不会直接放到服务器中，会放在专门的音视频服务器中，或者将视频放到视频网站中用地址引过来，可以用内联框架 <a name="SIBr7"></a> <h3 id="10538y"><a name="10538y" class="reference-link"></a>HTML5的离线储存怎么使用，它的工作原理是什么</h3>离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示 使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性： <html lang="en" manifest="index.manifest"> 复制代码 （2）在 cache.manifest 文件中编写需要离线存储的资源： CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 复制代码 <ul> <li>CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。</li><li>NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。</li><li>FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。</li></ul> （3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。 如何更新缓存： （1）更新 manifest 文件 （2）通过 javascript 操作 （3）清除浏览器缓存 注意事项： （1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。 （2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。 （3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。 （4）FALLBACK 中的资源必须和 manifest 文件同源。 （5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。 （6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。 （7）当 manifest 文件发生改变时，资源请求本身也会触发更新。。 <a name="Pwk5z"></a> <h1 id="d5ugei"><a name="d5ugei" class="reference-link"></a>css：</h1>css是用来设置网页中元素的样式，共有三种方式： 1.内联样式：在标签内部使用style属性来设置元素样式，问题是：使用内联样式只能对一个标签生效，不能复用所以开发时不能用内联样式 2.内部样式表将样式编写到head中的style标签里，然后通过css选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时，只修改一处即可。问题：内部样式只能对一个网页起作用，它里面的样式不能跨页面进行复用 3.外部样式表：可以将css样式编写到一个外部的css文件中，然后通过link标签引入外部css文件。将样式写在外面之后可以使用浏览器的缓存机制，从而使网页加快速度，提高用户体验 <a name="knAlp"></a> <h1 id="bo4sim"><a name="bo4sim" class="reference-link"></a>css定义变量：</h1><ol> <li>root {</li><li>—borderColor: #ccc;</li><li>}</li><li>使用：background-color:var(—borderColor);</li><li> </li></ol> <a name="tv1CL"></a> <h3 id="ef9vjm"><a name="ef9vjm" class="reference-link"></a>link和@import的区别</h3>两者都是外部引用CSS的方式，它们的区别如下： <ul> <li>link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。</li><li>link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。</li><li>link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。</li><li>link支持使用Javascript控制DOM去改变样式；而@import不支持。</li></ul> <a name="bV17r"></a> <h3 id="34o08h"><a name="34o08h" class="reference-link"></a>CSS 优化和提高性能的方法有哪些？</h3>加载性能： （1）css压缩：将写好的css进行打包压缩，可以减小文件体积。 （2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。 （3）减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。 选择器性能： （1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等； （2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。 （3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。 （4）尽量少的去对标签进行选择，而是用class。 （5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。 （6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。 渲染性能： （1）慎重使用高性能属性：浮动、定位。 （2）尽量减少页面重排、重绘。 （3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。 （4）属性值为0时，不加单位。 （5）属性值为浮动小数0.，可以省略小数点之前的0。 （6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。 （7）不使用@import前缀，它会影响css的加载速度。 （8）选择器优化嵌套，尽量避免层级过深。 （9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。 （10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。 （11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。 可维护性、健壮性：** （1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。 （2）样式与内容分离：将css代码定义到外部css中。 <a name="WWRtB"></a> <h1 id="48c659"><a name="48c659" class="reference-link"></a>选择器：</h1>元素选择器：标签名{} id选择器：#id{} 类选择器：.className{} 通配选择器：（选中页面中的所有元素） 注意：id选择器不能重复使用，class选择器可以重复，可以同时为一个元素指定多个class(用空格分隔) 交集选择器：选中同时符合多个条件的元素 div.red{font-size:30px} 可以更精确的找到想要设置样式的元素(选自己) 注意：交集选择器中如果有元素选择器，则必须将元素选择器放在最前面 并集选择器：同时选择满足css样式的多个元素 #b1,p1,h1,span,div,.red{ } (选别人，选同时满条件的。注意区别后代选择器) 子元素选择器：父元素>子元素 div>span{ } 后代选择器：div span{ } div >p >span { } 选择下一个兄弟元素：前一个+后一个 选择所有兄弟：兄~弟 兄弟选择器一定是紧挨着的两个，都指的是后面的不是前面的 属性选择器：选择含有指定属性的元素p[title]{ color:red } 伪类选择器：用来描述一个元素的特殊状态 :first - child 第一个子元素 :last - child最后一个子元素 :nth - child(选中第几个子元素) n、2n/even、2n+1/odd :first - of - type :last - of - type :nth - of - type 这几个伪类选择器的功能和上述类似，不同点是它们在同类型的元素中排序 ul > li:first - child{ } ul中第一个li元素 ul > li:nth - child(2n+1){ } ul中第n个奇数位的元素 *ul > li:not(:nth-of-type(3)) { }ul中子元素是li不是第3个元素 <a name="gzGJe"></a> <h1 id="ckf3db"><a name="ckf3db" class="reference-link"></a>超链接的伪类：</h1>:link 用来表示没访问过的链接（正常的链接） :visited用来表示访问过的链接 :hover用来表示鼠标移入的状态 :active用来表示鼠标点击 :focus鼠标点击时的状态常用于input中 伪元素：表示页面中一些特殊的并不真实存在的元素(特殊的位置)伪元素使用::开头 ::first - letter表示第一个字母 ::first - line 表示第一行 ::selection表示选中的内容 ::before元素的开始 ::after元素的结束（最后） before和after必须结合content属性来使用 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。 <a name="d2D6l"></a> <h1 id="1avl3l"><a name="1avl3l" class="reference-link"></a>样式的继承：</h1>利用继承我们可以将通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有元素都具有该样式，并不是所有的样式都会被继承，比如背景和布局相关的这些继承都不会被继承 <a name="Mx15H"></a> <h1 id="3qwwk9"><a name="3qwwk9" class="reference-link"></a>样式的权重：</h1>内联样式：10000 id选择器：1 0 0 0 类和伪类和属性选择器：0 1 0 0 伪元素和元素选择器：0 0 0 1 通配选择器：0 0 0 0 继承的样式：没有优先级 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的） div #box1{color:blue}优先级 101 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器，如果优先级相同则优先使用靠下的样式。 可以在某一样式的后面加important，则此时该样式会获得最高优先级，甚至超过内联样式 继承样式没有优先级，会被随便一个对子元素设置的样式替换 对于选择器的优先级： <ul> <li>标签选择器、伪元素选择器：1</li><li>类选择器、伪类选择器、属性选择器：10</li><li>id 选择器：100</li><li>内联样式：1000</li></ul> 注意事项： <ul> <li>!important声明的样式的优先级最高；</li><li>如果优先级相同，则最后出现的样式生效；</li><li>继承得到的样式的优先级最低；</li><li>通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；</li><li>样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。</li></ul> <a name="YNTZ5"></a> <h1 id="4zttyu"><a name="4zttyu" class="reference-link"></a>像素和百分比：</h1>像素越小屏幕的显示效果越好，所以同样200px在不同设备下显示效果是不一样的 百分比：可以将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素的改变而改变 em:em是相对于元素字体大小来计算的 1em = 1font-size em会根据字体大小的改变而改变 RGB和RGBA:RGBA增加了透明度（1表示完全不透明，0表示完全透明，0.5表示半透明） 还有16进制的RGB值 background-color:#880000 HSLA:色相饱和度亮度透明度 <a name="TL7yN"></a> <h1 id="6bacex"><a name="6bacex" class="reference-link"></a>文档流：</h1>网页是一个多层的结构，通过css可以为每一层设置样式，作为用户来讲只能看到最顶上一层，这些层中最底下的一层称为文档流，文档流是网页的基础 元素在文档流中的特点： 块元素：1.块元素在页面中独占一行 2.默认宽度是父元素的全部（会把父元素撑满）3.默认高度被内容撑开（被子元素撑开） 行内元素： 1.不会独占一行，只占自身的大小 2.在页面中自左向右水平排列 3.默认宽度和高度被水平撑开 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin； <a name="IfKHB"></a> <h1 id="fspkhj"><a name="fspkhj" class="reference-link"></a>盒子模型：</h1>css将页面中的所有元素都设置成一个矩形的盒子，那么对页面的布局就变成了将不同的盒子摆放到不同的位置 每一个盒子都由以下几部分组成： 内容区(content) 内边距(padding) 边框(border) 外边距(margin) 可以通过修改元素的box-sizing属性来改变元素的盒模型： <ul> <li>box-sizeing: content-box表示标准盒模型（默认值）</li><li>box-sizeing: border-box表示IE盒模型（怪异盒模型）</li></ul> 边框的写法：border-width、border-color、border-style 或者border-left或者 border-top-width:10px（指定边框的情况）哪边没有就不写或者写成none border-width值的写法： 四个值：上右下左 三个值：上左右下 两个值：上下左右 一个值：上下左右 border-width、border-color、border-style都可以用以上的值的写法表示四个边 border-style的值：solid dotted dashed double 内边距：padding 内边距的设置会影响盒子的大小，背景颜色会延申到内边距上它的简写属性和border相同 内边距、内容区、边框会影响盒子的可见框的大小 外边距：margin不会影响盒子的可见框大小，但是会影响盒子的位置，属性值的写法和以上相同，它会影响盒子的实际占用空间 <a name="ZVJys"></a> <h1 id="b2trmw"><a name="b2trmw" class="reference-link"></a>元素水平方向布局：</h1>元素在其父元素水平方向的位置由以下几个属性共同决定 margin-left、border-left、padding-left、width、padding-right、border-right、margin-right 一个元素在其父元素中水平布局必须满足以下等式： margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素内容区的宽度 以上等式必须满足，如果相加等式不成立，则会自动调整 如果等式中没有auto则浏览器会自动调整margin-right值使得等式满足 这七个值有三个可以设置为auto 分别是width、margin-left、margin-right，如果某个值为auto则自动调整那个值使得等式成立 一般都是宽度最大，外边距为0，除非宽度固定，两个外边距为auto则会居中 所以水平方向的居中为：width:xxpx;margin:0 auto; <a name="JSOhH"></a> <h1 id="1w1bpo"><a name="1w1bpo" class="reference-link"></a>元素垂直方向的布局：</h1>子元素在父元素的内容区中排列，如果子元素的大小超过了父元素，则子元素会从父元素中溢出 用overflow来处理子元素的溢出 overflow: hidden(将溢出的裁剪)、 scroll（生成两个滚动条）auto（根据需要生成滚动条） <a name="R1s3t"></a> <h1 id="6ze868"><a name="6ze868" class="reference-link"></a>垂直外边距的重叠：</h1>—相邻的垂直方向的外边距会发生重叠现象 -兄弟元素间的相邻垂直外边距会取两者之间的较大值如：box1 margin - bottom:500px box2 margin - top:200px则会取box1 特殊情况：如果相邻外边距一正一负，则会取两者的和，如果都是负值，则会取两者中绝对值较大的 兄弟元素之间的外边距重叠对于开发是有利的不需要处理 父子元素：（要将子元素下移margin-top，父子元素会一块下移） 父子元素间的相邻外边距（上外边距），子元素会传递给父元素，也就是说会随着子元素一块跳，父子元素外边距的重叠会影响到页面的布局，必须要进行处理，有以下两种方式： 1.可以使其不相邻：给父元素加上边框就会隔开不相邻，再将高度减一点（父子都减） 2.相邻外边距，我们不用外边距，将子元素去掉外边距，将子元素下移给父元素加上内边距，但是盒子大小会变，在父元素中将父元素高度减一点 解决： <ul> <li>父元素加入：overflow: hidden</li><li>父元素添加透明边框：border:1px solid transparent</li><li>子元素变为行内盒子：display: inline-block</li><li>子元素加入浮动属性或定位 <a name="qIpdU"></a><h1 id="81hq6d"><a name="81hq6d" class="reference-link"></a>行内元素的盒模型：</h1>1.行内元素不支持设置宽度和高度 2.行内元素可以设置水平方向的padding、border、margin 但是垂直方向的padding、border、margin不会影响页面的布局 display用来设置元素显示的类型。可选值： inline将元素设置为行内元素 block将元素设置为块元素 inline-block将元素设置为行内块元素（既可以设置宽度和高度又不占一行） table将元素设置为一个表格 none元素不在页面中显示</li></ul> visibility用来设置元素的显示状态。可选值： 1.visible:默认值元素在页面中正常显示 2.hidden:隐藏不显示，但是依然占据页面位置 <a name="lkWF6"></a> <h1 id="97zhfb"><a name="97zhfb" class="reference-link"></a>浏览器默认样式：</h1>默认样式会影响页面的布局，通常要去除默认样式 *{margin:0; padding:0;} ul{list-style:none} 或者引入专门的去除样式的链接rest.css <a name="WwmCW"></a> <h1 id="6m8kw9"><a name="6m8kw9" class="reference-link"></a>练习总结：</h1><a name="uyCTK"></a> <h3 id="fag5i5"><a name="fag5i5" class="reference-link"></a>网页的基本布局： </h3> index.html中：1.title、meta(name-keywords、name-description) 2.引入link、公共css、图标css、样式重置css、自己的css 3.创建css文件夹和img文件夹以及index.html 4.公共css中：高度塌陷、对body的设置、导航条和中间块的设置 body{color:;background-color:;min-width:;font:;} 导航条中间快.w{width:; margin: 0 auto;} 自己的css中： 导航条最外.topber-wrapper{width:100%;height:;font-size:;color:;background:;line-height:字居中;} 1.字体的居中，给字体的line-height：设置为父元素的高度 2.去除超链接的下划线：text-decoration:none; 3.一个块元素的上边框设置成字体的宽度，则可以设置行内块元素 4.垂直方向子元素的宽度和父元素一样，高度默认被内容撑开 5.要使文字右移并且鼠标放上去左边也有样式，则需要给子元素的div加左内边距，不能加外边距，如果加了则最左边一部分就不属于子元素，鼠标将会在左边失去样式 6.如果子元素没有指定宽度，则加内边距不会撑开父元素，因为宽度默认为auto，所有值加起来要等于父元素的宽度 7.让行内元素所在行上下可以点击要设置display:block； 8.如果父元素的高度和宽度作用不大，就可以不设置，完全可以由子元素撑起来 9.如果子元素浮动，父元素设置line-height会没有居中作用 10.一般图片的底部会与底线重合 vertical-align 11.行间距 line-height = 字体大小加行高 12.给body加min-width当缩小屏幕时小到min-width时不再小防止溢出 13.兄弟元素布局用margin，父子元素padding 项目后续：1.设置网站图标（在收藏栏和标题栏）方法： <link rel = "icon" href="">网站图标一般在网站的根目录下名字叫做：favicon.ico 代码压缩：用专用工具压缩，取消注释和空格 <a name="LoyDG"></a> <h3 id="a78qom"><a name="a78qom" class="reference-link"></a>下拉块的隐藏：</h3>隐藏块：display:none; 一般可以通过改变元素高度加动画的效果来改变下拉块如图 <img src="https://cdn.nlark.com/yuque/0/2022/png/22947697/1645666838771-63c04c7b-2a16-4a92-a4d4-232baaf079f0.png#clientId=uf9fb7822-ed8c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=434&id=UMUun&margin=%5Bobject%20Object%5D&name=image.png&originHeight=543&originWidth=725&originalType=binary&ratio=1&rotation=0&showTitle=false&size=9955&status=done&style=none&taskId=u320e0d2e-f24b-4d87-a060-b1b767439ba&title=&width=580" alt="image.png"> 1为当前导航栏。2为下拉样式（默认隐藏） 过程：1的大小字体设置-2的字体大小设置-如果按照高度隐藏2的高度为0，再overflow隐藏2中的子元素，overflow为父元素隐藏子元素，2再加transition:height 0.3s- 12共同父元素:hover .2{ height:100px; }- 12共同父元素:hover .1{ 1中字体的变化设置 } <img src="https://cdn.nlark.com/yuque/0/2022/png/22947697/1645715301356-7a39a057-56c7-4d71-8919-fd15d5bcee61.png#clientId=uf9fb7822-ed8c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=247&id=ue33aa750&margin=%5Bobject%20Object%5D&name=image.png&originHeight=309&originWidth=591&originalType=binary&ratio=1&rotation=0&showTitle=false&size=6758&status=done&style=none&taskId=u124dbfec-d230-4022-9d1c-6a3cdd2ba95&title=&width=472.8" alt="image.png"> 情况2：当鼠标移入到1 2 3 4时5会出现，1 2 3 4均为li时 父元素 li:hover ~ .5 , .5:hover{ } 移入兄弟元素时为了保证不消失移入自己时也要设置。 想要隐藏框出现则必须把隐藏框选中，如果hover前是父元素选中隐藏框时，hover后用空格，hover前是兄弟元素时，hover后用~或者+ 并且隐藏框自己将 hover单独选一次 情况3：如果不想让鼠标移动到1和4显示5的效果。除了给2和3单独加相同的类之外还可以如下表示： 父元素 li:not(:first-of-type):not(:nth-child(4)):hover ~.5 , .5:hover:{ } <a name="tAqIX"></a> <h3 id="9alnag"><a name="9alnag" class="reference-link"></a>下拉框上方的小三角</h3>width:0px; height:0px; border-top:none; border-bottom-color:red; border:solid 7px transparent; 根据边框交界处产生的斜边贴合，当方块的宽度和高度均为0时，会有三角形效果 div { width: 0; height: 0; border: 100px solid; border-color: orange blue red green; } 复制代码 将元素的长宽都设置为0，显示出来的效果是这样的： <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237227-9d687ae1-3fc0-407d-833f-e04694b4a3f3.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ud9732a95&margin=%5Bobject%20Object%5D&originHeight=502&originWidth=1012&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u488dbe27-fdd3-4bb0-9304-4b6abd26e69&title=" alt=""> 所以可以根据border这个特性来绘制三角形： （1）三角1 div { width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent;} 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237226-912a3ec0-21b8-40f7-b773-ce5f37758778.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u383b948c&margin=%5Bobject%20Object%5D&originHeight=162&originWidth=738&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uab7ba350-d203-4cfc-a443-1cd972839b2&title=" alt="">（2）三角2 div { width: 0; height: 0; border-bottom: 50px solid red; border-right: 50px solid transparent; border-left: 50px solid transparent; } 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237238-6b152517-74c0-48e4-b885-bb37cfca4ed8.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub0ad8922&margin=%5Bobject%20Object%5D&originHeight=140&originWidth=630&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u4643dee4-bc40-4d79-a039-98e0f541707&title=" alt="">（3）三角3 div { width: 0; height: 0; border-left: 50px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237255-f2ac5a98-6d73-48ec-8bd1-3988b85a411f.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u8ecae35d&margin=%5Bobject%20Object%5D&originHeight=210&originWidth=646&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=ue90e232e-99b9-44b1-8550-6090c0f164d&title=" alt="">（4）三角4 div { width: 0; height: 0; border-right: 50px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237242-da5ab6eb-42b2-48c9-9c85-a75bebc02085.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uf075af4c&margin=%5Bobject%20Object%5D&originHeight=220&originWidth=690&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u5df8fd9d-69f0-4106-9213-a1ef0dd7e30&title=" alt="">（5）三角5 div { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973237663-a8ea7e41-d7b0-45a3-b98c-0e37cf10c7bd.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u15aeffbf&margin=%5Bobject%20Object%5D&originHeight=218&originWidth=738&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u1700543b-ddc4-4224-a4b7-4f9e3b7d7a4&title=" alt=""> 还有很多，就不一一实现了，总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。 用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形： div{ border: 100px solid transparent; width: 0; heigt: 0; border-radius: 100px; border-top-color: red; } 复制代码 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973378247-ecfdf702-ea3b-4717-8f6d-624ecc5570c4.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ud9a9f431&margin=%5Bobject%20Object%5D&originHeight=234&originWidth=738&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u849e0917-ea0a-4345-afff-bb254f7f801&title=" alt=""> <a name="vvbC5"></a> <h3 id="ghn409"><a name="ghn409" class="reference-link"></a>画一条0.5px的线</h3><ul> <li>采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：</li></ul> transform: scale(0.5,0.5); 复制代码 <ul> <li>采用meta viewport的方式</li></ul> <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 复制代码 这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果 <a name="pBVpt"></a> <h3 id="bltlyr"><a name="bltlyr" class="reference-link"></a>设置小于12px的字体</h3>在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。 解决办法： <ul> <li>使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。</li><li>使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；</li><li>使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。</li></ul> <a name="giUPQ"></a> <h3 id="4dpm2y"><a name="4dpm2y" class="reference-link"></a>如何解决 1px 问题？</h3>1px 问题指的是：在一些 Retina屏幕的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。它们之间的比例关系有一个专门的属性来描述： window.devicePixelRatio = 设备的物理像素 / CSS像素。复制代码 打开 Chrome 浏览器，启动移动端调试模式，在控制台去输出这个 devicePixelRatio 的值。这里选中 iPhone6/7/8 这系列的机型，输出的结果就是2： <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645973838060-0ef2715c-e10b-4661-9132-fa7a33ae27e6.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ub41b2ac2&margin=%5Bobject%20Object%5D&originHeight=650&originWidth=1928&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uc883a4d4-5a7d-48d5-a2c8-59297a7b45c&title=" alt=""> 这就意味着设置的 1px CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染，所以实际看到的一定会比 1px 粗一些。 解决1px 问题的三种思路： <a name="WPSjz"></a> <h4 id="f383j9"><a name="f383j9" class="reference-link"></a>思路一：直接写 0.5px</h4>如果之前 1px 的样式这样写： border:1px solid #333 复制代码 可以先在 JS 中拿到 window.devicePixelRatio 的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果（这里用 JSX 语法做示范）： <div id="container" data-device={{window.devicePixelRatio}}></div> 复制代码 然后就可以在 CSS 中用属性选择器来命中 devicePixelRatio 为某一值的情况，比如说这里尝试命中 devicePixelRatio 为2的情况： #container[data-device=”2”] { border:0.5px solid #333 } 复制代码 直接把 1px 改成 1/devicePixelRatio 后的值，这是目前为止最简单的一种方法。这种方法的缺陷在于兼容性不行，IOS 系统需要8及以上的版本，安卓系统则直接不兼容。 <a name="yfwuf"></a> <h4 id="bygyu3"><a name="bygyu3" class="reference-link"></a>思路二：伪元素先放大后缩小</h4>这个方法的可行性会更高，兼容性也更好。唯一的缺点是代码会变多。 思路是先放大、后缩小：在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。 代码如下： #container[data-device=”2”] { position: relative; } #container[data-device=”2”]::after{ position:absolute; top: 0; left: 0; width: 200%; height: 200%; content:””; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #333; } } 复制代码 <a name="Hwdzt"></a> <h4 id="cbuvtk"><a name="cbuvtk" class="reference-link"></a>思路三：viewport 缩放来解决</h4>这个思路就是对 meta 标签里几个关键属性下手： <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 复制代码 这里针对像素比为2的页面，把整个页面缩放为了原来的1/2大小。这样，本来占用2个物理像素的 1px 样式，现在占用的就是标准的一个物理像素。根据像素比的不同，这个缩放比例可以被计算为不同的值，用 js 代码实现如下： const scale = 1 / window.devicePixelRatio; // 这里 metaEl 指的是 meta 标签对应的 Dom metaEl.setAttribute(‘content’, <code>width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}</code>); 复制代码 这样解决了，但这样做的副作用也很大，整个页面被缩放了。这时 1px 已经被处理成物理像素大小，这样的大小在手机上显示边框很合适。但是，一些原本不需要被缩小的内容，比如文字、图片等，也被无差别缩小掉了。 <a name="FJkRu"></a> <h1 id="5j5dfj"><a name="5j5dfj" class="reference-link"></a>盒子的大小：</h1>box-sizing用来设置盒子的计算方式。可选值： 1.content-box默认值，原高度和宽度用来设置内容区的大小 2.border-box宽度和高度用来设置整个可见框的大小，那么width和height指的是内容区的内边距和边框的总大小 <a name="jMTsB"></a> <h1 id="a461kt"><a name="a461kt" class="reference-link"></a>浮动：</h1>作用：让页面中的元素水平排列 通过浮动可以使一个元素向其父元素的左侧或者右侧移动使用float属性来设置元素的浮动。 可选值：none默认值元素不浮动，left元素向左浮动，right元素向右浮动 浮动元素的特点： 1.浮动元素会完全脱离文档流，不再占用文档流中的位置 2.设置浮动以后元素会向父元素的左侧或者右侧移动 3.浮动元素默认不会从父元素中移出 4.浮动元素向左或者向右移动时不会超过它前面的其他浮动元素 5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移 6.浮动元素不会超过它上边的浮动元素的兄弟 注意：元素设置浮动以后，水平布局的等式便不需要强制成立，元素设置浮动以后，会完全从文档流中脱离，不再占用文档流中的位置，所以元素下边的还在文档流中的元素会自动向上移动。 脱离文档流之后块元素的高度和宽度默认会被内容撑开 行内元素脱离文档流之后默认会变成块元素 浮动之后不需要再区分行内和块元素了 浮动之后不会盖住文字，文字会自动环绕在浮动元素的周围，利用浮动来设置文字环绕图片的效果 解释：没有浮动的块元素占据一整行包括右外边距是遵循水平布局的等式，对于下面的浮动元素来说就像一堵墙无法超过 <a name="F6lYG"></a> <h2 id="6c4iot"><a name="6c4iot" class="reference-link"></a>浮动元素引起的问题？</h2><ul> <li>父元素的高度无法被撑开，影响与父元素同级的元素</li><li>与浮动元素同级的非浮动元素会跟随其后</li><li>若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构 <a name="h8gkU"></a> <h2 id="8eacq6"><a name="8eacq6" class="reference-link"></a>清除浮动的方式如下：</h2></li><li>给父级div定义height属性 </li><li>最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式</li><li>包含浮动元素的父级标签添加overflow:hidden或者overflow:auto</li><li>使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**</li></ul> <a name="ZK128"></a> <h1 id="c4pgj6"><a name="c4pgj6" class="reference-link"></a>阴影：</h1>box-shadow用来设置元素的阴影效果。值： 第一个：水平偏移量（正值向右） 第二个：垂直偏移量（正值向下） 第三个：阴影的模糊半径 第四个：阴影的颜色 box-shadow:0px 0px 50px rgba(0,0,0,0.3) <a name="wUp7Y"></a> <h1 id="cipwow"><a name="cipwow" class="reference-link"></a>轮廓线：</h1>outline用来设置元素的轮廓线，用法和border一样，轮廓线和边框不一样不会改变元素可见框的大小 <a name="FOy6f"></a> <h1 id="abulfl"><a name="abulfl" class="reference-link"></a>圆角：</h1>border-radius用来设置圆角的大小 例：border-top-left-redius: **border-radius可以分别指定四个角的圆角 四个值：左上、右上、右下、左下 三个值：左上、右上/左下、右下 两个值：左上/右下、右上/左下 一个值：全部** <a name="RO23Y"></a> <h1 id="2o9ub"><a name="2o9ub" class="reference-link"></a>高度塌陷和BFC:</h1>1.高度塌陷问题：在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，会完全脱离文档流，子元素从文档流中脱离将会无法撑起元素的高度，导致父元素高度丢失，父元素的高度丢失后，其下的子元素会自动上移，从而导致页面混乱。 所以高度塌陷是浮动布局中比较常见的问题 2.解决高度塌陷（BFC）：block formatting context块级格式化环境，开启bfc的元素会变成一个独立的布局区域 开启BFC的特点： <ol> <li>开启BFC的元素不会被浮动元素所覆盖（开启BFC的元素会浮动到元素的右边）</li><li>开启BFC的元素的子元素和父元素外边距不会重叠（由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。）</li><li>开启BFC的元素会包含子元素（避免高度塌陷）</li></ol> 方式：1.设置元素的浮动 2.设置为行内块元素 3.overflow:hidden 先来看两个相关的概念： <ul> <li>Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。</li><li>Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。</li></ul> 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。 通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。 创建BFC的条件： <ul> <li>根元素：body；</li><li>元素设置浮动：float 除 none 以外的值；</li><li>元素设置绝对定位：position (absolute、fixed)；</li><li>display 值为：inline-block、table-cell、table-caption、flex等；</li><li>overflow 值为：hidden、auto、scroll；</li></ul> BFC的特点： <ul> <li>垂直方向上，自上而下排列，和文档流的排列方式一致。</li><li>在BFC中上下相邻的两个容器的margin会重叠</li><li>计算BFC的高度时，需要计算浮动元素的高度</li><li>BFC区域不会与浮动的容器发生重叠</li><li>BFC是独立的容器，容器内部元素不会影响外部元素</li><li>每个元素的左margin值和容器的左border相接触</li></ul> BFC的作用： <ul> <li>解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。</li><li>解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。</li><li>创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。</li></ul> <a name="Wm4mO"></a> <h1 id="a4wqdu"><a name="a4wqdu" class="reference-link"></a>clear：</h1>BFC的缺陷是：它是解决高度塌陷问题的隐含属性不能直接去开。 如果我们不希望某个元素因其他元素浮动的影响而改变位置，可以通过clear属性来消除浮动元素对当前元素所产生的影响 clear作用：消除浮动元素对当前元素的影响 可选值：1.left 消除左侧浮动元素对于当前元素的影响 2.right 消除右侧浮动元素对于当前元素的影响 3.both消除两侧中影响最大的那一侧 原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，使得其位置不受兄元素浮动的影响 <a name="rlFid"></a> <h1 id="cuyevf"><a name="cuyevf" class="reference-link"></a>clear伪元素：</h1>使用clear伪元素来解决高度塌陷原理：可以用clear思想引入第二个子元素，放在第一个浮动子元素的下面设置清除左浮动，那么第二个子元素在第一个子元素的下面不会发生改变，则父元素会撑开不会塌陷 但是凭空加第二个子元素不是太好，可以利用after伪元素加标签并清除浮动(after加的元素是行内元素)： 给父元素末尾加，这样就可以解决子元素浮动造成的塌陷 box1::after{ content:””; clear:both; display:block; } <a name="Ky10c"></a> <h1 id="ca6jqs"><a name="ca6jqs" class="reference-link"></a>clearfix:</h1>父子元素间的相邻外边距，子元素会传递给父元素（垂直外边距的重叠）解决方法： 利用before伪类和行内元素类型转换的方法给父子元素相邻外边距的地方加元素（给父元素的开头加），这样它们的外边距就不会相邻 #a1::before{ content:””; display:table; } 所以和解决高度塌陷结合代码： .clearfix::before,//1 .clearfix::after{//2 content:””;//3 display:table;//4 clear:both;//5 } 注意：1、3、4解决垂直外边距的重叠。2、3、4、5解决高度塌陷问题 遇到以上两种问题时，直接给元素里面添加类名即可。 <a name="n4rZQ"></a> <h1 id="7x1ujy"><a name="7x1ujy" class="reference-link"></a>定位：</h1>定位是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置，可以通过position属性来设置定位。可选值： 偏移量：top、bottom、left、right（偏移量开启之后只会影响自己，偏移量的值跟margin差不多，理解也差不多，只是margin会影响别的元素而偏移量不会） static 默认值，元素是静止的没有开启定位 relative 开启元素的相对定位（1.不设置偏移量，元素不会发生任何变化 2.参照元素在文档流中的位置进行定位的 3.会提高元素的层级 4.不会使元素脱离文档流 5.不会改变元素的性质，块还是块，行内还是行内） 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的 (自恋型) 相对定位的特点∶(务必记住) 1．它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。 2．原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置)因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。 <a rel="nofollow" href="https://blog.csdn.net/M_emory_/article/details/123842619"> </a> absolute 开启元素的绝对定位（1.开启绝对定位之后，元素会从文档流中脱离 2.绝对定位会改变元素的性质，行内变成块，块的高度被撑开 3.绝对定位会使元素提升一个层级 4.绝对定位是相对于其他包含块来决定的） fixed 开启元素的固定定位（固定定位是一种绝对定位，与绝对定位不同的特点是永远参照浏览器的视口进行定位，不会随着网页的滚动条滚动而滚动）生成绝对定位的元素，指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮⼀般都是⽤此定位⽅式 固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变 sticky 开启元素的粘滞定位（粘滞定位和相对定位的基本特点一致，不同的是它可以在元素到达某个位置时将其固定）意思就是粘性定位是相对定位与固定定位的我结合。当有滚动条时滚动滚动条首先执行相对定位当到达指定的top时执行固定定位可以制作文章标题吸顶的效果。 绝对定位的包含块：就是离当前元素最近的开启了绝对定位的祖先元素，如果所有的祖先元素都没有开启定位，那么根元素就是它的包含块（html 根元素，初始包含块）只要position的值不是static，那便是开启了定位。 <a name="LZ9Dc"></a> <h3 id="1cnzwn"><a name="1cnzwn" class="reference-link"></a>absolute与fixed共同点与不同点</h3>共同点： <ul> <li>改变行内元素的呈现方式，将display置为inline-block </li><li>使元素脱离普通文档流，不再占据文档物理空间</li><li>覆盖非定位文档元素</li></ul> 不同点： <ul> <li>abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。</li><li>在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。</li></ul> 决定定位的水平布局： left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right = 包含元素的宽度 1.因为left和right的值默认是auto，所以如果指定left和right，则等式不满足时会自动调整这两个值 2.垂直方向的布局也必须满足 top+margin-top/bottom+border-top/bottom+padding-top/bottom+height+bottom 那么就总结出了：当居中时left和right为0，top和bottom为0，margin为auto position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 左右撑满屏幕：left:0 right:0 width:auto;上下撑满屏幕：top:0 bottom:0 height:auto <a name="mHxel"></a> <h1 id="94cs9r"><a name="94cs9r" class="reference-link"></a>定位的层级：</h1>对于开启了定位元素可以通过z-index属性来指定元素的层级 z-index需要一个整数作为参数，值越大，元素的层级越高，元素的层级越高越优先显示 1.如果层级一样，则优先显示靠下的元素 2.祖先元素的层级再高也不会遮住后代元素 通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。 z-index属性在下列情况下会失效： <ul> <li>父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；</li><li>元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；</li><li>元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；</li></ul> <a name="cMeZ7"></a> <h1 id="5c009i"><a name="5c009i" class="reference-link"></a>字体：</h1>font-size:字体的大小，单位：em相当于当前元素的一个字体大小。rem相当于根元素的字体的大小 font-family（字体族）可选值：serif衬线字体，sans-serif 非衬线字体，monospace 等宽字体。 font-family可以同时指定多个字体，多个字体间用逗号隔开 如果我们有自己的字体文件可以采用引入的方式： @font-face{ font-family: ; src: url( ); } font-family指的是我们自己给字体起的名字，src:url( )括号中的字体文件的路径 最后在对元素字体设置的css中引入我们给字体起的名字即可： font-family:myfont; 字体加粗方法：标签 标签 font-weight:bold <a name="Opkvr"></a> <h1 id="1gxoqq"><a name="1gxoqq" class="reference-link"></a>图标字体：</h1>引入图标字体的方式： 1.直接通过类名来使用图标字体 <div class="fas fa-ball"> 2.通过实体的方式引入：of3;&#x图标的编码 <a name="jQjl5"></a> <h1 id="8f7un5"><a name="8f7un5" class="reference-link"></a>行高：</h1>line-height: 行高指的是文字占有的实际高度。值的设置： 1.直接指定大小，单位有px和em 2.也可以直接为行高设置一个整数，如果是一个整数的话，行高将会是字体指定的倍数 3.行高还经常被用来设置字体的行间距：行高 = 字体大小 + 行间距 4.行高可以设置文字在元素中垂直居中，在元素中设置line-height = 元素的高度 <a name="IJ4Cq"></a> <h1 id="b0u14w"><a name="b0u14w" class="reference-link"></a>文本的水平对齐：</h1>text-align（给父元素）可选值： left 左侧对齐 right 右侧对齐 center 居中对齐 justify 两端对齐 <a name="J8GvG"></a> <h1 id="fl2jg"><a name="fl2jg" class="reference-link"></a>行内元素的垂直对齐：</h1>vertical-align设置元素垂直对齐方式（给父元素），可选值： baseline 默认值，基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐 设置图片时图片默认基线对齐会有缝隙，所以用此方法会解决图片的基线问题 CSS中有一个用于垂直居中的属性vertical-align，但只有当父元素为td或者th时，这个属性才生效，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性，但ie6和ie7并不支持display:table-cell。 <a rel="nofollow" href="https://blog.csdn.net/qq_51999757/article/details/120256545"> </a> <a name="vm1Nv"></a> <h1 id="896l3e"><a name="896l3e" class="reference-link"></a>设置文本修饰：</h1>text-decoration 可选值： none什么都没有，underline下划线，line-through删除线，overline上划线 下划线的颜色样式设置: text-decoration:underline red aotted <a name="fz10l"></a> <h1 id="4uoxfy"><a name="4uoxfy" class="reference-link"></a>设置网页如何处理空白：</h1>white-space 可选值： normal正常，nowrap不换行，pre保留空白 设置文字隐藏用…代替： white-space:nowrap; overflow:hidden; text-overflow:ellipsis; <a name="Ldu8Z"></a> <h3 id="62jgss"><a name="62jgss" class="reference-link"></a>单行、多行文本溢出隐藏</h3><ul> <li>单行文本溢出</li></ul> overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出用省略号显示 white-space: nowrap; // 规定段落中的文本不进行换行复制代码 <ul> <li>多行文本溢出</li></ul> overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: 3;// 第三行溢出用省略号显示 display: -webkit-box; -webkit-box-orient: vertical; 注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。 <a name="UsXAy"></a> <h1 id="6zeywl"><a name="6zeywl" class="reference-link"></a>字体的其他属性：</h1>font可以设置字体相关的所有属性。 语法：font:字体大小/行高字体族 行高可以省略不写，如果不写则使用默认值 注意：字体简写时，不写行高/加粗/斜体等等时，不意味着不写，而是在简写之前单独写的行高等会被覆盖掉，所以如果单独写行高要在简写的后面写 其他东西可以不写，但是字的大小和字体必须写，大小和字体族必须紧挨着并在后面 <a name="vSAnD"></a> <h1 id="9jqf70"><a name="9jqf70" class="reference-link"></a>字体的加粗和风格：</h1>font-weight 可选值： normal默认值不加粗，bold加粗 font-style：字体的风格 normal正常的 italic斜体 字体加粗方法：标签 标签 font-weight:bold <a name="Q1RCG"></a> <h1 id="979jf3"><a name="979jf3" class="reference-link"></a>背景：</h1>background-color:设置背景颜色 background-image设置背景图片 background-repeat：设置背景的重复方式，可选值： repeat 默认值，背景会沿着x轴，y轴双方向重复 repeat-x沿着x轴方向重复 repeat-y沿着y方向重复 no-repeat背景图片不重复 background-position用来设置背景图片的位置，可选值 top、left、right、bottom、center（使用方位词必须同时指定两个值），也可以用偏移量来指定 background-origin背景图片偏移量计算的原点。可选值： padding-box默认值背景图片的偏移量从内边距处开始计算 content-box背景图片的偏移量从内容区处开始计算 border-box背景图片的偏移量从边框处开始计算 background-clip设置背景的范围，可选值： border-box默认值，背景在边框的下面 padding-box背景不会出现在边框，只会出现在内容区和内边距 content-box背景只会在内容区 background-size:设置背景图片的大小： 第一个值表宽度，第二个值表高度，如果只写一个则第二个值默认为auto cover图片的比例不变将元素铺满 contain:图片比例不变，将图片放在元素中完整显示 background-attachment:背景图片是否跟随元素移动： scroll默认值，背景图片会跟随元素移动 fixed背景图片会固定在页面中，不随元素移动 背景练习： 练习1：写导航条上面的颜色渐变（上下渐变）将导航条上面裁一个像素宽放在div里设置横向重复即可 background-repeat：repeat-x; 练习2：用三个图片设置成一个按钮，要求要点击时出现颜色的变化 可以在鼠标移入和点击的同时加载三个相同且颜色不同的照片 a:link{ // 用来表示没访问过的链接 display:block; width:93px; height:30px; background-image:url(……); } a:hover{background-image:url(……)} a:active{background-image:url(……)} 注意： 1.图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载 2.浏览器加载外部资源时，是按需加载的，用则加载，不用则不加载 像之前练习的link会首先加载而hover和active会在指定状态触发时才会加载 <a name="WccwE"></a> <h1 id="fcq5y7"><a name="fcq5y7" class="reference-link"></a>雪碧图：</h1>可以解决图片闪烁问题 可以将多个小图片保存在一个大图片中然后通过调整background-position来显示相应的图片，有效的避免出现闪烁的问题 雪碧图的特点：一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验 使用步骤： 1.先确定要使用的图标 2.测量图标的大小 3.根据测量结果创建一个元素 4.将雪碧图设置为元素的背景图片 5.设置一个偏移量以显示正确的图片 a:link{display:block;width:30px;background-image:…} a:hover{background-position:30px 0;} a:active{background-position:60px 0;} <a name="syBlu"></a> <h1 id="caruov"><a name="caruov" class="reference-link"></a>线性渐变：</h1>渐变是图片，需要通过background-image来设置 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过度的效果 线性渐变：linear-gradient() linear-gradient(red,yellow)红色在开头，黄色在结尾，中间是过渡区域 径向渐变：radial-gradient()径向渐变，放射性效果 <a name="UUiZX"></a> <h1 id="74zjbo"><a name="74zjbo" class="reference-link"></a>表格：</h1>用table来创建一个表格 在table中使用tr表示表格中的一行，有几个tr就有几行 在tr中用td来表示一个单元格，有几个td就有几个单元格 <table> <tr> <td></td> </tr> </table> rowspan纵向的合并单元（向下合并，几个格子合并值等于几），colspan横向的合并单元格（向右合并，几个格子合并值等于几） 长表格：一般情况下可以将三个表格设置为三个部分，头部thead，主体tbody，底部tfoot th和td可以互换，表示头部的单元格默认居中 长表格的好处就是thead永远表示头部，不管放在页面代码的头部还是结尾均可 表格的设计方法： table里面border = 1；会是双线表格。例：<table border=1;> 去除双线：border-collapse：collapse;(常用) 和设置边框的合并 border-spacing:0px; table{ border: 1px solid black; margin:0 auto; border-collapse:collapse; } td{ border:1px solid black; } table属于块元素独占一行，默认情况下table的宽度会被内容撑开不是100% 所以表格的居中：margin : 0 auto; 表格每一行的背景色的设计（tr设置,tr默认是tbody的子元素可以省略不写）： tr:nth-child(2n+1){background-color:#bfa} 如果表格中没有使用tbody而是直接使用tr，那么所有的tr会被浏览器自动创建一个父元素tbody并且将tr全部放入tbody，所以tr是tbody的子元素 tbody>tr{…} 默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改，对于其他表格之外的元素vertical-align只影响文字内容，但对于td里的子元素 vertical-align 什么都可以影响 水平居中：text-align:center 垂直居中：vertical-align：middle line-height:父元素高度； <a name="eMM3n"></a> <h1 id="divdt3"><a name="divdt3" class="reference-link"></a>表单：</h1>在现实生活中表单用于提交数据 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器，使用from标签来创建一个表单 例： <from action="target.html"> 文本框：<input type = "text" name = "username"> 密码框：<input type = "password" name = "pswd"> </from> 以文本框为例： form中action表单要提交的地址，数据要提交到服务器中必须要给元素指定一个name，name指的是提交时name= 输入的值。name = username 输入qcq 在提交时username = qcq 指定了type之后就把这个表单的类型制定了，如密码框的type = password则输入框输入时就不会有密码的明文显示 单选按钮—-像这种选择框要指定一个value属性，value属性最终会作为用户填写的值传给服务器 例： <input type = "radio" name = "act" value = "A" checked> <input type = "radio" name = "act" value = "B" checked> 当我们选中时value中的值就会像用户填写的值一样传给服务器， 两个单选框要存在相关联的关系时，必须要指定相同的name，否则单选框都可以选择 打开时需要哪一个默认选中则需要给哪个选项加checked即可 多选框：多选框与单选框唯一的区别就是 type = “checkbox” 下拉列表： <select name = "act"> <option value = "i" selected>选项1</option> <option value = "ii">选项2</option> <option value = "iii">选项3</option> </select> 提交按钮： <input type = "submit" value = "注册"> 其他属性： 1.autocomplete = “off”关闭自动补全，如果不关闭文本框这种表单，当我们点击的时候，会有之前填写过的记录，方便填写，但是泄露隐私 2.readonly将表单设置为只读，数据会提交 3.disabled 将表单项设置为禁用，数据不会提交 4.autofocus设置表单项自动获取焦点 5.type = “color”取色器 6.type = “email”输出电子邮件专用框 7.type = “reset”重置按钮 8.普通按钮：<input type = "button"value = "按钮"> <button type = "submit">提交</button> <ol> <li>progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少</li><li>meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持） <ul> <li>high/low：规定被视作高/低的范围</li><li>max/min：规定最大/小值</li><li>value：规定当前度量值</li></ul> </li></ol> 设置规则：min < low < high < max <a name="EE4b1"></a> <h1 id="90suda"><a name="90suda" class="reference-link"></a>过渡：</h1>transition-property:height,width;指定要过度的属性 多个属性间要使用逗号隔开，如果多个属性都需要过度，则用all关键字，过度必须从一个有效值向另一个有效值过度 transition-duration：指定过度的持续时间时间单位：s和ms 1s:1000ms transition-timing-function:过度的时序函数，指定过度的方式，可选值： ease默认值，慢速开始，先加速后减速 linear匀速运动 ease-in加速运动 ease-out先加速后减速 cubic-bezier()先加速后减速 steps()分步执行过度效果 end在时间结束时执行过度，start在时间开始时执行过度 例：transition-timing-function:steps(2,start) transition-delay:过渡效果的延时，等待一段时间后在执行过度。例：transition-delay:2s; transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 transition:2s margin-left 1s; <a name="OvDFs"></a> <h1 id="5r5eye"><a name="5r5eye" class="reference-link"></a>动画：</h1>动画可以自动触发效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一步骤，先指定关键帧再执行动画 设置关键帧：@keyframes qcq{ from{ margin-left:0; } to{ margin-left:700px; }} qcq是自己起的关键帧的名字，from是动画的开始位置0%，to是动画的结束位置100% 设置box2的动画： .box2{ animation-name:qcq;//关键帧名字 animation-duration:4s//动画的执行时间 animation-delay:2s//动画的延时 animation-timing-function:ease-in-out;动画执行的时序函数 steps()分步执行过度效果 end在时间结束时执行动画，start在时间开始时执行动画，图片分为几个阶段则里面的值为几，有几个图片则为几 animation-iteration-count:infinite;//动画的执行次数 infinite无限执行 animation-direction:normal;//指定动画执行的方向 可选值：normal默认值从from向to运行 reverse从to向from运行 alternate从from向to运行重复执行动画，会原路返回 alternate-reverse从to向from运行重复执行动画，会反向执行 animation-play-state:running; 设置动画的执行状态 running默认值，动画执行，paused 动画暂停 } 动画与过渡的区别： <ul> <li>transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。</li><li>animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。</li></ul> <a name="NeHXD"></a> <h1 id="ede8t2"><a name="ede8t2" class="reference-link"></a>平移：</h1>变形就是指通过css来改变元素的形状或者位置，变形不会影响到页面的布局 transform用来设置元素的变形效果 平移：translateX()沿X轴方向平移，translateY()沿Y轴方向平移，translateZ()沿Z轴方向平移 transform:translateY(-100px/100%)百分比是相对于自身计算的 由于百分比是相对于自身计算的，所以可以利用这种方式去居中 position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%)//中间用空格隔开 z轴平移：调整元素在Z轴的位置，正常的情况下就是调整元素和人眼之间的距离。距离越大，元素离人越近， z轴平移属于立体效果（近小远大）默认情况下网页不支持透视，如果需要看见效果网页必须设置视距 html{ perspective:800px }设置当前的视距为800px 设置鼠标移入时元素沿着Z轴的变化 body:hover .box1{ transform:translateZ(800px) } <a name="ZOOAx"></a> <h1 id="3lfnrq"><a name="3lfnrq" class="reference-link"></a>旋转：</h1>通过旋转可以使得元素沿着X Y或者Z轴旋转指定的角度 rotateX() rotateY() rotateZ() transform:rotateZ(0.25turn) turn指的是圈 transform:rotateY(180deg)//度 translateZ(400px) 先旋转再平移 backface-visibility:hidden;//是否显示元素的背面，如果转到背面就没了 <a name="p8Scb"></a> <h1 id="1e3nfv"><a name="1e3nfv" class="reference-link"></a>缩放：</h1>scaleX()水平缩放 scale()双向缩放 transform:scale(2) 2倍缩放 transform-origin:center//缩放源点 一般给父元素的大小和设置3d变形效果，否则旋转时会变成一个面 transform-style : preserve-3d 每个照片设置透明效果：opacity:0.7; html在z轴平移时一定要加视距 html{ perspective:800px } <a name="bOWk4"></a> <h1 id="2s386b"><a name="2s386b" class="reference-link"></a>Less:</h1>less是一门css的预处理语言，是一个css的增强版，通过less可以编写更少的代码实现强大的样式，在less中添加了许多新的特性，像对变量的支持，对mixin的支持… less的语法大体上和css语法一致，但是less中增加了许多对css的扩展，所以浏览器无法直接执行css代码，要执行必须要将less转化为css然后再由浏览器执行 vscode下载Easy Less（找到中间那一行代码复制）—设置—扩展—less.settings.json—粘贴—三个值改为true Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。 使用原因： <ul> <li>结构清晰，便于扩展</li><li>可以很方便的屏蔽浏览器私有语法的差异</li><li>可以轻松实现多重继承</li><li>完美的兼容了CSS代码，可以应用到老项目中</li></ul> less语法： <ol> <li>在less中写样式可以和html形式一致含父元素和子元素</li></ol> 例：.box1 { color:#bfa; .box2 { color:#bfa; .box4 { color:red; } } .box3{ color:#bfc; } } <ol> <li>变量，在变量中可以存储一个任意的值，并且可以在需要时任意修改变量中的值</li></ol> @变量名如： @a:200px; @b:#bfa; @c:box6; .box5{ //使用变量时，如果是直接使用则以@变量名的形式使用即可 width: @a; color:@b; } //作为类名或者一部分值必须以@{变量名}的形式使用 @{c}{ width:@a; background-image:url(@{c}/1.png) } <ol> <li>为box设置hover时 & 表示外层的父元素</li></ol> 例：.box1{ &:hover{ color:red; } div &{ width:100px; } } == .box1 : hover{ color:red; } div .box1{ width:100px; } <ol> <li>:extend对当前选择器的扩展继承，指定选择器的样式（选择器分组）</li></ol> 例: .p1 { width:100px; } .p2 : extends(p1) { color:red; } <ol> <li>直接对指定的样式进行引用，这里就相当于将p1的样式进行了复制</li></ol> 例：.p1{ height:200px; } .p3{ .p1(); } 或者 .p1(){ height:200px; } .p3{ .p1; } <ol> <li>混合函数</li><li>在混合函数中可以直接设置变量</li></ol> 例： .test(@w:100px,@h:200px,@by-color:red) { width; @w; height;@h; border: 1px solid @by-color; } <ol> <li>average</li></ol> span{ color:average (red,blue) }则颜色会取red和blue的平均值 <ol> <li>darken</li></ol> background-color:darken (red 10%) darken颜色加深：比red加深10% <ol> <li>在less中所有的数值都可运算</li></ol> body{ width:100px+100px; } 以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践： <ul> <li>预处理器：Less、 Sass 等；</li><li>重要的工程化插件： PostCss；</li><li>Webpack loader 等。</li></ul> 那为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？这就和本来用 JS 也可以实现所有功能，但最后却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽！要想知道有了预处理器有多爽，首先要知道的是传统 CSS 有多不爽。随着前端业务复杂度的提高，前端工程中对 CSS 提出了以下的诉求： <ol> <li>宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；</li><li>编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码；</li><li>可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。</li></ol> 这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性： <ul> <li>嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系；</li><li>支持定义 css 变量；</li><li>提供计算函数；</li><li>允许对代码片段进行 extend 和 mixin；</li><li>支持循环语句的使用；</li><li>支持将 CSS 文件模块化，实现复用。</li></ul> <a name="aDlaJ"></a> <h1 id="ddl2us"><a name="ddl2us" class="reference-link"></a>弹性盒：</h1>flex（弹性盒伸缩盒）—是css中的一种布局手段，它主要用于代替浮动来完成页面的布局， 子元素的float、clear和vertical-align属性将失效 flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器 主轴：弹性元素的排列方向称为主轴 侧轴：与主轴垂直的方向称为侧重 <a name="rp4Bi"></a> <h2 id="64pp5d"><a name="64pp5d" class="reference-link"></a>弹性元素的属性（按比例给子元素设置）：</h2>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 flex-grow 指定弹性元素伸展的系数，当父元素有多余的空间时，子元素如何伸展，父元素有剩余空间子元素会按照比例分配 flex-shrink 指定弹性元素的收缩系数，当父元素中的空间不足以容纳所有子元素时，如何对子元素进行收缩。 flex-basis指定元素在主轴的基础长度，如果主轴横向则为元素宽度，如果为纵向则为元素高度。默认值：auto 表示参考元素自身的高度和宽度 例：flex-grow:1; flex-shrink:0; 简写属性：flex:1.增长 2.缩减 3.基础 flex:initial 默认值意思是 0 1 auto flex:auto 默认值意思是 1 1 auto flex:none 默认值意思是 0 0 auto order:决定弹性元素的排列顺序 <a name="uCg83"></a> <h2 id="7p0qmu"><a name="7p0qmu" class="reference-link"></a>弹性容器的属性：</h2><ol> <li>flex-wrap:设置弹性元素是否在弹性容器中自动换行可选值：</li></ol> nowrap:默认值，元素不会自动换行 wrap:元素沿着辅轴方向自动换行 wrap-reverse:元素沿着辅轴反方向换行 <ol> <li>flex-direction 设置子元素在弹性容器中排列方式</li></ol> 可选值: row默认值弹性元素在容器中自左向右水平排列 row-reverse 弹性元素在容器中反向自右向左水平排列 column弹性元素的排列纵向自上而下排列 column-reverse 弹性元素纵向排列（自下而上） <ol> <li>flex-flow:wrap和direction的简写属性</li></ol> 例：flex-flow:row wrap//排列方向和自动换行 <ol> <li>justify-content: 如何在主轴上分配空间（主轴上的元素如何排列）可选值：</li></ol> flex-start元素沿着主轴起边排列 flex-end元素沿着主轴终边排列 center元素居中排列 space-around空白分布到元素两侧 space-between空白分布到元素间 space-evenly空白分布到元素单侧 例：justify-content:center; <ol> <li>align-items: 元素在辅轴上如何对齐，元素间的关系可选值</li></ol> stretch默认值将元素的长度设置为相同的值 flex-start 元素不会拉伸，沿着辅轴起边对齐 flex-end沿着辅轴的终边对齐 center居中对齐 baseline基线对齐 <ol> <li>辅轴空白空间分布 align-content:可选值：(与justify-content相同)</li></ol> flex-start flex-end center space-around space-between space-evenly align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 <a name="o04bM"></a> <h1 id="67nkb6"><a name="67nkb6" class="reference-link"></a>完美视口：</h1>什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？ 以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度； 而如果有一把尺子来实际测量这部手机的物理像素，实际为 12422688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。 对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。 <img src="https://cdn.nlark.com/yuque/0/2022/webp/22947697/1645963071152-8a2380fa-bab9-4d9e-b55c-afd323608fd5.webp#clientId=u9555360d-f581-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u2181a9b6&margin=%5Bobject%20Object%5D&originHeight=1478&originWidth=1600&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u1fa1220c-0500-4697-a885-6657bf4155f&title=" alt=""> 当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。 还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片: my-image { background: (low.png); } *@media only screen and (min-device-pixel-ratio: 1.5) { #my-image { background: (high.png); } } 一个css像素对应两个物理像素 移动端页面专用完美视口代码： <meta name = "viewport" content = "width = device - width , initial - scale = 1.0 "> （1）像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素： <ul> <li>CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；</li><li>物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。</li></ul> （2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。 （3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。 <ul> <li>em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。</li><li>rem： rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。</li></ul> （4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。 <ul> <li>vw：相对于视窗的宽度，视窗宽度是100vw；</li><li>vh：相对于视窗的高度，视窗高度是100vh；</li><li>vmin：vw和vh中的较小值；</li><li>vmax：vw和vh中的较大值；</li></ul> vw/vh 和百分比很类似，两者的区别： <ul> <li>百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)</li><li>vw/vm：相对于视窗的尺寸 <a name="yK70n"></a> <h3 id="gecvbz"><a name="gecvbz" class="reference-link"></a>px、em、rem的区别及使用场景</h3>三者的区别： </li><li>px是固定的像素，一旦设置了就无法因为适应页面大小而改变。 </li><li>em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。</li><li>em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。</li></ul> 使用场景： <ul> <li>对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可。</li><li>对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。</li></ul> <a name="CDiSA"></a> <h1 id="dskpv0"><a name="dskpv0" class="reference-link"></a>VW:</h1>不同的设备完美视口的大小是不一样的，由于不同的设备视口和像素比不同，所以同样的375个像素在不同的设备下意义不一样，比如iphone6中375就是全屏，而到了plus中375就会缺一块，所以在移动端开发时就不能用px来布局了 vw表示视口的宽度（viewport width） -100vw一个视口的宽度 -1vw = 1%视口的宽度 vw这个单位永远视口宽度来进行计算，设计图的宽度 750px或1125px 100vw = 750px（设计图像素）=0.13333….vw = 1px 移动端像素表示法： 1rem = 1html的字体大小, 如果html字体大小0.13333…vw=1px 则不会生效，因为字体大小必须为12px以上 所以在一开始就进行换算 html{ font-size:5.13333vw } //相当于字体大小为40px ，为1rem， 此后设置像素时比如设置48px 为48/40=1.2rem <a name="FvMOR"></a> <h1 id="ggw162"><a name="ggw162" class="reference-link"></a>媒体查询：</h1>媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身，适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。 媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。 简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 <a name="CLBHy"></a> <h2 id="222gu7"><a name="222gu7" class="reference-link"></a>响应式布局：</h2>网页可以根据不同的设备或者窗口大小呈现出不同的效果； 使用响应式布局可以使一个网页适用于所有设备； 响应式布局的关键就是媒体查询； 通过媒体查询，可以为不同的设备或设备不同的状态来分别设置样式 <a name="jOoOL"></a> <h2 id="c7y35z"><a name="c7y35z" class="reference-link"></a>使用媒体查询：</h2>语法：@media 查询规则{ } 响应类型 all 所有设备；print 打印设备；screen带着屏幕的设备；speech屏幕阅读器； 可以使用逗号链接多个媒体类型，这样它们之间就是一个或的关系，可以在媒体查询之前添加一个only表示只有。only的使用主要使为了兼容一些老版浏览器 例： @media only screen{ body{ background-color:#bfa; } } @media print screen{ body{background-color:#bfa; } } <a name="jiBSA"></a> <h2 id="bu0tgt"><a name="bu0tgt" class="reference-link"></a>媒体特性：</h2>min-width:视口的最小宽度(视口大于指定宽度时生效) max-width:视口的最大宽度（视口小于指定宽度时生效） <a name="kMSwk"></a> <h2 id="9zaea"><a name="9zaea" class="reference-link"></a>移动端适配主要有两个维度：</h2><ul> <li>适配不同像素密度， 针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；</li><li>适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。</li></ul> 为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。 <a name="xtULd"></a> <h1 id="br53pi"><a name="br53pi" class="reference-link"></a>移动端开发规范：</h1><ol> <li>清除默认样式</li></ol> *{ margin：0； padding：0；} <ol> <li>html{ font-size:( 100vw/750 )*40 ;}</li><li>a{ text - decoration:none }</li><li>引入图标字体和css</li><li>设计视口宽度并居中为以下其他父元素使用</li></ol> extend（.w） .w{ width:(693/40rem); margin: 0 auto;} <a name="yYSCG"></a> <h1 id="9t6a76"><a name="9t6a76" class="reference-link"></a>居中总结：</h1>平移居中： position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%)//中间用空格隔开 定位居中： position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 弹性盒居中： display:flex; justify-content:center; align-items:center; margin居中： margin:0 auto; line-height:字体居中 line-height: 父元素的高度； text-align:文本水平对齐 text-align: center; vertical-align: 行内元素垂直对齐 vertical-align: middle; <a name="ktEUL"></a> <h1 id="espijx"><a name="espijx" class="reference-link"></a>隐藏元素的方法有哪些</h1><ul> <li>display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。</li><li>visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。</li><li>opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。</li><li>position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。</li><li>z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。</li><li>clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。</li><li>transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 <a name="iIcpk"></a><h1 id="70gdl5"><a name="70gdl5" class="reference-link"></a>ie浏览器页面混乱的解决方式：</h1>一、页面代码的实现顺序与步骤策划 做任何事情都要先做好计划再执行，对于写前端代码也不例外。我们在拿到美工设计的PSD后，需要先对页面结果做好足够的分析。思考页面分为几大块，我应该使用什么样的标签，什么样浮动等等；如何将早期框架搭建起来。</li></ul> 如上图所示；这是一个类似企业网站的模板，第一眼看上去内容非常复杂，但是通过对页面的仔细观察我们可以发现，这个页面是由左侧部分、右侧部分、页面脚部三块组成。 所以我们第一步需要做的是将页面按照三个区块搭建起来，并确定好左右平行元素的宽度，使其能够在各浏览器中正常的显示。做完这一步，我们就已经为页面的建设打好了基础。 后面我们就需要开始对大块元素中的内容进行进一步区分，观察有几个模块，有没有相同的模块，css样式是否可以复用。在搭建细小模块时需要注意，尽量用块级元素定位，float浮动元素不要与块级元素在同一列中。如果需要在同一列中有平铺的多个元素，请给这些元素都加上float属性，并设置好对应的宽度。 二、了解各标签的属性与内置样式 很多新手并不清楚HTML的各类标签的具体含义。刚开始书写div+css代码时，大量甚至完全使用div进行布局。虽然在CSS中可以修改div的样式属性，但是这样做带来的问题就是代码无法有效进行鉴别，容易造成闭合div的漏写。 因此我们需要仔细阅读html参考手册，了解哪些标签可以直接平铺在同一列中，哪些标签为块级元素，只能一一向下排列，哪些元素不会影响布局的样式等等。 三、牢记浏览器常见BUG的处理方式，在代码第一次编写时就考虑解决兼容问题 其实在第一次编写代码时，就已经可以开始考虑元素的样式是否会引起其他浏览器的兼容问题，防范于未然。 举个常见的例子：IE中float元素如果同时设置了margin值，此时margin的值会变为双倍，解决办法是在该元素中加入 display:inline。已知了BUG的解决办法，我们就可以在代码编写时养成一个习惯。比如说我们在为元素添加了float和margin值时，就为这个元素补上一个display:inline 这样就可以有效的避免页面出现双倍边距的BUG。 所以在工作中要不断的记录与总结浏览器BUG的处理方式，并思考其规律与特性，在下一次编写代码时，提前加上相应的兼容性BUG处理的代码。通过不断的经验积累，慢慢的会发现自己所写的代码可以正常的在各浏览器中展现。 四、尽可能的少用，甚至不要使用负数的margin和padding 一般使用负数的margin和padding时，都是由于样式无法按照自己需要的方式移动，才“出此下策”。这么做很可能会给未来的元素样式带来很多奇怪的BUG，使后面的工作更加艰难。 如果遇到确实需要移动到一些元素之外的偏移操作，最好的方法是使用position来对元素进行定位。因为position这个属性定义是建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。因此我们使用position进行一些特殊的定位操作时最为理想的。 五、每一列浮动元素后，都要设置清除浮动 元素进行float操作后，会使元素浮出文档流，使其所在的父级元素无法跟随浮动元素的高度而改变自身高度。所带来的问题就是浮动元素超出了父级元素的包裹范围，若后面跟随有文字、或浮动元素，则会造成布局混乱。 因此我们在每一列的浮动元素代码最后都要进行清除浮动，使整个父级元素能够正常的包裹其内部的浮动元素，避免这些调皮的float元素四处捣乱。 最简单的清除浮动的方法是在最后一个浮动元素的后面加上<div style=”clear:both”></div>

前端技术库