フロントエンドのナレッジポイントの 1 つ (HTML/CSS)_html/css

フロントエンドのナレッジポイントの 1 つ (HTML/CSS)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:53:26

オリジナル

1122 人が閲覧しました

これまでのインタビューの知識の HTML/CSS のまとめ

1. インライン要素、ブロックレベル要素、および void 要素とは何ですか?

インライン要素: a、b、span、img、input、strong、select、label、em、button、textarea。

ブロックレベル要素: div、ul、li、dl、dt、dd、p、h1-h6、blockquote。

空の要素 (コンテンツのない HTML 要素): br、meta、hr、link、input、img。

2. CSS で垂直方向と水平方向の中央揃えを実現するにはどうすればよいですか?

方法1：絶対的な位置決め +マージンを使用して、垂直および水平に中心にします。方法 3: フレックスレイアウトを使用して垂直方向と水平方向に中央揃えにします。

<html><head><meta charset="utf-8"><title>垂直水平居中</title><link rel="stylesheet" href="index.css"></head><body><div><div></div></div></body></html>

ログイン後にコピー

.container{     position:relative;    height: 100vh;}.content{        position: absolute;          width:200px;        height:200px;         background-color:#26A9DF;            top: 50%;        left: 50%;        margin-top:-100px ;          margin-left: -100px;}

ログイン後にコピー

方法 4: フレックスレイアウトを使用して水平方向に中央揃えにします。方法:

2 番目の方法:

.container{     position:relative;    height: 100vh;    width:100%;}.content{    position: absolute;    width:200px;    height:200px;     background-color:#26A9DF;      top:50%;    left:50%;    transform: translate(-50%,-50%); }

ログイン後にコピー

方法 4: テーブルレイアウトを使用して要素を水平方向に中央揃えにします。

html, body {  height: 100%;  margin: 0;} .container {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  justify-content: center;  display: -webkit-flex;  display: flex;  height: 100%;  margin: 0;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

ログイン後にコピー

3. em、px、または %?

現在、ページの機能はますます多様化しており、ページにアクセスするために使用されるデバイスもますます増えています。ページのレイアウトや、ページのサイズやフォントは非常に難しいものです。ページ上の要素、画像のサイズもレイアウトと密接に関係します。これを考慮して、フロントエンド開発では、ページレイアウトを改善する方法に注目し始めました。その中心的な考え方は、ページ要素のサイズとフォントサイズを相対値に設定することです。フォントの相対単位には、em、ex、ch、rem が含まれます。

(1) 相対サイズを設定してみる

いわゆる相対サイズの設定は、ページ全体のレイアウトが適応的であることを意味するものではありません。全体のサイズは固定サイズにすることができます。またはページのデザインに応じて適応サイズ。

.container{   display: -webkit-flex;  display: flex;}.content{    width:200px;    height:200px;     background-color:#26A9DF;      margin:auto;}

ログイン後にコピー

(2) 要素のサイズが予測可能な場合にのみ絶対サイズを使用する

.container{   display: -webkit-flex;  display: flex;  justify-content: center;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

ログイン後にコピー

たとえば、デザインでは、全体の幅、サイドバーの幅、ヘッダーとフッターなどの絶対幅の使用が必要です。高さは固定です。写真やビデオを表示する場合、適切な固定サイズを使用すると、これらのマルチメディア要素の表示に最適な結果が得られます。

(3) em を使用してフォントサイズを設定します

px を使用してフォントサイズを設定することはスケーラブルではなく、パーセントを使用してフォントサイズを設定することは一般的ではありません。サイズを設定するには em を使用しますが、フォント設定のレベルが上がると、この方法ではメンテナンスのコストが増加します。これにより、CSS3 ではルート要素のフォントサイズに基づいて計算される rem 単位が導入されます。現在、IE8 以下を除くほとんどのブラウザがこの問題をサポートしています。

.container{   display: table;  margin: 0 auto;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

ログイン後にコピー

px の値は任意に指定できるため、計算が容易になります。

em の値は固定されておらず、em は親要素のフォントサイズを継承します。ブラウザのデフォルトのフォント高さは 16px です。したがって、調整されていないブラウザは 1em=16px に準拠します。次に、12px=0.75em、10px=0.625emとなります。

rem はルート要素を通じて適応され、Web ページのルート要素は html を参照します。 Web ページ HTML のルート要素は 10px に設定され、その後 1rem=10px、12px = 1.2rem となります。

4. グレースフルデグラデーションとプログレッシブエンハンスメント?

CSS3 で広がるこれら 2 つの概念について説明するには、まずベースラインを定義する必要があります。上記の拡張はプログレッシブ拡張であり、以下の互換性は降順です。このベースラインは、主に開発者のニーズによって異なります。ここでは、IE8 ブラウザを例に挙げます。

グレースフルデグラデーション

是向下兼容，一开始就构建完整的功能，然后针对低版本浏览器进行兼容。一个简单的示例是使用24位alpha-transparent png。这些图像能显示在现代浏览器是。IE5.5 IE6将显示图像,但透明效果会失败(必要时它可以使工作)。老的浏览器不支持PNG将显示alt文本或一个空的空间。开发人员通常采用优雅降级指定浏览器支持的水平,如一级浏览器(最好的经验)和二级浏览器(退化的经验)。

渐进增强（progressive enhancement）:

‍‍渐进增强是一个网页设计,强调战略的可访问性,语义HTML标记,和外部样式表和脚本技术。渐进增强使用web技术以分层的方式,允许每个人都访问一个web页面的基本内容和功能,使用任何浏览器或网络连接,同时也提供了一个增强的页面版本与更先进的浏览器软件或更大的带宽。渐进增强是向上兼容，简单地说是针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的需求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。‍‍

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

下面有一个css3的例子：

.transition{    -webkit-transition: all .5s;     -moz-transition: all .5s;       -o-transition: all .5s;          transition: all .5s; }.transition{ 　　     transition: all .5s;　　  -o-transition: all .5s;  　-moz-transition: all .5s; -webkit-transition: all .5s;}

ログイン後にコピー

参考资源：

前端乱炖- 《web前端最佳实践》—高维护性css 作者：灵感_idea ；

伯乐在线- 2016年Web前端面试题目汇总作者：_燎原之火；

StackOverflow- What is the difference between Progressive Enhancement and Graceful Degradation?

CSDN-渐进增强、优雅降级作者：xiongzhengxiang