検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 面接の質問 (参考)

CSS 面接の質問 (参考)

coldplay.xixi
coldplay.xixi転載
2020-08-03 16:02:442983ブラウズ

CSS 面接の質問 (参考)

1. 標準 CSS ボックス モデルを導入しますか? IE の下位バージョンのボックス モデルの違いは何ですか?

標準モデルは 4 つの部分で構成されます。

  • コンテンツ領域: テキスト、画像、通常、幅と高さのインジケーターが設定されます。 はコンテンツの幅と高さです
  • 内マージン領域：コンテンツと境界線の間の距離
  • 境界線領域: border
  • 外側の境界領域: 外側の境界によって制限され、空白領域を使用して境界領域を拡張し、隣接する要素を分離します。

モデルの区別:
標準的な表現型は次のとおりです。 box-sizing を content-box に設定するボックス モデルに、一般的に幅と高さはコンテンツの幅と高さを指します。 IE ボックス モデルは、ボックス サイズをボーダー ボックスとして持つボックスを参照します。幅と高さの計算はコンテンツのパディングボーダーです;

特別な推奨事項:2020年のCSS面接の質問のまとめ(最新)

2. CSS セレクターとは何ですか?どれが継承できるのでしょうか？

  • id ​​セレクター (#myid)
  • クラス セレクター (.myclassName)
  • タグ セレクター (p,h1,p)
  • 子孫セレクター(ul>li)
  • 子孫セレクター (li a)
  • ワイルドカード セレクター (*)
  • 属性セレクター (a[rel=" external"])
  • 疑似クラス セレクター (a:hover,li:nth-child)

継承可能なスタイル: font-size font-family color
不可継承されたスタイル: ボーダー パディング マージン高さ幅

3. CSS 優先度の計算方法

  • #優先度の原則は最も近いものです。同じウェイトの場合、最も近いスタイル定義が正確です。
  • 読み込みスタイルは最後に読み込まれた位置に依存します

優先順位は次のとおりです:

  • 同じ重み: インライン スタイル (タグ内)> 埋め込みスタイル テーブル (現在のファイル) >外部スタイル (外部ファイル内)
  • !重要 >id >クラス >タグ
  • !重要はインラインよりも優先されます
#4. 表示にはどのような値があるのでしょうか？役割を説明します

#block ブロック タイプ。デフォルトの幅は親要素の幅で、幅と高さを設定でき、行の折り返し表示が可能です。
  • none 要素は表示されず、ドキュメント フローから削除されます。
  • inline インライン要素、デフォルトの幅はコンテンツの幅であり、設定できません 幅と高さ、同じ行に表示されます
  • inline-block デフォルトの幅はコンテンツの幅です、幅と高さを設定でき、同じ行に表示されますrow
  • list-item ブロック型要素と同様に、幅と高さを設定して同じ行に表示できます
  • table この要素は会計表として表示されます
  • inheritはdisplay属性の値を親要素から継承することを規定しています
  • 5.position releaseとabsoluteの値が離れた位置にある というのがポイントでしょうか？

absolute は、値部分を持つ最初の親要素を基準にして絶対位置の要素を生成します。 static
  • fixed はブラウザ ウィンドウを基準にして位置する絶対要素を生成します。
  • relative 通常の位置を基準にして相対的に配置された要素を生成します。
  • static デフォルト値。位置決めを行わない場合、要素は通常のフローに表示されます。
  • inherit は、position 属性の値が親要素から継承されることを指定します
  • 6. CSS の特徴は何ですか?

トランジション
  •   transition-property:width
  transition-duration:1s
  transition-timing-function:linear
  transition-delay:2s
アニメーション
アニメーション: アニメーション名、1 サイクルにかかる時間、雲の曲線 (デフォルトのイーズ）、アニメーションの遅延（デフォルト 0）、アニメーションの再生回数（デフォルト 1）、アニメーションを逆再生するかどうか（デフォルトは通常）、アニメーションを一時停止するかどうか（デフォルトは実行中）

シェイプ変換

    transform: 使用于2D或3D转换的元素
transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);
セレクター

  • シャドウ

    • box-shadow: 水平方向の影の位置 垂直方向の影の位置 ぼかし距離、影のサイズ、影の色、影の開始方向 (デフォルトは内側から外側、設定インセットは外側から内側)

ボーダー画像

  • border-image: 画像パスの設定、ボーダー背景画像の分割方法の設定、オブジェクトのボーダーの太さの設定または取得、オブジェクトの境界背景画像の設定または取得、外側への拡張、境界画像のタイリング方法の設定

境界線の角丸

      border-radius: n1 n2 n3 n4;
/* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */
  • 反射
  • box-reflect: 方向 [上-上|下-下|右-右|左-左]、オフセット、マスク画像

Word

  • 改行
word-break: 通常 (デフォルトではブラウザのデフォルトの改行ルールを使用します)|break-all (単語内での改行を許可します)|keep-all (改行できるのは半角スペースまたはハイフンのみです)
  • 省略記号を超えています
    • overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
  • 複数行の省略記号
    overflow:hiden;
text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本
display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式
  • Text-shadow
  • text-shadow: 水平方向の影 垂直方向の影 ぼかしシャドウ 影の色

色

  • rgba(rgb カラー値、a は透明度)

グラデーション

  • 線形グラデーションと放射状グラデーション
    • filter(滤镜)

    filter: 滤镜效果(透明度)

    • 弹性布局

    弹性布局就是flex布局

    -栅格布局

    栅格化布局。就是grid

    • 盒模型
    • border-box 边框和内边距包含在元素的宽高之内
    • content-box 边框和内边距不包含在元素的宽高之内

    7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景

    一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间

    8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么

    • png24位的图片在Ie6浏览器上出现背景。解决方案是做成png8
    • 浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一
    • IE6双边距bug；矿属性变迁float后，又有横向的margin情况下，在Ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。
    • 设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度
    • chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决

    移动端

    • 1px边框问题。解决方案采用微元素模拟的方式
     .scale{
  position: relative;
  border:none;
 }
.scale:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
    • 点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题
    • 安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normal
    • ios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper
     .wrapper{
   position:relative;
   overflow:hidden;
 }
    • ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;

    9. 请解释一下为什么需要清浮动？清浮动的方式

    清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示

    • 父级p定义height
    • 在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}
    • 给父容器添加overflow:hidden或者auto样式
    • 给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动
    .clearfix{
    zoom:1;
}
.clear:after{
    content:'.';
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}

    10. margin和padding分别适合什么场景使用？

    margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是用来布局分开元素，使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容与元素之间有一段间距

    11.什么是伪类，什么是伪元素，他们的区别？

    • 伪类的受体是文档树中已有的元素，而伪元素则创建了一个DOM外的元素
    • 伪类用于添加元素的特殊效果，而伪元素则是添加元素的内容
    • 伪类使用的一个冒号，为元素使用两个冒号
    • 伪类更常用一些简单的动画或者交互的样式，例如滑入滑出，而为伪元素更常用语字体图标，清除浮动等

    12. 什么是外边距合并

    外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者

    13. 实现水平垂直居中

    示例：

    <p class="md-warp">
    <span class="md-main"></span>
