Questions d'entretien CSS (référence)

1. Introduire le modèle de boîte CSS standard ? Quelles sont les différences entre les modèles de box des versions inférieures d'IE ?

Le modèle standard se compose de quatre parties :

• Zone de contenu : une zone où des éléments tels que du texte, des images, etc. peuvent être placés. Généralement, les indicateurs de largeur et de hauteur sont définis comme la largeur et la hauteur du contenu
• Zone de marge intérieure : la distance entre le contenu et la bordure
• Zone de bordure. : border
• Zone de bordure extérieure : limitée par la bordure extérieure, utilisez la zone vide pour étendre la zone de bordure et séparer les éléments adjacents

Distinction du modèle :
Le phénotype standard fait référence au modèle de boîte avec box-sizing défini sur content-box, généralement width, Height fait référence à la largeur et à la hauteur du contenu. Le modèle de boîte IE fait référence à une boîte avec un dimensionnement de boîte comme bordure-boîte. Le calcul de la largeur et de la hauteur est content+padding+border ;

Recommandation de sujet :Résumé des questions d'entretien CSS en 2020 (dernière)

2. Que sont les sélecteurs CSS ? Lesquels peuvent être hérités ?

• sélecteur d'identifiant (#myid)
• sélecteur de classe (.myclassName)
• sélecteur de balise (p,h1,p)
• Sélecteur descendant (ul>li)
• Sélecteur descendant (li a)
• Sélecteur générique (*)
• Sélecteur d'attribut (a[rel=" external"])
• Sélecteur de pseudo-classe (a:hover,li:nth-child)

Styles hérités : font-size font-family color
Non disponible Styles hérités : bordure de remplissage, marge, hauteur, largeur

3. Comment calculer la priorité CSS ?

• Principe de proximité de priorité, sous le même poids, la définition de style la plus proche est précise
• Les styles de chargement sont soumis à la dernière positionnement chargé

La priorité est :

• Même poids : style en ligne (balise intérieure)> Tableau de style intégré (dans le fichier actuel)>Style externe (dans le fichier externe) )
• !important >id >class >tag
• !important a une priorité plus élevée que inline

4. ? Expliquez leur rôle

• type de bloc de bloc. La largeur par défaut est la largeur de l'élément parent. La largeur et la hauteur peuvent être définies. Les sauts de ligne sont affichés
• aucun élément n'est affiché et est supprimé du flux de documents
• en ligne. Éléments en ligne. La largeur par défaut est la largeur du contenu et ne peut pas être définie. Largeur et hauteur, affichées en ligne
• inline-block La largeur par défaut est la largeur du contenu, la largeur et la hauteur peuvent être définies, affichées en ligne<.>
list-item Comme les éléments de type bloc, la largeur et la hauteur peuvent être définies, affichées en ligne
• tableau Cet élément sera affiché sous forme de tableau comptable
• hériter stipule que la valeur de l'attribut display doit être hérité de l'élément parent

5. Les valeurs de position, release et absolue, sont positionnées très loin. Le point est ?

absolute génère un élément absolument positionné, positionné par rapport au premier élément parent avec la partie valeur statique
• fixed génère un élément absolu, positionné par rapport à la fenêtre du navigateur
relative Génère un élément relativement positionné, positionné par rapport à sa position normale
• statique Valeur par défaut. Il n'y a pas de positionnement et l'élément apparaît dans le flux normal
• inherit spécifie que la valeur de l'attribut position est héritée de l'élément parent

6 Quelles sont les caractéristiques. du CSS ?

Transition

•   transition-property:width
    transition-duration:1s
    transition-timing-function:linear
    transition-delay:2s

Animation

animation:动画名称，一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)

Transformation de forme

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

• Sélecteur

• Ombre

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外，设置inset就是从外往里)

Image de bordure

border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式

Bordure arrondie

  border-radius: n1 n2 n3 n4;
/* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */

Réflexion (réflexion)

box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片

Texte

Saut de ligne
• word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)
Dépasse les points de suspension

overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;

Points de suspension multilignes

overflow:hiden;
text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本
display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式

Ombre du texte

text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色

Couleur

rgba (valeur de couleur RVB, a est la transparence)

Dégradé

Dégradé linéaire et dégradé radial

• 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'
    right:0
    bottom:0;
    left:0;
    margin:auto;
}

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!