Zusammenfassung der Interview-Wissenspunkte in HTML und CSS (mit Beispielen)

Der Inhalt dieses Artikels ist eine Zusammenfassung der Interview-Wissenspunkte zu HTML und CSS (mit Beispielen). Ich hoffe, dass er für Sie hilfreich ist.

CSS-Prioritätsalgorithmus

Prioritätsprinzip, die nächstliegende Stildefinition hat unter denselben Gewichtsbedingungen Vorrang
Der Ladestil basiert auf der zuletzt geladenen Positionierung. Die genaue
Priorität ist: !important > 🎜>

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

CSS3 neue Pseudoklasse

p:first-of-type wählt jedes Element aus, das zum ersten

seines übergeordneten Elements

gehört. Elemente.

p:last-of-type wählt jedes

-Element aus, das das letzte

-Element ist.

p:only-of-type wählt jedes

-Element aus, das das einzige

-Element ist. p:only-child wählt jedes

-Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist. p:nth-child(2) Wählt jedes

-Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist.

:after Fügt Inhalt vor dem Element hinzu und kann auch zum Löschen von Floats verwendet werden.
:before Inhalt nach dem Element hinzufügen
:enabled
:disabled Steuert den deaktivierten Status des Formularsteuerelements.
:aktiviert Das Optionsfeld oder Kontrollkästchen ist aktiviert

Ein schwebendes Element zentrieren

/ 以下是权重的规则：标签的权重为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{
}

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

Das absolut positionierte Div zentrieren

给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%;
 }

CSS3 hat neue Funktionen

Verschiedene CSS-Selektoren hinzugefügt (: not(.input): alle Knoten, deren Klasse nicht „input“ ist)

Abgerundete Ecken (Rahmenradius: 8px)

Mehrspaltiges Layout (mehrspaltiges Layout) Schatten und Reflexion (ShadowReflect) Texteffekte (Textschatten,)

Textdekoration)

Linearer Farbverlauf ( Farbverlauf)
Drehung ( transform)
Rotation, Skalierung, Positionierung, Neigung, Animation, mehrere Hintergründe hinzugefügt
transform:scale(0.85,0.90) translator(0px,-30px) skew(-9deg,0deg )Animation:

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

Erstellen Sie ein Dreieck mit reinem CSS

新增选择器 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;

Browserkompatibilität

PNG-24-Bit-Bilder werden als Hintergründe angezeigt Der iE6-Browser besteht darin, sie in PNG8 umzuwandeln.

Der Standardrand und die Abstände des Browsers sind unterschiedlich. Die Lösung besteht darin, ein globales *{margin:0;padding:0;} zur Vereinheitlichung hinzuzufügen
Unter IE können Sie die Methode zum Abrufen regulärer Attribute verwenden, um benutzerdefinierte Attribute abzurufen, oder Sie können getAttribute() verwenden, um benutzerdefinierte Attribute abzurufen. Unter Firefox können Sie getAttribute() nur verwenden, um benutzerdefinierte Attribute abzurufen. Lösung: Erhalten Sie benutzerdefinierte Attribute einheitlich über getAttribute()
Unter IE hat das gerade Objekt die Attribute x, y, aber nicht die Attribute pageX, pageY. Unter Firefox hat das Ereignisobjekt pageX, pageY-Attribut, aber keine x-, y-Attribute
4. BFC

Formatierungskontext auf Blockebene (interne Elemente wirken sich nicht auf externe Elemente aus)

Rendering-Regeln: Die vertikalen Ränder des BFC-Elements überlappen sich2. Der BFC-Bereich überschneidet sich nicht mit dem Floating-Element

4 BFC-Höhe, schwebende Elemente werden ebenfalls an der Berechnung beteiligt

BFC erstellen:

1.Überlauf
2.Floating ist nicht keiner
3.Position ist nicht statisch
4.Anzeige bezieht sich auf die Tabelle

display:inline-block Wann wird die Lücke angezeigt?


Leerzeichen entfernen, negative Randwerte verwenden, Schriftgröße:0, Buchstaben verwenden -spacing, word-spacing

Clear float

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

1 Sie können das Tag a verwenden, um display: inline-block; width: 100% zu unterstützen div, das schwebende Elemente enthält (divs müssen nicht mit height entworfen werden)

2.overflow: versteckt(BFC)

3. Sie können das Tag a verwenden, um display: block; beide

4.div=》display: Tabelle5.div =》display: Tabellenzelle6.div=》display: Flow-Root (Trigger BFC)

7.div:: after anstelle eines tag=》content:'' display:block; clear:both; (Es gibt ein Element ohne Höhe am unteren Rand)

8. clear:both;}
9. Lassen Sie das Div auch schweben (BFC)


Box-Modell


Box-Modell-Zusammensetzung: Inhalt, Polsterung, Rand, Rand
Durchsuchen in IE8 und niedriger. Wenn der DOCTYPE nicht deklariert ist, umfassen die Breite und Höhe des Inhalts Innenpolsterung und Ränder, was als seltsames Boxmodell (IE-Boxmodell) bezeichnet wird.

Standard-Boxmodell (W3C): Elementbreite = Breite + Polsterung + Rand + Rand

Seltsames (IE) Box-Modell: Elementbreite = Breite + RandDer Standardbrowser löst die Analyse und Berechnung von Breite und Höhe im „seltsamen Modus“ aus, indem er die Boxgröße festlegt: Border-Box-Attribut von CSS3

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

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

erben, um Elementmethoden auszublenden

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

rgba() und Deckkraft

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，从而使这个元素“消失”在页面中

## Browser JS-Kompatibilität##

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

Zwischen li und li befindet sich ein unsichtbarer Leerraum

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 ist stabiler und zuverlässiger als GET, wenn Benutzereingaben mit unbekannten Zeichen gesendet werden

Das obige ist der detaillierte Inhalt vonZusammenfassung der Interview-Wissenspunkte in HTML und CSS (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!