</p>
.md-warp{
    width: 400px;
    height: 300px;
    max-width: 100%;
    border: 1px solid #000;
}
.md-main{
    display: block;
    width: 100px;
    height: 100px;
    background: #f00;
}

    水平居中

    • margin法
      需要满足三个条件
    • 元素定宽
    • 元素为块级元素或行内元素设置display:block
    • 元素的margin:left或者margin-right都必须设置auto
      三个条件缺一不可
    .md-main{
    margin: 0 auto
}
    • 定位法
    • 元素定宽
    • 元素绝对定位，并设置left:50%;
      +元素负做边距margin-left为宽度的一半
    .md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

    有些时候元素宽度不是固定的，依然可以使用定位法实现水平居中用到css3中的transform属性中的translate

    .md-warp{
    position: relative;
}
// 注意此时md-main不设置width为100px
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
    • 文字水平居中

    直接使用text-align:center即可

    垂直居中

    • 定位法

    和水平居中类似，只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可

    优点：能在各个浏览器下工作，结构简单明了，不需要增加额外的标签

     .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    /* 核心 */
    top: 50%;
    margin-top: -50px;
}

    不确定高度的时候

    .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    // 注意此时md-main不设置height为100px
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
    • 单行文本垂直居中

    需要满足两个条件：

    • 元素内容是单行，并且其高度是固定不变的
    • 将其line-height设置成height的值一样
    p{
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
span{
    line-height: 300px;
}

    视窗单位的解决办法

    让元素在视窗中居中，使用vh实现

    .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

    Flexbox的解决方案

    完成这项工作只需要两个样式，在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto

    .md-wrap{
    display:flex
}
.md-main{
    display:auto
}

    Flexbox的实现文本的水平垂直居中同样很简单

     .md-warp{
    display:flex;
}
.md-main{
    display: flex;
  align-items: center;
  justify-content: center;
    margin: auto;
}

    绝对垂直居中

    .md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0&#39;
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

    最好不要使用绝对定位，因为他对整体的布局影响相当的大

    相关教程推荐：CSS视频教程

以上がCSS 面接の質問 (参考)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：2021 CSS3 面接の質問次の記事：2021 CSS3 面接の質問

関連記事

続きを見る