HTMLとCSSでの面接の知識ポイントのまとめ（例付き）

この記事の内容は、HTML と CSS に関するインタビューの知識をまとめたものです (例付き)。必要な方は参考にしていただければ幸いです。

CSS 優先アルゴリズム

優先近接原則、同じ重みの下では、最も近いスタイル定義が優先されます
読み込みスタイルは、最後に読み込まれた位置に基づいています。
優先度は次のとおりです: !payment > class > 重要度はインライン優先度よりも高くなります。
重要な宣言は css の重みで定義された優先度よりも高くなります。

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

CSS3 新しい疑似クラス

p:first-of-type は、親要素の最初の

要素に属する各要素を選択します。

要素。

p:last-of-type 親要素の最後の

要素である各

要素を選択します。

p:only-of-type 親要素の唯一の

要素をそれぞれ選択します。

p:only-child 親要素の唯一の子要素である各

要素を選択します。
p:nth-child(2) 親要素の 2 番目の子である各

要素を選択します。

:after 要素の前にコンテンツを追加します。フロートをクリアするためにも使用できます。
: 要素の後にコンテンツを追加する前

: 有効

: コントロール フォームのコントロール状態を無効にします。
:checked ラジオ ボタンまたはチェックボックスがオンになっています


フローティング要素を中央に配置します

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

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

絶対位置の div を中央に配置します

给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 には新しい機能があります

さまざまな CSS セレクターを追加しました (: not(.input): クラスが "input" ではないすべてのノード)角を丸くしました (border-radius: 8px)

複数列レイアウト (複数列レイアウト)

影と反射 (ShadowReflect)
テキスト効果 (text-shadow,)
Text-decoration)
線形グラデーション ( gradient)
Rotation (変換)
回転、スケーリング、位置決め、傾斜、アニメーション、複数の背景を追加しました
transform:scale(0.85,0.90) Translation(0px,-30px) skew(-9deg,0deg )Animation:

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

純粋な 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;

#ブラウザ互換性

#png24 ビット画像が背景として表示されますiE6 ブラウザの場合、解決策はこれらを PNG8 にすることです。

ブラウザのデフォルトのマージンとパディングは異なります。解決策は、グローバル *{margin:0;padding:0;} を追加して統合することです。
IE では、通常のプロパティを取得するメソッドを使用してカスタム プロパティを取得できます。 getAttribute() を使用してカスタム属性を取得できますが、Firefox では getAttribute() を使用してカスタム属性を取得することしかできません。解決策: getAttribute()
IE では、偶数オブジェクトには x、y 属性があり、Firefox では、イベント オブジェクトに pageX、pageY 属性がありません。 pageY 属性はあるが、x、y 属性はありません
##BFC

4. ブロックレベルの書式設定コンテキスト (内部要素は外部要素に影響しません)

レンダリング ルール:

1. bfc 要素の垂直マージンは 2 と重なります。bfc 領域は、独立したコンテナー 4 と重なりません。 height 、浮動要素も計算に参加します

Create bfc:

1.overflow

2.Float is not none
3.position is not static
4.display is table

display:inline-block ギャップはいつ表示されますか?

スペースを削除し、負のマージン値を使用し、font-size:0、letter- を使用してください。 spacing, word-spacing

Clear float

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

1 を使用して、display: inline-block: 100% と prop up を設定できます。フローティング要素を含む div (div を高さで設計する必要はありません)

2.overflow: hidden(BFC)

3。 a タグを使用して、display: block; width: 100% を設定できます。 、クリア：両方

4.div=》表示：テーブル

5.div =》表示：テーブルセル6.div=》表示：フロールート（トリガーBFC）##7。 tag=》content:'' display:block; clear:both; の代わりに、 .clearfix:after{content:'' を使用します。 :block; clear:both;}9. div もフロートにします (BFC)

Box モデル


Box モデルは、コンテンツ、パディング、 border, margin
IE8 以下で参照 DOCTYPE が宣言されていない場合、コンテンツの幅と高さには内側のパディングと境界線が含まれます。これは、ストレンジ ボックス モデル (IE ボックス モデル) と呼ばれます
標準 (W3C) ボックスモデル: 要素幅 = 幅パディング境界マージン
奇妙な (IE) ボックス モデル: 要素幅 = 幅マージン
標準ブラウザは、box-sizing: border を設定することによって、「奇妙なモード」の解析と幅と高さの計算をトリガーします。 css3の-boxプロパティ

.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 属性的值

要素を非表示にするメソッド

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

rgba()とopacity

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

## ブラウザ JS 互換性

##

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

li と 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 は GET よりも安定しており、信頼性が高くなります

以上がHTMLとCSSでの面接の知識ポイントのまとめ（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。