CSS の基本
2.1 link と @import の両方がページの CSS ファイルを導入できますが、違いは何ですか?
別の.cssファイルでスタイルを定義します。linkと@import の両方で、 htmlページにcssファイルを導入できます。リンクと@importには2つの方法があり、インポート方法は次のとおりです。
リンク方法：<link rel= ” stylesheet ” type= ” text/css ” href= ” aa.css ” >
@import方式：<style type= ” text/css ” >@import “ aa.css ” ;</style>
linkと@import のcssファイルのインポートの違い:
祖先の違い。Link はXHTMLタグであり、@import は完全にCSSによって提供される方法です。CSSの読み込みに加えて、 Linkタグは、 RCCの定義、rel接続属性の定義など、他にも多くのことを行うことができます; @import はCSSのみを読み込むことができます。
ロード順の違い。ページが読み込まれると、リンクによって参照されるCSS が同時に読み込まれますが、@importによって参照されるCSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。そのため、@import によってCSS がロードされたページを閲覧すると、スタイルが表示されない (ちらつき) ことがあります。これは、ネットワーク速度が遅い場合に顕著になります。
互換性の違い。@import はCSS2.1で提案されているすべての古いブラウザーでサポートされているわけではないため、@import はIE 5以降でしか認識できませんが、 linkタグにはそのような問題はありません。
DOM を使用してスタイルを制御する場合の違い。JavaScriptを使用してDOMを制御してスタイルを変更する場合、 @import はDOMによって制御されないため、 linkタグのみを使用できます。
@Import はcssで他のスタイル シートを再導入できます。たとえば、メイン スタイル シートを作成してから、メイン スタイル シートに他のスタイル シートを導入できます。
2.2 CSS スタイルシートのカスケーディングの性質を理解するには?
CSS は、カスケードの原則を使用して、継承、カスケード順序、優先度などの重要な機能を考慮し、競合するルールのどれを有効にするかを決定します。
継承とは、多くのCSSスタイル ルールがセレクターによって定義された要素に影響を与えるだけでなく、これらの要素の子孫によっても継承されることを意味します。
カスケードとは、 Webページが複数のスタイル シートを使用する場合、複数のスタイル シートのスタイルを 1 つにカスケードできることを意味します。複数のスタイル シートで定義されたスタイル間に矛盾がない場合、ブラウザーはすべてのスタイルを表示します。
優先度とは、スタイル定義の競合が発生した場合に、ブラウザーが最初に異なるスタイル ルールの優先度に従ってスタイルを適用することを意味します。CSSスタイルの優先度は次のとおりです (数字の3が最も優先度が高くなります)。
1.ブラウザのデフォルト設定;
2.外部スタイル シート ( .cssファイル) または内部スタイル シート ( <head>要素内にある)。
3.インライン スタイル (要素のstyle属性の値として)。
同じ優先度の下では、最後に定義されたスタイルが優先され、inline よりも重要度が高くなります。
2.3継承できる属性は?
C ssで継承できる属性は次のとおりです。
文本相关属性：font-family 、font-size 、font-style 、font-variant 、font-weight 、font 、letter-spacing 、line-height 、text-align 、 text-indent 、 text-transform 、word-spacing 、色；
リスト関連の属性: list-style-image 、list-style-position 、list-style-type 、list-style 。
テーブル関連のプロパティ: border-collapse 、border-spacing 、caption-side 、table-layoute ;
その他のプロパティ:カーソル、可視性。
2.4 CSS セレクターで、要素セレクターとクラス セレクターの違いは何ですか?
要素セレクターは一般的なCSSセレクターです。つまり、ドキュメントの要素は最も基本的なセレクターです。セレクターは通常、 <p> 、<h1> 、<em> 、<a>などのHTML要素、または<html>要素自体です。
クラス セレクターは、スタイル ルールを、クラス セレクターで指定された値に関連付けられたクラス属性を持つ要素に一致させるために使用されます。クラス セレクターを使用する場合、最初にスタイル クラスを定義する必要があります。その構文は次のとおりです。
.className{ } ；
クラス属性を付加できるすべての要素は、このスタイル宣言を使用できます。class属性の値を" className "に設定するだけで、クラス セレクターのスタイルを要素に関連付けることができます。
実際の使用では、要素のスタイルを定義する必要がある場合は要素セレクターを使用することが多く、特定の設計要素に関係なくスタイルを適用したい場合は、クラス セレクターを使用する方法が最も一般的です。
2.5 CSS の配置メカニズムを簡単に説明する
CSSでは、デフォルトのフロー配置方法に加えて、次のようないくつかの配置メカニズムがあります: フローティング配置、相対配置、絶対配置、および固定配置。
フロート配置は、要素を通常のフローから外し、それを含むボックスの左または右に配置しますが、それでも含むボックス内に配置します。
相対配置では、通常のフローでの位置を基準にして要素を配置します。
絶対配置とは、要素のコンテンツが通常のフローから完全に削除され、offset プロパティを使用して要素の位置を固定できることを意味します。
固定配置とは、要素のコンテンツをページ上の特定の位置に固定することです。
2.6表示属性と可視性属性の違いは何ですか?
display属性を使用して、要素によってレイアウトが生成される表示ボックスのタイプを定義できます。
1.如果将display属性设置为block，可以让行内元素表现得像块级元素一样；
2.如果将display属性设置为inline，可以让块级元素表现得像内联元素一样；
3.可以通过把display属性设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不在显示，不占用文档中的空间。
在DIV设计中，室友display:none属性后，HTML元素（对象）的宽度。高度等各种
属性都将”丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
2.7 简述对CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具备内容（content）、填充（padding）、边框（border）、边距（margin）这些属性。在CSS中，每个元素都被视为一个框，而每个框都有三个属性：
border：元素的边框（可能不可见），用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
padding：内边距，表示框内容和边框之间的空间。
盒子模型的结构如图所示：
由上图可以看出，width和height指的是内容区域的宽度和高度。增加内边距、外边距和边框不会影响到内容区域的尺寸，但会增加元素框的总尺寸。
因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。
2.8 简述CSS3中的伪类选择器？
CSS3提供了大量伪类选择器，浏览器对于有些伪类选择器的支持还不太好。目前，常用的伪类选择器有：
目标伪类：即 :target，突出显示活动的HTML锚，用于选取当前活动的目标元素；
元素状态伪类：比如 :enabled、:disabled、:checked；
结构伪类： 比如 :first-child、:last-child、:empty、:only-child；
否定伪类：即 :not(selector)，匹配非指定元素/选择器的每个元素。
2.9 为什么建议设置背景图像的同时还设置背景颜色？
一般建议在使用背景图片的同时提供background-color属性，并且将其设置为和图像主要颜色类似的颜色。这样，如果正在加载页面，或者因为各种原因无法显示背景图像时，页面可以使用这种颜色作为背景色。
2.10 如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后设置元素的左右外边距为auto，比如，margin:0 auto。则可以实现div居中显示。
对于浮动元素，设置其左右外边距为关键字auto是无效的。此时，如果需要设置其居中显示，可以：1.精确计算其左外边距并进行设置，实现居中显示。
2.使用一个居中显示的div元素包含次浮动元素,
代码如：<div style=”margin:0 auto;”><div style=”float:left;”></div></div>
2.11 在设置文本的字体时，为什么建议设置替换字体？
可以使用font-family属性来指定文本的字体，代码如下所示：font-family:name/inherit;
此时，name为首选字体的名称。如果字体名称有多个单词，即中间有空格，则需要将字体名称用一对单引号或者双引号包围起来。
但是，如果用户机器上并没有安装name所指定的字体，则会显示默认字体。因此，如果可以指定一种替代字体，替代字体可以和指定字体不完全相同，相似且不会影响页面的布局，就可以解决问题了。
我们可以为font-family属性指定多种字体，且多种字体之间用逗号隔开，这样可以为页面指定一个字体列表。如果用户机器没有第一种字体，则浏览器会查找字体列表中的下一种字体替代默认字体显示。如果找遍了字体列表还是没有可以使用的字体，浏览器才会使用默认字体显示页面。代码如下所示：
h1{font-family:Georgia,serif;}
此时，如果用户机器上没有安装Georgia，但安装了Times字体（serif字体系列中的一种字体），浏览器就可能对<h1>元素使用Times。尽管Times与Georgia并不完全匹配，但至少足够接近。
因此，我们建议在所有font-family规则中都提供一个通用字体系列。这样就提供了一条后路，在用户机器无法提供与规则匹配的特定字体时，就可以选择一个通用字体作为替换。
2.12 内联元素可以实现浮动吗？
在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。
2.13 什么情况下需要额外设置表格的显示规则？
默认情况下（不额外设置表格的显示规则时），表格按照自动表格布局进行显示，即浏览器在显示表之前查看每一个单元格，然后基于所有格的设置计算表单大小，而列的宽度是由列段元个中没有折行的最宽的内容设定的。此时，单元格的大小会适应内容的大小。
自动表格布局的算法在表格复杂时会比较慢，这是由于它需要在确定最终的布局之前访问表格中多有的内容。在不能提前确定每一列的大小时，这种方式会非常适用。
如果额外设置表格的显示规则，即设置table-layout属性的值为fixed，则称为固定表格布局。在固定表格布局中，水平布局仅取决于表格宽度，列宽度，表格边框宽度，单元格间距，而与单元格的内容无关。浏览器将使用某列指定的宽度来计算布局，并使用该宽度计算该列中所有其他单元格的宽度。
固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。因为如果指定使用固定表格布局，浏览器在接收到第一行后就可以显示表格。如果表格庞大且已经指定了大小，则会加速表的显示。
2.14 简要描述CSS中content属性的作用
content属性与:before及:after伪元素配合使用，来插入生成内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器为页面元素插入编号。比如，查看如下代码：
body {counter-reset:chapter;}
h1:before { content:”第”counter(chapter)”章”;}
h1 { counter-increment:chapter;}
使用content属性，并结合:before选择器和计数器counter，可以在每个<h1>元素前插入新的内容。
2.15 CSS Sprite是什么，谈谈这个技术的优缺点
CSS Sprite是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位。
其优点在于：①减少网页的http请求，提高性能，这也是CSS Sprite最大的优点，
也是其被广泛传播和应用的主要原因；
②减少图片的字节，多张图片合并成1张图片的字节小于多张图片的字节总和；
③较少了命名困扰，只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
④更换风格方便。只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便；
但是CSS Sprite也存在一些不可忽视的缺点：
①图片合成比较麻烦；
②背景设置时，需要得到每一个背景单元的精确位置；
③维护合成图片时，最好只是向下加图片，而不是更改已有图片。
2.16 对CSS3有了解吗？列举几个CSS3的新特性并简要描述
CSS3作为CSS技术的升级版本，着力于模块化发展，将规范分解为一些小的模块，如选择器、盒子模型、列表模块、背景和边框等；并加入了很多新的模块和属性，比如赋值选择器、文字阴影、边框圆角、边框阴影、渐变、过渡、多栏布局、2D/3D转换、动画等。
其中，CSS3提供了一些复杂选择器，用于实现页面复杂情况下的元素选择，如属性选择器，一些伪类和伪元素选择器；渐变用于为元素设置渐变效果的背景；转换可以实现元素的变换，比如位移、缩放、旋转等；过渡可以实现简单的动画效果；动画属性则可以实现复杂的动画，可以实现逐帧制作动画。
2.17 过渡与动画的区别是什么？
过渡属性transition可以在一定的事件内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果；
动画属性animation可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。
2.18 什么是CSS reset？
CSS reset，又叫做CSS重写或者CSS重置，用于改写HTML标签的默认样式。
有些HTML标签在浏览器里有默认的样式，例如p标签有上下边距，li标签有列表标识符号等。这些默认样式在不同浏览器之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。着必然会带来浏览器兼容问题。
因此，在CSS代码中，可以使用CSS代码去掉这些默认样式，即重新定义标签样式，从而覆盖浏览器的CSS默认属性，即CSS reset。
需要注意的是，在进行样式重写时，不建议使用 * 选择器进行重写，这样会降低效率，影响性能。
2.19 如何清除浮动元素所带来的影响？
浮动定位是指将元素排除在普通流之外，并且将它放置在包含框的左边或者右边，但是依旧位于包含框之内。也就是说，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以元素浮动之后，其原有位置不再保留，其他元素的位置会受到影响。
如果需要清除左侧或者右侧浮动元素带来的影响，则可以使用clear属性来设置。另外，包含框呃逆的子元素浮动后，如果包含框没有设置具体的高度，则其高度会发生变化，此时，可以使用overflow属性来清除子元素浮动后带来的影响。
2.20 谈谈你对浏览器兼容性问题的理解
浏览器的类型及版本的不同会造成CSS效果不尽相同，因此需要实现浏览器兼容，也可以针对不同的浏览器编写不同的CSS。
目前，各主流浏览器的新版本，对应W3C的标准支持很好，因此，首先保证代码符合W3C的标准，这是解决浏览器兼容问题的前提。
其次，对于某些支持受限的属性，针对不同的浏览器添加相应的前缀，比如-webkit-、-o-、-moz-。
第三，对于IE的低版本，可以编写带有特定前缀的代码，实现版本识别。比如：
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#f1ee18\9;/*IE6 7 8识别*/
+background-color:#f1ee18;/*IE6 7识别*/
_background-color:#f1ee18;/*IE6识别*/
}
另外，对于特定的兼容性问题，特殊解决。常见的特殊问题有：
1.使用CSS reset：对于有些HTML标签，浏览器默认的margin和padding不同，可以使用CSS代码改写默认的样式效果，从而实现统一
2.IE低版本中，不能使用auto关键字实现块级元素居中显示，可以改用设置父元素的text-align；
3.子元素设置上外边距时，父元素需要设置边框或者外边距；
4.外边距合并问题。