これらは、私が勉強中にまとめたいくつかの知識ポイントです。この記事では、面接での質問の形式で共有します。皆さんの役に立つと思います。助けてください。この記事はかなり長いです。よく読んで、何度も読んでいただければ、勉強や面接に役立つと思います。また、皆さんからの批判や修正を期待しています。 ！
ボックス モデルは、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 (マージンの重なり)解決）？
要素のボックス モデルの解析モードを制御するために使用されます。デフォルトは content-box
context-box: W3C の標準ボックス モデル で、その高さ/幅属性を設定します。参照する要素 コンテンツ部分の高さ/幅です。
border-box: IE 従来のボックス モデル。 要素の高さ/幅属性の設定は、コンテンツ境界埋め込み部分の高さ/幅を参照します
(W3C CSS 2.1 仕様の概念。これは、要素がコンテンツをどのように配置するか、また他の要素との関係や相互作用を決定する独立したコンテナです。)
aページは多数のボックスで構成されており、要素の種類と表示属性によってボックスの種類が決まります。
さまざまなタイプのボックスは、さまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。 BFCと外部の要素は異なり、相互に影響を与えます。
BFC は、内部ブロック ボックスのレイアウト方法を指定します。
配置スキーム:
#BFC は、次の条件のいずれかが満たされる場合にトリガーできます。
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
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
:before在元素之前添加内容，也可以用来做清除浮动
:after在元素之后添加内容
水平居中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居中的几种方法
| 值 | 描述 |
|---|---|
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| none | 此元素不会被显示（隐藏）。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| table | 此元素会作为块级表格来显示（类似table），表格前后带有换行符 |
| 值 | 描述 |
|---|---|
| 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 的介绍，请点击查看 粘性定位介绍
:not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）p{
border:2px solid;
border-radius:25px; //用于设置圆角
box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色
border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。
}复制代码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);
}复制代码background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
更多 CSS3 和 HTML5的新特性，请点击 CSS3 和 HTML5 新特性一览
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。
更多关于 flex 布局，请点击查看我的文章 你真的了解 flex 布局吗？
首先，需要把元素的宽度、高度设为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;复制代码
第一种真正的品字：
第二种全屏的品字布局:
上面的p设置成100%，下面的p分别宽50%，然后使用float或者inline使其不换行。
*{margin:0;padding:0;} 来统一；
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识别*/}复制代码a:link {}
a:visited {}
a:hover {}
a:active {}复制代码IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox では、イベント オブジェクトには pageX および pageY 属性がありますが、x、y 属性はありません。
解決策: (条件付きコメント) 欠点は、IE ブラウザで追加の HTTP リクエストが追加される可能性があることです。
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. 絶対包含ブロックの計算方法は通常のフローとどのように異なりますか? それがどちらに属しているかに関係なく、まずその祖先要素の中で最も近い位置の値が静的ではない要素を見つけてから、次のことを判断する必要があります。でもあります。
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 によって配置される要素は、ブロック要素またはテーブルのみです。
フローティングの理由:
关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
浮动带来的问题：
清除浮动的方式：
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;"就行了.
在重合元素外包裹一层容器，并触发该容器生成一个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属性。
}复制代码自动变成display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">复制代码
@media only screen and (max-device-width:480px) {
/css样式/}复制代码预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
其它 CSS 预处理器语言：
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-moz-border-radius: 5px;
border-radius: 5px;
}复制代码CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>复制代码
视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}
复制代码-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>复制代码
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。
行ボックスの配置は、間に挟まれるスペース (復帰スペース) などの影響を受けます。スペースも文字であるため、これらのスペースもスタイル設定され、スペースを占有するため、隙間が生じます。文字を設定します。サイズを 0 にすると、スペースは入れられません。
解決策:
外側の p は、position:relative を使用します。適応高さを必要とする p は、position:absolute、top:100px、bottom:0、left:0## を使用します。
#42. png、jpg、gif これらの画像形式とそれらをいつ使用するかを説明します。 WebP について学んだことがありますか? は body タグの後に記述され、ブラウザは HTML 文書を 1 行ずつ解析するため、最後に記述されたスタイルシート (アウトラインまたはスタイルタグ内に記述されたもの) を解析すると、ブラウザは前のレンダリングを停止して待機します。また、スタイル シートの解析が完了した後にスタイル シートを再レンダリングすると、Windows の IE で FOUC 現象 (つまり、スタイルの失敗によるページのちらつきの問題) が発生する可能性があります。 . CSS 属性のオーバーフロー属性は、オーバーフロー要素のコンテンツ領域のコンテンツに何が起こるかを定義します。処理?
パラメータが非表示の場合、オーバーフローは非表示になります。
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代码放在 :first-line
:first-letter
:before
:after复制代码
47.有哪项方式可以对一个 DOM 设置它的CSS样式？
内联样式，将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元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案： 、 、