|
##属性
|
意味の説明
|
互換性
|
|
トランジション
|
##トランジション効果を設定します
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃変身＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃＃＃＃ | #変形効果 (移動、拡大縮小、回転、伸縮)
|
|
##アニメーション
|
#アニメーション効果
|
|
##box-shadow|
| シャドウ効果
| FF3.5、Safari 4、Chrome 3
|
| ##テキストシャドウ
| ##テキストシャドウ
| FF 3.5、Opera 10、Safari 4、Chrome 3
|
border -colors
|
##境界線に複数の色を設定
|
## FF3
|
boder-image |
|
ピクチャボーダー
|
##FF 3.5、Safari 4、Chrome 3
|
テキスト オーバーフロー
|
|
テキストの切り詰め
|
IE6、Safari4、Chrome3、Opera10 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ワードラップ＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃自動行折り返し
|
##IE6、FF 3.5、Safari 4、Chrome 3
|
| border-radius
|
円コーナー境界線
| ##FF 3、Safari 4、Chrome 3
|
不透明度|
##不透明度 |
すべて |
| ボックス サイズ
|
#コントロール ボックス モデル構成モード
|
FF3、Opera 10、Safari 4、Chrome 3
|
概要 |
|
##外側の境界線
|
FF3、safari 4、chrome 3、オペラ 10
|
# #background-size
|
|
##背景画像のサイズを指定しないでください
| ##safari 4、chrome 3、opera 10
| #background-origin
| 背景画像の表示を開始する位置を指定します
|
##サファリ 4、クローム 3、FF 3
|
background-clip |
##背景を指定します。画像のトリミングを開始する場所を指定します。
|
|
#safari 4、chrome 3
|
rgba
|
[透明度の設定] を使用して、r、g、b の 3 つのカラー チャネルに基づいてカラー値を設定します。 |
サファリ 4、クローム 3、FF3、オペラ 10
|
3. 中央揃えのレイアウト
- 水平方向の中央揃え
- インライン要素:
text-align:center
- ブロックレベルの要素:
margin:0 auto
- 絶対的な位置決めと移動:
absolute 変換
- 絶対的な位置決めと負のマージン:
absolute margin
- flex レイアウト:
flex justify-content:center
- 垂直中央揃え
- 子要素は単一行のテキスト:
line-height:height
- ##絶対変換
##flex align-items:center-
display:table-cell;vertical-align: middle-
-
水平方向と垂直方向の中央揃え -
1. 既知の要素の幅と高さ: 絶対位置マージン:auto: p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}2。既知の要素の幅と高さ: 絶対配置負のマージン
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}3.absolutetransform
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}4.flex justify-content align-items<pre class="brush:css;toolbar:false;">.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>p{
background: green;
width: 200px;
height: 200px;
}</pre>
4. float をクリアする方法は何ですか?また、それぞれの利点と欠点は何ですか?
空の要素を Clear 属性で使用し、空の要素を Clear 属性の後に使用します。 17c44092bca90a023c157929f44501ae94b3e26ee717c64999d7867364b1b4a3- などのフローティング要素を使用し、CSS で
.clear{clear:both;} 属性を割り当ててフロートをクリアします。クリーニングには 9bd35d0ab1399652577f51221b5af246 または 9e9608c45e9340a126bcb009bcb97e71 を使用することもできます。 # 利点: シンプル、少量のコードを記述でき、互換性が高い 欠点: 非セマンティックな HTML 要素の追加はコードのセマンティクスに役立たないため、後のメンテナンスコストが高くなります
CSS の overflow 属性を使用して、フローティング要素のコンテナに
overflow:hidden; または - overflow:auto;
を追加してフローティング要素をクリアします。 、hasLayout は IE6 でトリガーする必要があります。たとえば、親要素のコンテナーの幅と高さを設定するか、zoom:1 を設定します。オーバーフロー属性を追加した後、フローティング要素はコンテナー層に戻り、コンテナーの高さが上がり、フローティング要素をクリーンアップする効果が得られます。 長所: シンプル、コードが少ない、優れたブラウザサポート 短所: 超過サイズが非表示になるため、位置と一緒に使用できません
overflow:hidden
clearfix
クラスを追加し、このクラスに :after 疑似要素を追加して、要素の末尾に非表示のブロック要素 (Block 要素) を追加してフローティング要素をクリアします。 CSS疑似要素によりコンテナの内部要素の末尾に不可視のスペース「020」またはドット「.」が追加され、フロートをクリアするためにclear属性が割り当てられます。 IE6 および IE7 ブラウザの場合、haslayout をトリガーするには、zoom:1; を clearfix クラスに追加する必要があることに注意してください。 -
#親要素の高さの設定
シンプル、コードが少なく、簡単欠点: 固定高レイアウトにのみ適用可能-
5. 純粋な CSS を使用して三角形を作成する原理とは何ですか
以前に三角形を作成するとき、それらは直接書かれていました。私はコードに行き詰まり、その理由を探りませんでした。面接を受けるまで、面接官は CSS で三角形を作成する原理について話すよう私に求めました。私は今... 戻ってきました。次に、私が当時理解していたことを説明しました。プロセスは次のとおりです:
1. 私たちが最もよく知っているボーダー アプリケーションを作成します .box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
効果は次のとおりです。
2. 次に、境界値を増やします#.box{
width:100px;
height:100px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
很容易发现, border渲染并不是正方形, 而是梯形的.
3. 在增大border的基础下, 此时我们将盒子宽高变成0,会产生什么效果呢!
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}
四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;
4. 设置透明, 隐藏其中三个三角形
.box{
width:0px;
height:0px;
border: 50px solid;
border-color:transparent transparent transparent #ef4848;
}
三角形这样就出来, 有木有很简单, 当然我们也可以采用逆向思维来写这个效果, 就是先将所有边框设为透明, 然后需要哪边再对其设置颜色, 效果是一样的
.box{
width:0px;
height:0px;
border: 50px solid transparent;
border-left:50px solid #ef4848;
}
这样给面试你的人讲,讲明白应该不是问题., 重点就是要理解border的应用
6. 实现三栏布局有哪些方法, 分别描述一下
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
<style>
.container{
display:flex;
justify-content: center;
height: 200px;
background: #eee;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.main {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p>简单实用，现在比较流行的方案，但是需要考虑浏览器的兼容性。
<style>
.container {
position: relative;
background:#eee;
height:200px;
}
.main {
height: 200px;
margin: 0 120px;
background-color: yellow;
}
.left {
position: absolute;
width: 100px;
height: 200px;
left: 0;
top: 0;
background-color: red;
}
.right {
position: absolute;
width: 100px;
height: 200px;
background-color: green;
right: 0;
top: 0;
}
</style>
<p class="container">
<p class="left">1</p>
<p class="main">2</p>
<p class="right">3</p>
</p>这种方案也简单实用, 并且可以将 19c136f7655d60e76c6f77589880575894b3e26ee717c64999d7867364b1b4a3元素放到第一位,使得主要内容优先加载!
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: yellow;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: green;
}
</style>
<p class="content">
<p class="main"></p>
</p>
<p class="left"></p>
<p class="right"></p><style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: yellow;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏p并排，以形成三栏布局。
7. css3实现0.5px的细线
<style>
.line {
position: relative;
}
.line:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
background-color: #000000;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
</style>
<p class="line"></p>
8. link 与 @import 的区别
- 从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
- 加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
- 兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
- DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他
9. 开发中为什么要初始化css样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
10. CSS を最適化してパフォーマンスを向上させる方法は何ですか?
- スタイルを別の CSS ファイルに記述し、head 要素で参照して次のように記述してみてください。個別の CSS ファイル内のコードには、いくつかの利点があります。
- コンテンツとスタイルの分離、管理とメンテナンスの容易さ
- ページ サイズの削減
- CSS ファイルはキャッシュして再利用できます。メンテナンス コストの削減
- @import
- 複雑なセレクターの使用は避けてください。レベルが少ないほど良いです。セレクターのネストは 3 つを超えないようにすることをお勧めします。
- ページのスタイル ファイルを合理化し、未使用のスタイルを削除します。
- CSS 継承を使用してコードの量を削減します。
- 避けてください。重要なことは、他のセレクターを選択することもできます
推奨される関連チュートリアル: CSS ビデオ チュートリアル
