Résumé des points de connaissance de l'entretien en HTML et CSS (avec exemples)

Le contenu de cet article est un résumé des points de connaissances des entretiens sur HTML et CSS (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Algorithme de priorité CSS

Principe de priorité, la définition de style la plus proche prévaudra dans les mêmes conditions de poids
Le style de chargement est basé sur le dernier positionnement chargé Le
la priorité est : !important > id > class > la balise importante est supérieure à la priorité en ligne
l'instruction importante est supérieure à la priorité js

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如p p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

poids défini par CSS

/ 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：

/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}

// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

Nouvelle pseudo-classe CSS3

p:first-of-type sélectionne le premier
p:last-of-type sélectionne chaque élément

qui est le dernier élément

p:only-of-type sélectionne chaque élément

qui est le seul élément

p:only-child sélectionne chaque élément

qui est le seul élément enfant de son élément parent.
p:nth-child(2) Sélectionne chaque élément

qui est le deuxième enfant de son élément parent.

:after Ajoute du contenu avant l'élément, et peut également être utilisé pour effacer les flottants.
:before Ajouter du contenu après l'élément
:enabled
:disabled Contrôler l'état désactivé du contrôle de formulaire.
:coché Le bouton radio ou la case à cocher est coché

Centrer un élément flottant

给div设置一个宽度，然后添加margin:0 auto属性

div{
    width:200px;
    margin:0 auto;
 }

//确定容器的宽高 宽500 高 300 的层
//设置层的外边距

 .div {
      width:500px ; height:300px;//高度可以不设
      margin: -150px 0 0 -250px;
      position:relative;         //相对定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

Centrer le div en position absolue

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

CSS3 a de nouvelles fonctionnalités

Ajout de divers sélecteurs CSS (: not(.input) : tous les nœuds dont la classe n'est pas "input")
Coins arrondis ( border-radius:8px )
Mise en page multi-colonnes (mise en page multi-colonnes)
Ombre et réflexion (ShadowReflect)
Effets de texte (text-shadow,)
Texte-décoration (Text-decoration)
Dégradé linéaire (dégradé)
Rotation (transformation)
Ajout de la rotation, de la mise à l'échelle, du positionnement, de l'inclinaison, de l'animation, des arrière-plans multiples
transform:scale(0.85,0.90) translation(0px,-30px) skew( -9deg,0deg )Animation :

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
    旋转 transform: rotate(20deg);
    倾斜 transform: skew(150deg, -10deg);
    位移 transform: translate(20px, 20px);
    缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

Créer un triangle avec du CSS pur

// 把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

Compatibilité des navigateurs

1. Les images png 24 bits apparaissent comme arrière-plan sur le navigateur iE6. La solution est de les rendre au format PNG8.

2. La marge et le remplissage par défaut du navigateur sont différents. La solution est d'ajouter un *{margin:0;padding:0;} global pour unifier

3. Sous IE, vous pouvez utiliser la méthode d'obtention d'attributs réguliers pour obtenir des attributs personnalisés, ou vous pouvez utiliser getAttribute() pour obtenir des attributs personnalisés ; sous Firefox, vous ne pouvez utiliser getAttribute() que pour obtenir des attributs personnalisés. Solution : obtenir uniformément des attributs personnalisés via getAttribute()

4. Sous IE, l'objet pair a des attributs x, y, mais pas d'attributs pageX, pageY. Sous Firefox, l'objet événement a pageX, Attribut pageY, mais pas d'attributs x, y

BFC

Contexte de formatage au niveau du bloc (les éléments internes n'affecteront pas les éléments externes)

Règles de rendu :
1. Les marges verticales de l'élément bfc se chevauchent
2. La zone bfc ne chevauchera pas l'élément flottant
3. hauteur bfc , les éléments flottants participeront également au calcul

Créer bfc :

1.overflow
2.floating n'est pas nul
3.position n'est pas statique
4.display est lié à la table

display:inline-block Quand l'écart sera-t-il affiché ?

Supprimez les espaces, utilisez des valeurs de marge négatives, utilisez font-size:0, letter -spacing, word-spacing

Effacer le flottant

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

1 Vous pouvez utiliser la balise a pour définir l'affichage : largeur du bloc en ligne : 100 %, et soutenez le div contenant les éléments flottants (les div ne sont pas utilisés. Hauteur de conception)

2.overflow: Hidden(BFC)
3 Vous pouvez utiliser la balise a pour définir display: block width: 100%, clear. : les deux
4.div=》display : table
5 .div=》display : table-cell
6.div=》display : flow-root (déclencheur BFC)
7.div : :after au lieu d'un tag=》content:'' display:block; clear: Both; (Il y a un élément sans hauteur en bas)
8. ; clear:both;>
9. Laisser le div flotter également (BFC)

Modèle de boîte

Composition du modèle de boîte : contenu, remplissage, bordure, marge

Explorateur de version IE8 et inférieure, aucun DOCTYPE n'est déclaré, la largeur et la hauteur du contenu incluront le remplissage intérieur et la bordure, ce qui est appelé le modèle de boîte étrange (modèle de boîte IE)
Modèle de boîte standard (W3C) : largeur de l'élément = width + padding + border + margin
Modèle de boîte étrange (IE) : élément width = width + margin
Les navigateurs standard déclenchent l'analyse du « mode étrange » et le calcul de la largeur et de la hauteur en définissant le dimensionnement de la boîte : border -box propriété de css3

box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; // 继承父元素 box-sizing 属性的值

Héritages

可以继承的样式：font-size、font-family、color、list-style、cursor
不可继承的样式：width、height、border、padding、margin、background

Masquer les méthodes d'éléments

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
display: none; 元素会变得不可见，并且不会再占用文档的空间。
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

rgba() et opacité

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

## Compatibilité JS du navigateur##

当前样式：getComputedStyle(el, null) VS el.currentStyle
事件对象：e VS window.event
鼠标坐标：e.pageX, e.pageY VS window.event.x, window.event.y
按键码：e.which VS event.keyCode
文本节点：el.textContent VS el.innerText

Il y a un espace blanc invisible entre li et li

li排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔
解决办法：在ul设置设置font-size=0,在li上设置需要的文字大小

px、em

px 相对于显示器屏幕分辨率，无法用浏览器字体放大功能
em 值并不是固定的，会继承父级的字体大小： em = 像素值 / 父级font-size

FOUC(Flash of Unstyled Content)

当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC
产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将停止之前的渲染。
等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决方法：使用 link 标签将样式表放在文档 head

CSS优化、提高性能

多个css合并，尽量减少HTTP请求
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用css继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
css雪碧图

全屏滚动

原理类似图片轮播原理，超出隐藏部分，滚动时显示
可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

响应式设计ie

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

a标签上四个伪类的执行顺序

link > visited > hover > active

Chrome支持小于12px 的文字

.shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。 最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

断开一个TCP连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。

第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
默认HTTP的端口号为80，HTTPS的端口号为443

HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

GET和POST的区别，何时使用POST

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

POST est plus stable et fiable que GET lors de l'envoi d'entrées utilisateur contenant des caractères inconnus

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!