ホームページ > 記事 > ウェブフロントエンド > 2019 CSS の古典的な面接の質問
2019 CSS の古典的な面接の質問
- coldplay.xixi転載
- 2020-08-03 15:39:028531ブラウズ
これらは、私が勉強中にまとめたいくつかの知識ポイントです。この記事では、面接での質問の形式で共有します。皆さんの役に立つと思います。助けてください。この記事はかなり長いです。よく読んで、何度も読んでいただければ、勉強や面接に役立つと思います。また、皆さんからの批判や修正を期待しています。 ！
1. 標準 CSS ボックス モデルを導入しますか? IE の下位バージョンのボックス モデルとの違いは何ですか?
ボックス モデルは、Web ページ内の要素が実際に占める場所です。2 つのタイプがあります: 標準ボックス モデルと IE ボックス モデル
標準 (W3C) ボックス モデル: コンテンツ コンテンツのパディング境界線のマージン
幅と高さは、コンテンツの幅と高さを指します
低バージョン IE ボックス モデル: コンテンツ (コンテンツ パディング境界) 境界マージン、
幅と高さは、コンテンツ パディング境界部分の幅と高さを指します
特別な推奨事項: 2020 年の CSS 面接の質問の概要 (最新)
質問の拡張:
これら 2 つの CSS A モデルを設定するにはどうすればよいですか?
box-sizing : content-box box-sizing : border-box复制代码
JSでボックスモデルに対応する幅と高さを設定するにはどうすればよいですか?
dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置复制代码
質問例 (ボックスモデルに基づいたマージンオーバーラップの説明)?
この例は、親と子のマージンの重なり、および兄弟要素のマージンの重なりです
<style>
html *{
padding: 0;
margin: 0;
}
#sec{
background: #f00;
overflow: hidden; //创建了一个BFC，块级格式化上下文
}
.child{
height: 100px;
margin-top: 10px;
background: yellow;
}
</style>
<section id="sec">
<article class="child"></article>
</section>复制代码BFC (マージンの重なり)解決）？
2. ボックス サイズ属性?
要素のボックス モデルの解析モードを制御するために使用されます。デフォルトは content-box
context-box: W3C の標準ボックス モデル で、その高さ/幅属性を設定します。参照する要素 コンテンツ部分の高さ/幅です。
border-box: IE 従来のボックス モデル。 要素の高さ/幅属性の設定は、コンテンツ境界埋め込み部分の高さ/幅を参照します
3. BFC 仕様 (ブロック フォーマット コンテキスト) を理解していますか?
(W3C CSS 2.1 仕様の概念。これは、要素がコンテンツをどのように配置するか、また他の要素との関係や相互作用を決定する独立したコンテナです。)
aページは多数のボックスで構成されており、要素の種類と表示属性によってボックスの種類が決まります。
さまざまなタイプのボックスは、さまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。 BFCと外部の要素は異なり、相互に影響を与えます。
BFC は、内部ブロック ボックスのレイアウト方法を指定します。
配置スキーム:
- 内部ボックスは垂直方向に次々に配置されます。
- Box の垂直距離はマージンによって決まり、同じ BFC に属する 2 つの隣接する Box のマージンは重なり合います。
- 各要素のマージン ボックスの左側は、それを含むブロックの境界ボックスの左側に接しています。
- BFC エリアはフロート ボックスと重なりません。
- BFC は、ページ上で独立した独立したコンテナーです。コンテナー内のサブ要素は、外側の要素には影響しません。
- BFC の高さを計算する場合、浮動要素も計算に加わります。
#BFC は、次の条件のいずれかが満たされる場合にトリガーできます。
- ルート要素、つまり html
- # の値##float は none ではありません (デフォルト)
- オーバーフローの値は表示されません (デフォルト)
- 表示の値は inline-block、table-cell、table-caption
- 位置の値は絶対または固定です
4. CSS セレクターとは何ですか?どのようなプロパティを継承できますか? CSS 優先アルゴリズムはどのように計算されますか?
CSS セレクター:1. ID セレクター (# myid)
2. クラス セレクター (.myclassname)
3 . タグ（要素）セレクター (p, h1, p)
4. 隣接セレクター (h1 p)
5. サブセレクター (ul > li)
6. 子孫セレクター (li a)
7. ワイルドカード セレクター (*)
8. 属性セレクター (a[rel = "external"])
9. 擬似-class セレクター (a:hover, li:nth-child)
疑似要素セレクター、グループ セレクター。
継承:継承可能なスタイル: font-size、font-family、color、ul、li、dl、dt、dd;
Non -継承可能なスタイル: ボーダー、パディング、マージン、幅、高さ
優先順位 (近接性の原則): !重要 > [ id > クラス > タグ ]
!重要はインラインの高レベルより優先されます近接性の優先原理。同じ重みの場合、最も近いスタイル定義が優先されます。
!重要>id > ;class>tag
important は inline
よりも優先されます。元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000
- !important声明的样式优先级最高，如果冲突再进行计算。
- 如果优先级相同，则选择最后出现的样式。
- 继承得到的样式的优先级最低。
5. CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:last-of-type 选择属于其父元素的最后 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-of-type 选择属于其父元素唯一的 e388a4556c0f65e1904146cc1a846bee 元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 e388a4556c0f65e1904146cc1a846bee 元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
:before在元素之前添加内容，也可以用来做清除浮动
:after在元素之后添加内容
6. 如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？如何居中一个img（position定位）
水平居中p：
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;复制代码
水平垂直居中一个浮动元素（position定位）
第一种：未知元素宽高
<p class="outer">
<span>我想居中显示</span>
</p>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{ float:left;
position:absolute;
backgroond-color:red;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>复制代码第二种：已知元素宽高的
<p class="outer">
<span>我想居中显示</span>
</p>
<style>
.outer{
width:300px;
height:300px;
position:relative;
background-color:#ccc;
}
span{ float:left;
position:absolute;
backgroond-color:red;
width:150px;
height:50px;
top:50%;
left:50%;
margin:-25px 0px 0px -75px;
}
</style>复制代码如何垂直居中一个img（display : table-cell 或者 position定位）
<p class="outer">
<img src="nz.jpg" alt="">
</p>
<style>
.outer{
width: 300px;
height: 300px;
border: 1px solid #cccccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
width: 150px;
height: 150px;
}
</style>复制代码绝对定位的p水平垂直居中：
border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0;复制代码
还有更加优雅的居中方式就是用 flex布局，点击查看我的文章 掌握flex布局，这篇文章就够了
更多的居中问题，点击查看我的文章 p居中的几种方法
7. display 有哪些值？说明他们的作用?
| 值 | 描述 |
|---|---|
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| none | 此元素不会被显示（隐藏）。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| table | 此元素会作为块级表格来显示（类似table），表格前后带有换行符 |
8. position 的值？
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持） 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：
#one { position: sticky; top: 10px; }复制代码在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。
更多关于 sticky 的介绍，请点击查看 粘性定位介绍
9. CSS3有哪些新特性？
- 新增各种 CSS 选择器
:not(p)选择每个非p的元素；p:empty选择每个没有任何子级的p元素（包括文本节点） - 边框（Borders）：
p{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色 border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。 }复制代码 - 背景 background-clip（规定背景图的绘制区域），background-origin，background-size
p{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; //规定背景图的尺寸 background-origin:content-box;//规定背景图的定位区域 } 多背景 body{ background-image:url(img_flwr.gif),url(img_tree.gif); }复制代码 - 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
- 文本效果 阴影text-shadow，textwrap，word-break，word-wrap；
- 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate() 3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换；
- 过渡 transition
- 动画
- 多列布局 （multi-column layout）
- 盒模型
- flex 布局
- 多媒体查询 定义两套css，当浏览器的尺寸变化时会采用不同的属性
更多 CSS3 和 HTML5的新特性，请点击 CSS3 和 HTML5 新特性一览
10. 请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
更多关于 flex 布局，请点击查看我的文章 你真的了解 flex 布局吗？
11. 用纯CSS创建一个三角形的原理是什么？
首先，需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;复制代码
12. 一个满屏 品 字布局如何设计?
第一种真正的品字：
- 三块高宽是确定的；
- 上面那块用margin: 0 auto;居中；
- 下面两块用float或者inline-block不换行；
- 用margin调整位置使他们居中。
第二种全屏的品字布局:
上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。
13. 常见的兼容性问题？
- 不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的
*{margin:0;padding:0;}来统一； - IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：
display:inline;将其转化为行内属性。渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。{ background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码 - 设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
- IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
- Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
-
超链接访问过后hover样式就不出现了，因为被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A :
a:link {} a:visited {} a:hover {} a:active {}复制代码 -
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox では、イベント オブジェクトには pageX および pageY 属性がありますが、x、y 属性はありません。
解決策: (条件付きコメント) 欠点は、IE ブラウザで追加の HTTP リクエストが追加される可能性があることです。
- png24 ビット画像が iE6 ブラウザの背景として表示される場合、解決策はそれを PNG8 にすることです。
14. IE6 のバグに対するいくつかの解決策を書き留めてください
1. ディスプレイの使用によって発生する二重マージンのバグフロート
##2. dislpay:inline -3px を使用したフロートの使用によって発生する 3 ピクセルの問題3. クリック後のハイパーリンクのホバーが無効になる正しい書き込み順序リンク訪問ホバーアクティブ4. つまり、z-indexの問題は、位置を追加します:相対5. PNGはjsコードを透過的に使用して変更します6. 最小高さ 最小高さ!重要solution'7. Select は、IE68 の下にネストされている iframe をカバーするために使用されます。約 1px の幅コンテナを定義する方法がないのはなぜですか (IE6 のデフォルトの行の高さが原因です)はい、over:hidden,zoom:0.08 line-height:1px)9 を使用してください。IE 6 は !重要15 をサポートしていません。なぜ CSS スタイルを初期化する必要があるのですか ブラウザの互換性の問題により、ブラウザごとに一部のタグのデフォルト値が異なるため、CSSが初期化されていない場合、ブラウザ間でページの表示に差異が生じることが多くなります。もちろん、初期化スタイルは SEO に一定の影響を与えますが、ケーキを持って食べることもできませんが、影響を最小限に抑えて初期化するようにしてください。 16. 絶対包含ブロックの計算方法は通常のフローとどのように異なりますか? それがどちらに属しているかに関係なく、まずその祖先要素の中で最も近い位置の値が静的ではない要素を見つけてから、次のことを判断する必要があります。- この要素がinline 要素の場合、包含ブロックは、この要素によって生成される最初と最後のインライン ボックスのパディング ボックス (マージンと境界線を除く領域) を含むことができる最小の四角形です。この祖先要素のパディングボックス。
- どちらも見つからない場合、それが最初の包含ブロックです。
でもあります。
17. CSS の Visibility 属性に Collapse 属性値がありますが、これは何に使用されますか?異なるブラウザでは何が違うのでしょうか? 要素の visibility 属性が <strong></strong>collapse 値に設定されている場合、一般要素の場合、そのパフォーマンスは <strong></strong>hidden と同じです。ただし例外は、この要素がテーブル行、テーブル グループ、テーブル列、テーブル列グループなどのテーブル関連要素である場合、その動作は <strong>#display: none</strong>## と同じです。 #、つまり、占有しているスペースも解放されます。 Google Chrome では、<strong></strong>collapse
hidden<strong></strong> 値の使用に違いはありません。 Firefox、Opera、IE11 では、<strong></strong>collapse
18.display:none と Visibility:hidden の違いは何ですか? <strong></strong>display : none
visibility:hideen 対応する要素 要素はドキュメント レイアウト内の元のスペースを保持します (再描画)
CSS の display:none 属性を使用した後、HTML 要素 (オブジェクト) の幅、高さ、およびその他の属性値) will be "lost"; Visibility:hidden 属性を使用した後、HTML 要素 (オブジェクト) は視覚的に見えなくなる (完全に透明になる) だけで、それが占める空間的位置はまだ存在します。19. 位置、表示、オーバーフロー、フロートの機能を重ねるとどうなるでしょうか?
display 属性は、要素が生成するボックスのタイプを指定します。position 属性は、要素の配置タイプを指定します。float 属性は、要素がどの方向にフローティングするかを定義するレイアウト メソッドです。優先メカニズムと同様に、position:Absolute/fixed が最も優先されます。これらが存在する場合、float は機能せず、表示値を調整する必要があります。 float または ABS によって配置される要素は、ブロック要素またはテーブルのみです。
20. float が表示されるのはなぜですか?いつクリアする必要がありますか?フロートをクリアするにはどのような方法がありますか?長所と短所は何ですか?どれが一番いいと思いますか？なぜ？
フローティングの理由:
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
浮动带来的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素（内联元素）会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
- 父级p定义height
- 最后一个浮动元素后加空 p 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）
- 包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
- 父级 p 定义 zoom（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）
- 用after伪元素清除浮动（用于非IE浏览器）
1、父级p定义height
原理：父级p手动定义height，就解决了父级p无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级p不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
2、结尾处加空 p 标签 clear:both
原理：添加一个空p，利用css提高的clear:both清除浮动，让父级p能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空p，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3、父级 p 定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级p定义伪类 :after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码
(1) 在子元素后添加一个空p p{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符，在父容器的尾部自动创建一个子元素
.clearfix:after {
content: "\0020";display: block;height: 0;clear: both;
}
.clearfix {
zoom: 1;
}复制代码"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白符，
"height:
0;"是让这个这个空白字符不显示出来，"display:
block; clear: both;"是确保这个空白字符是非浮动的独立区块。:after选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"就行了.
21. 上下 margin 重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：
<p class="aside"></p>
<p class="text">
<p class="main"></p>
</p>
<!--下面是css代码-->
.aside {
margin-bottom: 100px;
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个p，通过改变此p的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
overflow: hidden; //此时已经触发了BFC属性。
}复制代码22. 设置元素浮动后，该元素的 display 值是多少？
自动变成display:block
23. 移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
- 93f0f5c25f18dab9d176bd4f6de5d30e里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码
- CSS :
@media only screen and (max-device-width:480px) { /css样式/}复制代码
24. 什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？
预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
其它 CSS 预处理器语言：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
25. CSS优化、提高性能的方法有哪些？
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
- 修复解析错误
- 避免使用多类选择符
- 移除空的css规则
-
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
- 不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。
-
不滥用web字体
对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
- 不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
- 不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。
- 不给h1~h6元素定义过多的样式
- 全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。
- 不重复定义h1~h6元素
- 值为0时不需要任何单位
- 标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：.foo{
-moz-border-radius: 5px; border-radius: 5px; }复制代码 - 使用CSS渐变等高级特性，需指定所有浏览器的前缀
- 避免让选择符看起来像正则表达式
- CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
- 遵守盒模型规则（Beware of broken box models）
26. 浏览器是怎样解析CSS选择器的？
CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
27. 在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
28. margin 和 padding 分别适合什么场景使用？
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
29. 元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
30. 全屏滚动的原理是什么？用到了CSS的哪些属性？
- 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
- overflow：hidden；transition：all 1000ms ease；
31. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码
32. 视差滚动效果？
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
- CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器 - jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高 - 插件实现方式
例如：parallax-scrolling，兼容性十分好
33. ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
34. 你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
35. 怎么让Chrome支持小于12px 的文字？
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
复制代码36. 让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
37. position:fixed; 在 android 下无效怎么处理 ？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码
38. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
39. li と li の間に白いスペースが見えない理由は何ですか?解決策は何ですか?
行ボックスの配置は、間に挟まれるスペース (復帰スペース) などの影響を受けます。スペースも文字であるため、これらのスペースもスタイル設定され、スペースを占有するため、隙間が生じます。文字を設定します。サイズを 0 にすると、スペースは入れられません。
解決策:
- すべての 25edfb22a4f469ecb59f1190150159c6 コードを
- float li float: left
- Use font in ul - の行に記述できます。サイズ: 0 (Google ではサポートされていません);
- ul{letter-spacing: -4px;};li{letter-spacing:normal;}
40 を変更できます。 :inline-block がギャップを表示するのはいつですか?
- スペースがあるとギャップが生じます。解決策: スペースは除く。
- マージンが正の場合の解決策:マージンに負の値を使用します。
- 次の場合の解決策font-size: font-size:0、letter-spacing、word-spacing
41 を使用します。高さに適応する p があります。その中に 2 つの ps があり、1 つは高さ 100px ですHeight
外側の p は、position:relative を使用します。適応高さを必要とする p は、position:absolute、top:100px、bottom:0、left:0## を使用します。
#42. png、jpg、gif これらの画像形式とそれらをいつ使用するかを説明します。 WebP について学んだことがありますか?- png は、可逆データ圧縮ビットマップ ファイル形式であるポータブル ネットワーク グラフィックスで、圧縮率が高く、発色が良いという利点があります。ほとんどの場所でご利用いただけます。
- jpg は写真に使用される歪み圧縮方式で、階調や色の滑らかな変化に優れた破壊的な圧縮です。 www で写真を保存および送信するために使用される形式。
- Gif は、8 ビット カラーのトゥルー カラー イメージを再現するビットマップ ファイル形式です。アニメーション効果も実現可能
- webp形式は、2010年にGoogleが発表した画像形式で、圧縮率はjpgの2/3、サイズはpngより45%小さくなります。圧縮に時間がかかることと互換性が良くないことがデメリットですが、現在はGoogleとOperaが対応しています。
は body タグの後に記述され、ブラウザは HTML 文書を 1 行ずつ解析するため、最後に記述されたスタイルシート (アウトラインまたはスタイルタグ内に記述されたもの) を解析すると、ブラウザは前のレンダリングを停止して待機します。また、スタイル シートの解析が完了した後にスタイル シートを再レンダリングすると、Windows の IE で FOUC 現象 (つまり、スタイルの失敗によるページのちらつきの問題) が発生する可能性があります。 . CSS 属性のオーバーフロー属性は、オーバーフロー要素のコンテンツ領域のコンテンツに何が起こるかを定義します。処理?
パラメータが auto の場合、子要素の内容が親要素より大きい場合、スクロール バーが表示されます。
パラメータが表示されると、オーバーフロー コンテンツが親要素の外側に表示されます。パラメータが非表示の場合、オーバーフローは非表示になります。
45. CSS スプライトとは何ですか?その利点と欠点は何ですか?
利点:
1. Web ページのリクエストを削減し、ページのパフォーマンスを大幅に向上させるのに非常に優れています;
2. 画像のバイト数を削減します。##3. 画像に名前を付ける際の Web デザイナーの問題を解決します;
4. スタイルの変更と維持が簡単です。
#欠点:
1. 画像を結合する際には十分なスペースを確保する必要があります。ワイドスクリーンや高解像度の画面では背景の破損が発生しやすいです。2. 開発が面倒、計測が面倒（スタイルジェネレーターが使える）
3. メンテナンスが面倒 背景のちょっとした変化が画像全体に影響を及ぼし、バイト数や容量が増加する場合があります。 cssが変更されます。 46. CSS 疑似クラスと疑似要素の違いは何ですか?最初の回答:
疑似クラス: :focus、:hover、:active疑似要素: :before、:after
疑似クラスは基本的に、より多くの情報を取得するために通常の CSS セレクターの欠点を補うものです; 疑似要素は基本的にコンテンツを含む仮想コンテナを作成します;疑似クラスの構文#CSS3 の擬似要素は異なります。
複数の擬似クラスを同時に使用できますが、同時に使用できる擬似要素は 1 つだけです。
2 番目の回答: 擬似クラス: 擬似クラス選択要素は、現在の要素の状態、または要素の現在の特性に基づいています。要素の静的 ID、クラス、属性などのシンボル。状態は動的に変化するため、要素が特定の状態に達すると疑似クラス スタイルを取得する場合がありますが、状態が変化するとこのスタイルは失われます。このことから、その機能はクラスの機能に似ていることがわかりますが、ドキュメントの外部での抽象化に基づいているため、疑似クラスと呼ばれます。
:最初の子 :link: :visitive :hover :active :focus :lang伪元素：与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。 外部样式表，引入一个外部css文件 内部样式表，将css代码放在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内部 内联样式，将css样式直接定义在 HTML 元素内部 最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden 技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000 答案：解决各浏览器对 CSS 解释不同所采取的，区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。 块级元素( block )特性： 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示； 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制； 内联元素(inline)特性： 和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。 那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？ 答案：d5fd7aea971a85678ba271703566ebfd 、a1f02c36ba31691bcfe87b2722de723b 、bb9345e55eb71822850ff156dfde57c8 、4750256ae76b6b9d804861d8f69e79d3。 相关文章 为何img、input等内联元素可以设置宽高 外边距重叠就是 margin-collapse。 在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠结果遵循下列计算规则： rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度， 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！） 垂直方向：line-height 水平方向：letter-spacing (letter-spacing 属性增加或减少字符间的空白) 那么问题来了，关于letter-spacing的妙用知道有哪些么？ 答案:可以用于消除inline-block元素间的换行符空格间隙问题。 px和em都是长度单位，区别是：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 不同的浏览器对一些元素有不同的默认样式，如果不处理，在不同的浏览器下会存在必要的风险。 你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。 不能。它只能移动x,y轴的位置。translate3d可以。 1. CSS3 は角丸 (border-radius)、シャドウ (box-shadow)、 2. テキストに特殊効果を追加 (text-shadow)、線形グラデーション (gradient) を実装します。 , 回転 (transform) 3.transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg); //回転、スケール、位置、傾き 4. さらに多くの CSS セレクターを追加しました。マルチバックグラウンド rgba 5. CSS3 で導入された唯一の疑似要素は ::selection. 6. メディア クエリ、複数の列レイアウト 7. border-image 機能的な違い: HTML は基本的な WEB Web ページのデザインですXHTML は XML に基づいたマークアップ言語です。XHTML は主要なブラウザ、携帯電話、PDA と互換性があり、ブラウザは Web ページを迅速かつ正確にコンパイルできます。 書き方の習慣: (1) XHTML タグは小文字である必要があります (2) XHTML タグはペアである必要があります (3) XHTML タグの順序は正しい必要があります (4) すべての XHTML 属性は二重引用符を使用する必要があります (5) XHTML Trident core: IE、MaxThon、TT、The World、360、Sogou ブラウザなど。 [MSHTML とも呼ばれます] Gecko カーネル : Netscape6 以降、FF、MozillaSuite/SeaMonkey など。 Presto カーネル: Opera7 以降。 [Opera コアは元々: Presto、現在: Blink;] Webkit core: Safari、Chrome など。 [Chrome: Blink (WebKit のフォーク)] EdgeHTML Core: Microsoft Edge。 [このカーネルは実際には MSHTML フォークからのものであり、ほとんどすべての IE プライベート機能は削除されています] Set background-position:center; フォントを斜体 (斜体) としてマークします。そのような形式がない場合は、斜体フォントを使用します。 継承: 属性が特定のタグに適用された後、その属性はそのタグの子タグにも適用される必要があります。この動作は継承と呼ばれます。ただし、すべてのプロパティが継承されるわけではありません。例えば、文字スタイルは基本的に継承されますが、ボックス画像の幅と高さは基本的に継承されず、つまり、継承すべきものはすべて継承され、継承すべきでないものは継承されません。 再利用: スタイル ファイルは複数のページで使用できるため、いくつかの一般的なスタイルを再構築するのに非常に役立ちます。 回答: マンパワー、分業、同期が必要です (1)
初期のチームは、グローバル スタイル、コーディング モードなどを決定する必要があります。 (2)
書く習慣は一貫していなければなりません (3)
スタイル ライターをマークし、時間内に各モジュールをマークします (キー スタイルが呼び出される場所をマークします) (4)
ページ (5) をマークします。
Cssとhtmlは別フォルダに並行して保存し、名前を統一する必要がある (6)
Js はフォルダーに格納され、名前は JS の関数に基づいています。英訳 (7)
画像は統合された .png 形式ファイルで使用され、将来の管理を容易にするために可能な限り統合する必要があります。 単語区切り:すべて区切り; 1a309583e26acea4f04ca31122d8c535 宣言は、ドキュメントの最初、100db36a723c770d327fc0aef2ce13b1 タグの前に配置されます。 これは HTML タグではなく、ページでどの HTML バージョンが使用されているかを Web ブラウザに通知 (状態) するために使用されます。 インライン要素: (1) インライン要素はラップされません (2) インライン要素のサイズは変更できません ( 3) インライン要素のサイズは内容によって決まります ブロック要素 : (1) ブロック要素は独立した行を形成します (2)ブロック要素のサイズは変更可能です (3) ブロック要素の幅が設定されていない場合、幅は親の幅に適応します 行要素: span、img、a、label、input、abbr (省略形)、em (強調)、big、cite (引用)、i (イタリック体)、q (短い引用符)、textarea、select (ドロップダウン リスト)、small、sub、sup、strong、u (下線)、ボタン (デフォルトの表示: インライン ブロック) ブラウザの表示結果からわかるように、隣接するインライン要素は折り返されず、幅はコンテンツの幅であり、4方向のパディングが有効です（spanタグからわかるように、インライン非置換要素の場合、行の高さは影響を受けず、親要素は引き伸ばされません。置換要素の場合、親要素は引き伸ばされます）、マージンは水平方向にのみ有効です（垂直マージンはインラインの場合に有効です）置換された要素 (img 要素など)、インラインの非置換要素には無効)、幅と高さの属性は設定できません。インライン ブロック要素は、幅と高さの属性を設定できる点を除いて、インライン要素と同じように動作します。 ブロック要素: p、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、 table、menu、pre、HTML5 の新しいヘッダー、セクション、サイド、フッターなど。 ブラウザの表示結果から、ブロックレベルの要素が新しい行を開くことがわかります (幅が異なっていても)属性が設定されている場合は、排他的な行も占有します)、親要素の幅を埋めるようにしてください。幅と高さの属性を設定できます。テーブル要素ブラウザのデフォルトの表示属性はテーブルです。 (1) そのラベルに対応する親を見つけて、その親に text-align: center を設定します; ( 2) 要素をブロック要素に変換し、margin: 0 auto を設定します (ブロック要素で幅がある必要があります) 太字: CSS: font-weight :太字 HTML : a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a、8e99a69fbe029cd4e2b854e244eab143128dba7a3a77be0113eb0bea6ea0a5d0 斜体: CSS: フォント スタイル: イタリック | 斜体、フォント スタイル: 通常 (通常のフォント) HTML: 5a8028ccc7a7e27417bff9f05adf5932 23c2c71ed69e09ecfb052d0769ffa27e , 907fae80ddef53131f3292ee4f81644bd1c6776b927dc33c5d9114750b586338 これは Google で説明されています: 画像の下部にあるギャップは、実際にはインライン要素のレイアウト モデルに関係しています。画像のデフォルトの垂直方向の配置はベースラインであり、ベースラインの位置はフォントに関連しています。したがって、画像の下部のギャップは 2 ピクセルになる場合もあれば、4 ピクセル以上になる場合もあります。フォント サイズが異なると、このギャップのサイズも影響を受けるはずです。 解决办法： 最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 （1）转化成（行级）块元素 （2）浮动，浮动后的元素默认可以转化为块元素（可以随意设置宽高属性） （3）给 img 定义 vertical-align（消除底部边距） （4）将其父容器的font-size 设为 0； （5）给父标签设置与图片相同的高度 父级的宽度不够，导致元素无法并排显示； 行内样式、内部样式（写一个style）、外部样式 word-spacing : 单词 letter-spacing : 字母、中文 text-decoration : underline | overline | line-through 宽度（width） 颜色（color） 线形（solid，dashed，dotted，）实线，虚线，点画线 diaplay：block | inline-block title ：鼠标放入时提示的文字， alt : 图片路径出错时，提示文字 相关教程推荐：CSS视频教程:first-line
:first-letter
:before
:after复制代码
47.有哪项方式可以对一个 DOM 设置它的CSS样式？
48. CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
49. 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
50. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
51. 什么是外边距重叠？重叠的结果是什么？
52. rgba() 和 opacity 的透明效果有什么不同？
53. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
54. px 和 em 的区别。
55. 描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？
56. 问:translate()方法能移动一个元素在z轴上的位置？
57. CSS3 の新機能は何ですか?
58. xhtml と html の違いは何ですか
70. 背景画像を水平方向と垂直方向の中央に配置する方法
71. font-style 属性で値 " を割り当てることができるのは何ですか? oblique"?
72. CSS の継承と再利用を理解するにはどうすればよいですか?
73. トラフィックの多い大規模な Web サイトを作成する場合、すべての CSS ファイル、js、画像をどのように管理しますか?
74. 強制改行するCSSとは何ですか？
(HTML および CSS) テスト問題:
1. 簡単な説明の役割。
2. インライン要素とブロックの違いは何ですか?レベル要素。
3. 共通のインライン要素とブロック要素のリストを表示します、その機能を説明します
4. インライン要素を水平方向に中央揃えにする 2 つの方法
5. タイトル テキストを中央揃えにするにはどうすればよいですか? text-align : center
6. ブロック要素を 1 行に表示します。 float : left
7. テキストの太字とテキストのフォントの傾き
✳8. マージンが組み込まれた img 画像の問題を解決する
父容器的字体大小为零，font-size:0 display : block复制代码
float ： left；复制代码
img{
border: 0;
vertical-align: bottom;
}复制代码9. 如果使用了 float 的元素，没有实现并排效果，可能出现的问题？
10. 设置css方式有哪些？
11. CSS 内边距和外边界用什么属性表示？
padding margin复制代码
12. 清除所有的默认边距。
padding : 0;
margin : 0;复制代码
13. 单词间距与字母间距属性，中文应用哪一种？
14. 文字如何加下划线，上划线，删除线
15. 清除列表符号，背景改成图片
list-style:none;
background-image:url()复制代码
16. 边框（boder）得基本属性都有哪些？
17. 行元素如何转化为块元素，或者 行级块元素，行级块元素有什么特点
18. 标签上 title 属性与 alt 属性的区别是什么？
19. 如何防止出现乱码？
<meta charset="UTF-8">
以上が2019 CSS の古典的な面接の質問の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。