少し前、私はフロントエンドに関するインタビューの質問を整理することに集中していました。最近の指導とアドバイスをくださった忍耐強く良心的な兄弟、カイ・ハオとウェン・ドンに感謝します。これらの質問に合格すると、以下で自分のレベルを確認できます。
https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/English
空き時間も利用しました（授業の予定がない午後と夕方） 3 日) 書いてみます。私なりの答えを出します。私のレベルには限界があります。ご理解ください。
現時点では前半のみ提供されています。後半の js と jQuery に関する回答は完全に確認されていないため、後で公開されます。
この事件の際、私はフロントエンドに関する面接の質問を整理していましたが、これらの質問を整理する目的は、今後の面接に対処する方法を学ぶだけでなく、基礎知識を補足することでもあります。日々のプロジェクト開発の進行が速すぎて、使用後に多くの属性やメソッドが忘れられてしまいます。これは、基礎知識が十分に確立されておらず、一般的に使用されるメソッドが十分に使いこなされていないため、別の隠れた危険を引き起こします。プロジェクトを効率的に開発するため。
しっかりとした基礎知識があれば、さらなる発展が期待できます。
1) W3C 標準を知っていれば、HTML を記述するときに、異なるブラウザーで表示の不一致を引き起こす可能性がある「閉じられていないタグ、ランダムな入れ子、大文字と小文字の混合」の隠れた危険を回避できます。
2) CSS の「カスケード」ルールを理解し、明確なフローティングとセンタリングの方法を整理して比較し、いくつかの珍しい属性も発見します。したがって、スタイルシートを効率的に作成することは、将来的に役立ちます。
ちょっと待って
コードを書くことで私が最も興奮するのは、新しいテクノロジーを学び、新しい視覚効果を試すプロセスです。
例えば、topview採用サイトでは、将来のページでの豊富なインタラクションや機能を考慮すると、スクリプトファイルのサイズが大きくなります。一般的なブラウザにはファイルの非同期読み込み機能がありますが、これらのファイルは画像や動画のスタイルシートなどを参照しており、スクリプトが含まれていないため、スクリプトを読み込むとブロックが発生し、スクリプトの読み込みが停止します。つまり、スクリプト ファイルが大きすぎるため、ユーザーはより長いイベントを待つ必要がある可能性があります。ページ内のスクリプトなどの基本要素がまだ読み込まれておらず、スタイルと構造が読み込まれている場合、css3 アニメーションが表示され、スクリプトが完全に読み込まれるまで 4 つの小さなボールがスムーズに回転およびスクロールします。
フロントエンド自体は美しくて面白い分野です。多くの Web サイトやシステムでは、バックエンドで提供される機能がコアモジュールとなりますが、その Web サイトやシステムがユーザーの注目を集め続けることができるか、同種の製品の中で目立つことができるか、フロントエンドが優れているかどうかによって決まります。 -エンドインタラクションは人道的であり、パフォーマンスが安定していて効率的であるかどうかが要因の大部分を占めます。優れたユーザーエクスペリエンスを提供し、ポジティブで効率的なユーザーエクスペリエンスを提供し、さらには一般の人々のライフスタイルを変えることは、まさに私がプログラミングを学ぶ当初の目的でした。
(面接官は次のように尋ねるかもしれません: この効果をどのように達成したのか、ユーザー エクスペリエンスに関して他にどのような努力をしましたか? それは問題ではありません。私は慎重に準備しました。CSS3 トランジションとアニメーションの違いを比較する必要さえありますスペースが限られているため、css3 の具体的な使用法についてはここには記載しません。css3_animation.asp
Brother Wen Dong が推奨します。 /NBbQjy3
Web アプリケーションや Web サイトを作成する過程で、その UI、セキュリティ、パフォーマンスの高さ、パフォーマンス、SEO、保守性、技術的要素をどのように考慮しますか?
(この質問をされたら、30分くらい話せるのでとても興奮します。)
(開発環境は 2 セットあり、1 つは毎日のチーム プロジェクトの開発に使用され、私の JDK、Tomcat、Photoshop などはすべてデプロイされ、インストールされています)勝利システムでは、もう 1 つは「ふり」に使用されます。まあ、私のように選択が難しい患者のために、しばらく悩んだ結果、「ふり」の開発環境について話すことにしました)
運用用。システム Linux の Ubuntu なので、一般的な Linux コマンドへのアクセス、ファイルのダウンロードとインストール、転送、追加と削除が非常に便利です (面接官はどのような指示を尋ねますか?)
（这个问题，用过git，用过myeclipse里的svn，用过tortoiseSVN将代码上传到sinaapp服务器，但是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）
在Git 中的绝大多数操作都只需要访问本地文件和资源，不用连网。对于任何一个文件，在Git 内都只有三种状态：已提交（committed），已修改（modified）和已暂存（staged）。已提交表示该文件已经被安全地保存在本地数据库中了；已修改表示修改了某个文件，但还没有提交保存；已暂存表示把已修改的文件放在下次提交时要保存的清单中。
基本的Git 工作流程如下所示：
1. 在工作目录中修改某些文件。
2. 对这些修改了的文件作快照，并保存到暂存区域。
3. 提交更新，将保存在暂存区域的文件快照转储到git 目录中。
常用命令：
//用git 把Git 项目仓库克隆到本地，以便日后随时更新：$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪，然后提交：$ git add filenme.html//每次准备提交前，先用git status 看下，是不是都已暂存起来了，然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master
1）根据需求，确定主题。透彻深入所做网站的核心功能和关键。
2）收集资料。从对比相同类型的网站（惯用而熟悉的样式，用户更乐意接受），参照别人可行的实现方法。 3）规划网站。抽离出类似的模块和可重用的部件。如果是响应式网站就需要设定断点，根据不同宽度屏幕设定样式。 4）设计数据库。 5）搭建基本的框架。引入重置样式表reset.css和字体样式表font.css，风格统一的图标还有后台需要用到的包。 6）编码和调试。注意统一命名和编码规范。当多人开发时，还需要制定规范文档。 7）上传测试。利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。 8）推广宣传 。不断宣传，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
9）维护更新 。网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者
（具体还需要集合我的实际经验：http://www.cnblogs.com/0603ljx/p/4284521.html）
它们是看待同种事物的两种观点，它们关注在同一个网站同一功能在不同设备不同浏览器下的表现：
渐进增强，一开始值构建站点的最小特性，然后不断针对个浏览器追加功能，性能越好的设备能够显示更加出众的效果。
优雅降级，一开始就构造站点的完整功能，然后针对浏览器测试和修复。
web标准对可访问性做了如下定义：web内容对于残障用户或者普通的可阅读和可理解性。无论用户是否残障，都得通过用户代理（User Agent）来访问Web内容。因此要提高可访问性，首先得考虑各种用户代理 ：桌面浏览器、语音浏览器、移动电话、车载个人电脑等等。还得考虑用户访问Web内容时的环境限制 。比如：我们真的要考虑浏览器禁用JavaScript/CSS的情形吗？我的理解是，要考虑的其实不是禁用了JavaScript/CSS的浏览器，而是那些对JavaScript/CSS不支持或支持不好的用户代理。比如语音阅读器，手机浏览器等，JavaScript提供的是一层可访问性，不能代替内容本身。
当然，从渐进增强的角度讲，鼓励使用高级特性，只是同时要做到优雅降级，让低端用户代理上，也能保留低保真的体验。（除了用户代理，还有什么方法检测客户端设备？特性检测，css3媒体查询）
(讲讲我在平时项目中，在“渐进增强”和“优雅降级”的努力)
用一个大的CSS文件替代多个小体积的CSS文件这是一个很好的实践，可以获得更好的可维护性，但是在网站性能方面会产生一定的影响（这里指的是随着文件体积的增大，随之消耗服务器的内存也会增加）。尽管你应该把CSS文件拆分成小块，但是当浏览器请求这些文件时，会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程，并且导致推迟到达服务器端和返回浏览器端的时间，我们称之为延迟。因此，如果你有4个Javascript和3个css文件在页面中被加载，你浪费掉了7次因网络往返过程产生的时间。在美国，延迟平均是70毫秒，这样你就浪费了7*70 = 490毫秒，大致延迟了半秒的时间。在美国之外的国家访问你的页面，平均延迟大约是200毫秒，这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
構造とプレゼンテーションを分離するもう 1 つの重要な方法 は、セマンティック マークアップを使用してドキュメント コンテンツを構造化することです。 XHTML 要素の存在は、タグ付きコンテンツが対応する構造的意味を持っていることを意味します。たとえば、
はタイトルをマークするために使用されます。
セマンティック タグはデフォルトのスタイルに関連付けられることがよくあります。たとえば、Hx シリーズはデフォルトのブロックレベルの太字と中央揃えのスタイルが与えられ、 が使用されます。他のテキストと区別するための役割を果たします。それらが何に使用されるかを正確に伝えるために使用されます。
セマンティックタグを使用すると、誰もがタグと属性の使用法をより直観的に理解できるようになります。セマンティック Web ページは検索エンジンにとって親しみやすく、検索エンジンによってクロールされやすいため、プロモーションに役立ちます。
「5 つの異なる CSS ファイルがある場合、それらをページにロードする最良の方法は何ですか?」という質問に移ります。一般に、ページを活気のあるものにするために、背景画像を読み込むために多くの背景を使用します。各背景画像は HTTP リクエストを生成します。この状況を改善するには、CSS の便利な background-position 属性を使用して読み込むことができます。背景画像。頻繁にロードする必要がある複数の画像を 1 つの画像に合成します。background:url(....) no-repeat の形式でロードできます。 x-offset y-offset; 画像のこの部分をロードするための HTTP リクエストを 1 に減らします。
ファイルの最小化/ファイル圧縮送信する必要のあるコンテンツを圧縮してクライアントに転送し、その後解凍することで、ネットワーク上で送信されるデータ量が大幅に削減されます。通常、サーバー上の Apache および Nginx は、この設定を直接有効にすることができます。また、コードの観点から送信ファイルのヘッダーを直接設定したり、gzip 設定を追加したり、負荷分散デバイスから直接設定したりすることもできます。ただし、この設定によりサーバーの負荷が若干増加することに注意してください。サーバーパフォーマンスがあまり良くないウェブサイトは慎重に検討することをお勧めします。
CDN を使用してホストするキャッシュの使用法
このパラメータが変更されない場合は、キャッシュ ファイルを使用します 変更された場合は、新しいファイルを再ダウンロードするか、情報を更新してください。 Cssファイルを文書の先頭に配置し、jsを文書の最後に配置します
サーバー上でcontrol-cacheを構成するlast-modify-date
Web サイトのリソースを提供するために複数のドメイン名を使用することがより効果的であるのはなぜですか?
例外はありますか？
ボーナスポイント: 携帯電話に悪影響を及ぼす可能性があるとの指摘 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
ページの読み込み時間を短縮する 3 つの方法を挙げてください。 （読み込み時間とは、体感時間または実際の読み込み時間を指します）
時間の認識については、「コードを書くことのどのような側面に興奮または興味を持っていますか?
」という質問に対する答えを使用できます。
开发单页webapp的技术。
SAP能够是页面与页面之间无缝连接，避免出现白页，且带有动态效果，提高用户体验。同时SAP，有javascript渲染页面，然后在从服务器获取小量的数据显示，如此反复，请求的数据无需要服务器处理，减少服务器负荷。
SAP对技术要求高。要考虑首屏加载事件过长；动画效果要考虑低端手机；垃圾收集，需要自己释放资源，避免页面变卡。
关于W3C标准，要求：
1）书写闭合，标签小写、不乱嵌套。有利于SEO
2）尽量使用外链的css和js脚本，结构行为表现分离。有利于页面加载速度加快。
3）样式和标签分离，使用更合理的语义化标签，内容被更多用户设备访问，维护成本也会降低。
指定标准，能够规避不同开发商开发出来不同的浏览器显示不一致问题，同时为
某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为<strong>文档样式短暂失效</strong>(Flash of Unstyled Content),简称为FOUC.原因大致为：1，使用import方法导入样式表。2，将样式表放在页面底部3，有几个样式表，放在html结构的不同位置。其实原理很清楚：当样式表晚于 结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。<strong>此样式表被下载和解析后，将重新渲染页面</strong>，也就出现了短暂 的 花屏现象。解决方法：使用LINK标签将样式表放在文档HEAD中更多
1）用户输入网址
2）浏览器通过DNS获取网站的IP地址
3）浏览器尝试与服务器建立连接
4）服务器发送永久重定向
5）浏览器跟踪从定向地址
7）服务器处理请求
8）服务器发送HTML响应
9）浏览器开始显示HTML
10）浏览器发送获取嵌套在html中的元素
关于页面渲染过程：
1）解析HTML代码，生成一棵DOM树
2）解析CSS文件
3）生成渲染树（受样式影响，包含不可见元素）
4）渲染树中的节点
HTML相关问题：
位于html标签最前面，告诉浏览器以那种html和xhtml规范。分为标准模式和怪异模式、基于框架的HTML模式。假如浏览器不以doctype标准模式编写DTD，页面除了无法通过代码检验之外，还无法在浏览器中正确显示。
a.如果需要干净的标记，免于表现层的混乱，用XHTML Strict DTD类型。
b.Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表（CSS）的浏览器以至于你不得不使用 HTML 的呈现特性时，用Transitional DTD 类型。
c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一目的，他们创建了两种呈现模式，标准和混杂模式。在标准模式中，浏览器会根据规范呈现页面；在混杂模式中。页面会以一种相对宽松的向后兼容方式显示。混杂模式常用于模拟老式浏览器的行为，以防止老站点无法工作。
他们最大的不同是对盒模型的解析。
如：在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)
使用 document.compatMode来判断浏览器的解析方式。
xhtml要求严格：放弃了一些语义不好的标签，必须有head、body，每个dom必须要闭合。一些老的浏览器并不兼容。
为contentType属性值，IE不支持application/xhtml+xml类型，支持text/html
使用统一的UTF-8编码
1）制图时，应该讲图形的图像层与文本层分离，这样在重新绘制改图形时只需对文本进行翻译。
2）设置控件属性应考虑到各种语言版本的文本显示，尽可能为翻译预留足够的空间。同时也应该保持不同语言界面的统一性，避免过多的差异。
3）编码注意代码复用，将多个模块的共用信息存放在共通的文件中便于全局管理。
页面请求的过程可描述如下:
1）用户在终端选择自己所偏好的语言,并通过浏览器向服务器发送页面请求。
2）模板界面接收到语言选项后,从资源文件中读取相应区域的资源。
3）在响应用户的页面请求时,系统将根据检索到的语言选项,动态的加载相关区域的JS文件和CSS文件,为不同区域初始化不同的样式。
4）数据库接口接收到语言选项后,将其作为一个SQL参数传入数据库,检索相应区域的数据。
5）模板界面将接收到的各种信息,组织成Html代码,再发送给浏览器,显示给终端用户。
该架构的核心是模板界面,它主要负责将接收到的各类信息组织成Html代码。
data-是HTML5为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。
1）Web Storage API 2）基于位置服务LBS 3）无插件播放音频视频 4）调用相机和GPU图像处理单元等硬件设备 5）拖拽和Form API
共同点：都是保存在浏览器端，且同源的。 区别： 1）cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 2）cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。 3）sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 4）作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在<strong>web请求之间保存数据</strong>。有了本地数据，就可以<strong>避免数据在浏览器和服务器间不必要地来回传递</strong>。 sessionStorage、localStorage、cookie都是在<strong>浏览器端存储的数据</strong>。 其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在<strong>同源的同窗口（或tab）中，始终存在的数据</strong>。也就是说只要这个浏览器窗口没有关闭，即使<strong>刷新页面或进入同源另一页面</strong>，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。Web Storage带来的好处： 1）减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 2）快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 3）临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储，也可以在服务器端存储。浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据安全一些，浏览器只适合存储一般数据。
get是从服务器上获取数据，post是向服务器传送数据。
get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程
get形式的url对搜索引擎更加友好，可以提高搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其他网站和用户可以链接到get形式的url，无论用户的访问，还是搜索引擎的收录而相应提高了页面排名，能够直接或间接提高网站浏览。同时，get形式的url这种表示法是可以缓存的，显著提升了客户端和服务端的性能。
而不安全操作，如确定订购、下订单、达成协议和删除页面等，应该通过post执行，避免没有显式用户请求和同一的情况下发生意外的操作。例如搜索引擎删除整个页面，只因为抓取了一个链接。很多不希望用户浏览器遵循页面链接的各种完整，这些情况下，应该要求用户登录并且足够的权限才能执行某些危险操作。
若符合下列任一情况，则用POST方法：
* 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
* 若使用GET方法，则表单上收集的数据可能让URL过长。
* 要传送的数据不是采用7位的ASCII编码。
若符合下列任一情况，则用GET方法：
* 请求是为了查找资源，HTML表单数据仅用来帮助搜索。
* 请求结果无持续性的副作用。
* 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
（目测还会问到“同步和异步的区别?”）
同步：脚本会停留并等待服务器发送回复然后再继续。提交请求->等待服务器处理->处理完毕返回，这个期间客户端浏览器不能干任何事。
异步：脚本允许页面继续其进程并处理可能的回复。请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
若要在使用ajax请求后处理发送请求返回的结果，最好使用同步请求。
CSS 相关问题：
在样式表定义一个样式的时候，可以定义id也可以定义class。
1、在CSS文件里书写时，ID加前缀"#"；CLASS用"."
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签，用于区分不同的结构和内容，就象名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示，不过当你需要用JavaScript通过id来控制div时就会出现错误。
reset.css能够重置浏览器的默认属性。不同的浏览器具有不同的样式，重置能够使其统一。比如说ie浏览器和FF浏览器下button显示不同，通过reset能够统一样式，显示相同的想过。但是很多reset是没必要的，多写了会增加浏览器在渲染页面的负担。
比如说，
1）我们不应该对行内元素设置无效的属性，对span设置width和height，margin都不会生效的。
2）对于absolute和fixed定位的固定尺寸（设置了width和height属性），如果设置了top和left属性，那么bottom和right，margin和float就没有作用。
3）后面设置的属性将会覆盖前面重复设置的属性。
normalize.css是一个可以定制的css文件，它让不同的浏览器在渲染元素时形式更统一。
问题成因：在一个容器中，有两个浮动的子元素，会造成显示结果意想不到的问题。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的。
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
解决浮动：
1）添加额外标签
在浮动元素末尾添加一个空的标签例如
長所: 理解しやすく、使いこなしやすい
短所: この方法により、意味のない空のタグがどれだけ追加されるかは想像できますが、これは構造とパフォーマンスの分離に違反し、後のメンテナンスで悪夢になるでしょう。
2) br タグと独自の HTML 属性
利点: 空のタグメソッドよりもセマンティクスがわずかに強化され、コードが少なくなります
欠点: 構造とパフォーマンスの分離にも違反します、推奨されません
3) 親要素は overflow: hidden を設定します
IE6 では親要素の overflow 値を hidden に設定することで、zoom: 1 などの hasLayout もトリガーする必要があります。
利点: 構造的および意味論的な問題がなく、コードの量が非常に少ない
欠点: コンテンツが増加すると、自動行折り返しによりコンテンツが非表示になりやすく、オーバーフローする必要がある要素が表示されなくなり、overflow:hidden によって中央のキーが失敗します。
4) 親要素は、overflow:auto 属性を設定します。 IE6 も hasLayout をトリガーする必要があり、デモは 3 と似ています。 利点: 構造上およびセマンティック上の問題がなく、コードの量が非常に少ないです。 欠点: 複数のネストの後、Firefox によって一部のコンテンツがすべて選択されます。場合によっては、IE でマウスオーバーすると幅が変更されたり、最も外側のモジュールにスクロール バーなどが表示されたり、Firefox の初期バージョンでは理由もなくフォーカスなどが生成されたりすることがあります。
５）Use: after pseudo-element
注意すべき点：after は疑似クラス（一部の CSS マニュアルでは「疑似オブジェクト」と呼ばれます）ではなく、疑似要素（Pseudo-Element）です。 float のクリアなどについて。これらはすべて疑似クラスと呼ばれますが、CSS はより厳格であるべきです。 IE6-7 は :after をサポートしていないため、zoom:1 を使用して hasLayout をトリガーします。
.clearfix:after {content:"."; view:hidden; clear:both; }
短所: 不適切な再利用はコード量の増加を引き起こします
z-index とオーバーレイ コンテキストがどのように形成されるかを説明します。
コンテキスト レベルが非常に低い場合は、それ自体の Z インデックス設定が非常に高くても。 、ご要望にはお応えできません。
Z-index 解析ルールは、w3c 仕様に準拠した標準ブラウザに基づいていますが、IE シリーズのブラウザでは常により多くの労力を費やす必要があります。 IE と標準ブラウザの z-index 解析には小さな違いがあります。それは、上記のスタック コンテキストの 3 つの条件のうち、2 番目の条件のサポートの違いです。標準ブラウザでは、要素には z- が必要です。インデックス値と位置属性があり、その値が静的ではない場合にのみ、新しいスタック コンテキストが生成されます。ただし、IE の以前のバージョンでは、位置を設定する限り、それほど気にしません。値を静的でない場合は、新しいスタック コンテキストが生成されます。
さまざまな float クリア手法をリストし、それらの適用可能な使用シナリオを指摘します。
CSS スプライトは実際に複数の画像を 1 つの画像に結合し、CSS テクノロジーを通じてページ上にレイアウトします。この利点は、画像の数を減らすことで http リクエストが減り、Web サイトのパフォーマンスが向上することです。
2) 定規を通して画像の横座標と縦座標を記録します。
3) CSSコードbackground:url(....) no-repeat x-offset y-offset;を書き、同時に要素の固定高さと幅を設定します、overflow:hidden
不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。
于是，出现了通过CSS来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。
Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：
<h2><span>Hello World</span></h2>
h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } span { display: none; }
代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。
Phark 的方法
<h2> Hello World </h2>
h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; width: 150px;height:35px; } 代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。
Gilder/Levin 的方法
<h2><span></span>Hello World </h2>
h2 { width: 150px;height: 35px; position: relative; } h2 span { background: url(hello_world.gif) no-repeat; position: absolute; width: 100%; height: 100%; }
首先，将 H2 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。
hacks
_width针对于ie6。*width,+width针对于ie6,7。
color: red\9;/*IE8以及以下版本浏览器*/（但是测试可以兼容到ie10。
*+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签（但是测试*html兼容ie6-10。*+兼容ie7-10）。
!important 在IE中会被忽视，ie6,7,8不识别，ie9+（包括ie9）是识别的。
条件引用
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->
1）对于那些可以手动开启的功能，可以在页面上增设“用户使用指导”或“帮助手册”，提示用户如何开启相关的功能。（如果你不介意，还可以完全禁掉页面，强制用户使用固定设备，升级版本；哈哈，当年我做的BMS就是这样做）
例如，针对使用IE浏览器自带的功能可以限制对网页的浏览，比如activeX或者脚本，我们检测到它不可用时，提示用户启用的操作方式。
2）尽量避免当js或者css3失效时，页面不可用的动画效果。
例如，http://www.rippletec.net/网站为了营造一种当页面加载完毕，不同模块滚动到固定位置的绚丽动画效果。应该避免类似的效果，一方面产生繁琐的重绘过程，会消耗浏览器内存，对性能一般的设备可能因为压力过大，卡机或者无法渲染；另外一方面是网站当网站的js不可用时，模块滚动到固定位置的事件没有被触发，用户看到的将会是动画产生之前，最原始的页面状态，无法经行下一步操作。
（首次接触“优雅降级”这个词汇是在《jQuery基础教程（第4版）》，不过那时候已经是一年多以前，现在已经记不清当时书上举得例子了，记性差~真心抱歉）
3）应该为绑定异步的元素，设置herf属性。
例如，用户要执行查询某书本详细信息操作，点击“查询”按钮，通过js触发查询该条目的事件，然后采用jQuery异步执行操作，在页面固定位置加载相关书本的详细内容。$(".delete").click(function(){$.ajax(//..)})，但是一旦js不可用，或者jQuery无发加载的时候，用户将无法顺利执行操作。因此，可以为该操作设置herf属性，当$.ajax()可用时阻止直接跳转，而使用异步；当$.ajax()不可用时，直接跳转到详细信息的页面。
4）避免依赖脚本验证表单。服务器的表单验证不可避免。
5）部分浏览器不支持html5新标签，因此，可以用js创建相关标签，然后给它们的css赋予相关属性。
6）因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：
var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener(’touchstart’, function() { this.className = “hover”;}, false); myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);}
然后用CSS增加hover效果：
a:hover, a.hover { /* 你的hover效果 */ }需要隐藏内容的几种可能性：
1）对文本的隐藏
2）隐藏超链接（另类黑链）
3）对统计代码隐藏
4）隐藏超出图片
5）css隐藏滚动条
6）css隐藏div层
具体实现：
1、css隐藏DIV及内容，完全隐藏内容与布局。display:none或者visible:hidden
（面试官也许会问到：关于display:none和visible:hidden区别）
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2、通过对象盒子设置缩进样式（text-indent:-9999px）方法可以隐藏超链接文本内容
同样道理，可以用来隐藏图片上方文字。此类问题我们常见于LOGO处使用，我们想让图片作为背景，而图片上方放A链接文字内容，但html锚文本功能仍然正常也能鼠标点击使用。图片作为背景而html代码内看不到图片，但文字也存在，却是文字隐藏图片显示出，鼠标也能点击指向。
3、overflow: hidden 隐藏溢出DIV内容或图片
4、css隐藏滚动条
使用overflow-y:hidden;和overflow-x:hidden来隐藏或显示对应横或竖方向的滚动条。
“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。
“使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了”
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
针对http://topview123.sinaapp.com/细说
设备宽度(device-width)未必是布局宽度(width)，为了让非适应性布局与手机相适应，我们跟关心视图宽度，因此需要一种方式来设定宽度，这样可以使用媒体查询检测。
让视图的宽度和设备宽度一致
<meta element = "viewport" content = "width=device initial-scale = 1" >
每种布局，都应该根据目标设备指定固定宽度设计
@media screen and (max-width:320px){} 为移动设备调整网页图像。在最基本的页面，一个移动优化的网站就是其布局、内容、互动都经过调整，以适应移动环境。最常见的做法是使用css媒体查询的功能为不同大小的屏幕提供不同的风格；为较小的屏幕优化布局，可以通过针对移动设备的模块服务。
不同设备的分离设计->根据监视屏幕大小进行设计->（媒体查询，灵活排版，图像结合）
http://www.jb51.net/web/70358.html
1）reset。参照上题“描述下 “reset” CSS 文件的作用和使用它的好处”的答案。
2）规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。
2）抽取可重用的部件，注意层叠样式表的“优先级”。
（这里我会实话实说）过去一直没有机会接触“预处理器”，缺的不是学习的热情和动力，而是一种会使用到这门高深技术的需求，希望日后参与的项目将会用到这门技术，能够将学习揉入实际开发中。关于CSS 预处理器，我知道是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
1）图片替代
2）
浏览器会根据css rules 与dom tree 生成render tree。浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。
1）效率，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。
2）关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。
每个盒子都有：边界、边框、填充、内容四个属性；
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；
IEのバグといえば、IE6より前のバージョンでは、IEは他のブラウザとは異なり、ボーダーとパディングの両方が幅に含まれるというボックスモデルの解析に問題がありました。逆に、他の一部のブラウザにはボーダーとパディングが含まれていません。 IE ブラウザの場合、box-sizing: content-box; を設定すると、ブラウザのボックス モデルの解釈は、幅と高さを定義するときに、ボーダーとパディングを含みません。 - IE ブラウザでは、box-sizing: border-box; を設定すると、ブラウザのボックス モデルの解釈は、幅と高さを定義する場合、幅と高さの範囲内に含まれます。コンテンツの幅と高さは、定義された「幅」と「高さ」から、対応する方向の「パディング」と「ボーダー」の幅を減算することで得られます。コンテンツの幅と高さが負でないことを保証する必要があります。必要に応じて、コンテンツの幅または高さが少なくとも 0 になるように、要素の境界ボックスのサイズが自動的に増加します。
* { box-sizing: border-box } を使用して、IE ブラウザと非 IE ブラウザの違いを統一します。
display属性は、要素が生成するボックスのタイプを指定します。
display属性は、要素が生成するボックスのタイプを指定します。ただし、block はブロックレベルの要素を表し、要素の前後に改行があります。inline がデフォルトのスタイルです。つまり、要素はインライン要素として表示され、要素の前後には改行がありません。 。つまり、ブロック要素は通常、独立したブロックとして実現され、別の行に変更されます。インライン要素は前後で改行されず、一連のインライン要素は行まで 1 行に表示されます。一杯。 Inline-block は、インライン ブロック要素を表します (CSS2.0 の新機能)。
display:block
1) ブロック要素は独自の行を占有し、複数のブロック要素はそれぞれ新しい行を開始します。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。
2) block要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。
3) block要素はmarginとpadding属性を設定できます。
display:inline
1) inline 要素は単独で行を占有することはなく、1 つの行に収まりきらないまでは新しい行が追加されます。要素の内容。
2) inline要素のwidth、height属性の設定は無効です。
3) インライン要素の margin 属性と padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin -top はマージン効果を生成します。 、 margin-bottom はマージン効果を生成しません。
display:inline-block
簡単に言えば、はオブジェクトをインラインオブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロックオブジェクトとしてレンダリングされます。後続のインライン オブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。
CSS+DIVをレイアウトに使用する場合、位置、相対要素、絶対要素、静的要素、固定要素の4つの属性値は、明らかに、それはしばしば非常に憂鬱な結果をもたらします。今日いろいろ調べて、ようやくわかったことがあります。ここで要約すると:
まず各属性値の定義を見てみましょう:
1. static: デフォルト値。位置決めを行わない場合、 要素は通常のフロー に表示されます (top、bottom、left、right、または z-index 宣言は無視されます)。
2. 相対: 相対的に配置された要素を生成します。これは、上、下、左、右の設定を通じて通常の位置に対して相対的に配置されます。階層分類は、z-index を通じて実行できます。
3. 絶対: 絶対配置の要素を生成します。 静的配置以外の最初の親要素を基準にして配置されます 。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
4. 修正: ブラウザ ウィンドウを基準にして配置された絶対位置の要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。階層分類は、z-index を通じて実行できます。
静的および固定の位置決め方法は理解しやすいため、ここでは分析しません。以下は、より一般的に使用される相対アプリケーションと絶対アプリケーションの分析です。
1.相対的に配置された要素は通常のテキスト フローから削除されますが、テキスト フロー内のその位置はまだ存在します。
背景が黄色のレイヤーは相対的に配置されており、赤い境界線部分は通常のフローでの位置です。上と左を通して配置した後、灰色の背景レイヤーの位置から、通常の位置がまだ存在していることがわかります。
2. 絶対。絶対として配置されたレイヤーは通常のテキスト フローから分離されますが、相対との違いは、通常のフロー内でのその位置が存在しなくなることです。黄色の背景レイヤーを絶対として配置すると、灰色の背景レイヤーが自動的に塗りつぶされます。
3. 相対と絶対の主な違い:
まず第一に、上記のように通常の流れの中での位置が存在するかどうかです。
第二に、相対的に配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的になります。デフォルトでは、赤色の背景レイヤーは相対的に配置され、その直接の親要素の緑色の背景レイヤーは静的に配置されます。赤い背景レイヤーの位置は、緑色の背景レイヤーに対して上と左の 20 要素です。そして、赤い背景レイヤーが絶対として配置されている場合。赤い背景レイヤーは引き続き top:20px; left:20px; を定義しますが、その相対要素は位置決め方法が絶対または相対である黄色の背景レイヤーになります。したがって、絶対として配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーが直接の親レイヤーである必要はありません。親レイヤーで絶対または相対が定義されていない場合は、ボディに対して相対的に配置されます。
上下左右の配置に加えて、margin 属性値の定義も上記のルールに従います。
static とpositioning はあまり使用されず、比較的単純なので、ここでは分析しません。
以下は、より相対的、絶対的、固定的なアプリケーションの分析です:
relative によって配置されたレイヤーは、親要素がどのように配置されているかに関係なく、常に最も近い親要素に対して相対的です。
絶対によって配置されたレイヤーは常に、絶対または相対として定義された最も近い親レイヤーに対して相対的であり、この親レイヤーは必ずしも直接の親レイヤーであるとは限りません。親レイヤーで絶対または相対が定義されていない場合は、本文に対して相対的に配置されます。
fixed: 絶対的に配置される要素を生成し、ブラウザー ウィンドウに対して相対的に配置します。
Bootstrap は HTML5 と CSS3 に基づいて開発され、独自の Web サイト スタイルを形成するためによりパーソナライズされ、ほとんどの jQuery プラグインと互換性があります。
Bootstrap には、これらのコンポーネントに基づいて、美しく完全に機能する Web サイトを迅速に構築できます。
http://www.w3cplus.com/css3/a-guide-to-flexbox.html
http://zh.learnlayout.com/flexbox.html
アダプティブ レイアウト (Adaptive Layout)
アダプティブ レイアウト (Adaptive) は、異なる 異なる画面解像度に対してレイアウト を定義することを特徴としています。レイアウトを切り替えるとページ要素が変わりますが、各レイアウトではウィンドウサイズを調整してもページ要素は変わりません。つまり、表示されるページ内の要素の位置は変わりますが、サイズは変わりません
アダプティブ レイアウトは一連の静的レイアウトと考えることができます。
リキッドレイアウト
リキッドレイアウト（「流体」とも呼ばれます）の特徴
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
