BFC (Block Formatting Context), Niveau bloc Le contexte de formatage est une zone de rendu indépendante qui isole les éléments à l'intérieur du BFC des éléments externes afin que le positionnement des éléments internes et externes ne s'affecte pas les uns les autres.
Sous IE, la mise en page peut être déclenchée par
zoom:1
peut empêcher les éléments d'être recouverts par le flottement éléments
Recommandation de sujet : Résumé des questions d'entretien CSS 2020 (dernière)
sont simplement répertoriés ici Pour une utilisation spécifique, veuillez consulter mon article sur les nouveaux sélecteurs et attributs en CSS3
<.>
|
|
||||||||
|---|---|---|---|---|---|---|---|---|---|
|
|
||||||||
E[att$="val"] |
|
||||||||
|
La valeur de l'attribut att contient l'élément de chaîne "val" |
|
选择器 |
含义描述 |
|---|---|
|
E:root |
匹配文档的根元素，对于HTML文档，就是HTML元素 |
|
E:nth-child(n) |
匹配其父元素的第n个子元素，第一个编号为1 |
|
E:nth-last-child(n) |
匹配其父元素的倒数第n个子元素，第一个编号为1 |
|
E:nth-of-type(n) |
与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
|
E:nth-last-of-type(n) |
与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
|
E:last-child |
匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
|
E:first-of-type |
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
|
E:last-of-type |
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
|
E:only-child |
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
|
E:only-of-type |
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
|
E:empty |
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 |
|
Attribut |
Signification Description |
Compatible |
|---|---|---|
|
transition |
Définir l'effet de transition | |
|
transformer |
Effets de transformation (déplacement, mise à l'échelle, rotation, étirement ou étirement) |
|
| animation |
Effet d'animation |
|
|
boîte-ombre |
Effet d'ombre |
FF3.5, Safari 4, Chrome 3 |
|
texte-ombre |
texte-ombre |
FF 3.5, Opera 10, Safari 4, Chrome 3 |
|
bordure -couleurs |
Définir plusieurs couleurs pour la bordure |
FF3+ |
|
boder-image |
Bordure d'image |
FF 3.5, Safari 4, Chrome 3 |
|
débordement de texte |
troncature de texte |
IE6+, Safari4, Chrome3, Opera10 |
|
retour à la ligne |
Retour à la ligne |
IE6+, FF 3.5, Safari 4, Chrome 3 |
|
bordure-rayon |
coin rond Bordure |
FF 3+, Safari 4, Chrome 3 |
|
opacité |
Opacité |
tous |
|
dimensionnement de la boîte |
Mode de composition du modèle de boîte de contrôle |
FF3+, Opera 10, Safari 4, Chrome 3 |
|
contour |
frontière extérieure | FF3+, safari 4, chrome 3, opéra 10 |
|
fond -size |
Ne précise pas la taille de l'image d'arrière-plan |
safari 4, chrome 3, opéra 10 |
|
origine-arrière-plan |
Spécifiez où commencer à afficher l'image d'arrière-plan |
safari 4, chrome 3, FF 3+ |
|
clip-de-fond |
Spécifiez où commencer à recadrer l'image d'arrière-plan |
safari 4, chrome 3 |
| rgba |
Définissez la valeur de couleur en fonction des trois canaux de couleur r, g, b , via un pour définir la transparence |
safari 4, chrome 3, FF3, opéra 10 |
text-align:center
margin:0 auto absolute + transform
absolute + margin
flex + justify-content:center
line-height:height
absolute + transformflex + align-items:centerdisplay:table-cell; vertical-align: middle
1. Largeur et hauteur de l'élément connu : positionnement absolu+marge:auto:
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}2. Largeur et hauteur de l'élément connu : positionnement absolu+marge négative
p{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}. 3. transformation absolue+
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
.box{
height:600px;
display:flex;
justify-content:center; //子元素水平居中
align-items:center; //子元素垂直居中
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
}
.box>p{
background: green;
width: 200px;
height: 200px;
}<p class="clear"></p> après un élément flottant et attribuez l'attribut .clear{clear:both;} en CSS pour nettoyer le flottant. Vous pouvez également utiliser <br class="clear" /> ou <hr class="clear" /> pour le nettoyage. Avantages : simple, écriture d'une petite quantité de code, bonne compatibilité Inconvénients : l'ajout d'éléments html non sémantiques n'est pas propice à la sémantique du code et le coût de maintenance ultérieur est élevé
overflow:hidden; ou overflow:auto; au conteneur de l'élément flottant pour effacer le float De plus, hasLayout doit être déclenché dans IE6, par exemple en définissant le conteneur. largeur et hauteur ou réglage zoom:1 pour l'élément parent. Après avoir ajouté l'attribut de débordement, l'élément flottant retourne à la couche conteneur, augmentant la hauteur du conteneur, obtenant ainsi l'effet de nettoyer les éléments flottants. Avantages : simple, moins de code, bon support du navigateur Inconvénients : ne peut pas être utilisé avec la position, car la taille excédentaire sera masquée
overflow:hidden
clearfix au conteneur de l'élément flottant, puis ajoutez un pseudo-élément :after à cette classe pour ajouter un élément de bloc invisible (élément Block) à la fin de l'élément pour nettoyer le flotteur. Un espace invisible "020" ou un point "." est ajouté à la fin de l'élément interne du conteneur via des pseudo-éléments CSS, et l'attribut clear est attribué pour effacer le flottant. Il convient de noter que pour les navigateurs IE6 et IE7, un zoom:1 doit être ajouté à la classe clearfix pour déclencher haslayout. Avantages : Bon support du navigateur, peu sujet à des problèmes étranges (actuellement : utilisé par les grands sites Web, tels que : Tencent, NetEase, Sina, etc.) Inconvénients : Beaucoup de code, exigeant Ce n'est qu'en combinant les deux lignes de code que les navigateurs grand public peuvent prendre en charge
Simple, moins de code, facile pour maîtriser Inconvénients : Convient uniquement aux mises en page à hauteur fixe
Avant d'écrire des triangles, ils ont été écrits directement. J'étais coincé dans le code et je n'ai pas exploré les raisons. Ce n'est que lorsque j'ai eu un entretien que l'intervieweur m'a demandé de parler du principe de création d'un triangle avec CSS, alors je... je J'ai rapidement parcouru les informations à mon retour. Ensuite, j'ai expliqué ce que j'avais compris à l'époque. Le processus est répertorié :
1 Rédigez une demande de frontière que nous connaissons le mieux
.box{
width:100px;
height:100px;
border: 3px solid;
border-color:#1b93fb #1bfb24 #efad48 #ef4848;
}. L'effet est le suivant :
2. Ensuite, nous augmentons la valeur de la bordure
.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的应用
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，那么什么是三栏布局？ 即左右模块固定宽度，中间模块随浏览器变化自适应，想要完成的最终效果如下图所示：
下面列出四种实现方式, 在开发中可以根据实际需求选择适合自己的方法进行编码:
<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>这种方案也简单实用, 并且可以将
<p class="main"></p>元素放到第一位,使得主要内容优先加载!
<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并排，以形成三栏布局。
<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>@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式。
css部分就整理到这里, 小伙伴们面试还有什么经常遇到的,可以在评论区给我留言, 我有时间就整理出来, IT(挨踢)都是一大家, 方便你我他
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
Tutoriels associés recommandés : Tutoriel vidéo 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
