HTML 및 CSS의 인터뷰 지식 포인트 요약(예제 포함)-HTML 튜토리얼-php.cn

이 기사는 HTML 및 CSS에 대한 인터뷰 지식 포인트를 요약한 것입니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 우선순위 알고리즘

우선순위 근접 원칙, 동일한 가중치에서 가장 가까운 스타일 정의가 우선합니다.
로딩 스타일은 마지막으로 로드된 위치를 따릅니다.
우선순위는 !important > id > ; important 태그는 inline
important 선언보다 우선순위가 더 높습니다. css

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

로그인 후 복사

CSS3 new pseudo-class

p:first-of-type 선택에 의해 정의됩니다. it 상위 요소의 첫 번째

요소입니다. p:last-of-type은 상위 요소의 마지막

요소를 모두 선택합니다.

p:only-of-type은 상위 요소의 유일한

요소를 선택합니다.

p:only-child 상위 요소의 유일한 하위 요소인 각

요소를 선택합니다.
p:nth-child(2) 상위 요소의 두 번째 하위인 각

요소를 선택합니다.

:after 요소 앞에 콘텐츠를 추가하고 부동 소수점을 지우는 데에도 사용할 수 있습니다.
:before 요소 뒤에 콘텐츠 추가

:enabled >

: 선택됨(.input): 클래스가 "입력"이 아닌 모든 노드)
둥근 모서리(테두리 반경:8px)
다열 레이아웃(다중 열 레이아웃)
그림자 및 반사(ShadowReflect)
텍스트 그림자 ,)

텍스트 장식

선형 그래디언트(그라디언트)회전(변형) 회전, 크기 조정, 위치 지정, 기울기, 애니메이션, 다중 배경 추가

transform:scale(0.85,0.90)translate(0px,-30px)skew(- 9deg,0deg)애니메이션:

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

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

로그인 후 복사

순수한 CSS로 삼각형 만들기

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

로그인 후 복사

브라우저 호환성

png 24비트 그림은 iE6 브라우저에 배경이 있으며, 해결책은 PNG8로 변환하는 것입니다.

브라우저의 기본 여백과 패딩이 다릅니다. 해결책은 전역 *{margin:0;padding:0;}을 추가하여 통합하는 것입니다.

IE에서는 일반 속성을 가져오는 방법을 사용하여 사용자 정의 속성을 가져오거나 getAttribute()를 사용하여 가져올 수 있습니다. 사용자 정의 속성;Firefox에서는 사용자 정의 속성을 얻기 위해 getAttribute()만 사용할 수 있습니다. 해결책: getAttribute()를 통해 균일하게 사용자 정의 속성을 가져옵니다.

IE에서 짝수 객체에는 x, y 속성이 있지만 pageX, pageY 속성은 없습니다. Firefox에서 이벤트 객체에는 pageX, pageY 속성이 있지만 x, y는 없습니다. 속성

BFC
블록 수준 서식 지정 컨텍스트(내부 요소는 외부 요소에 영향을 주지 않음)
1 bfc 요소의 수직 여백이 겹칩니다.
2.bfc 영역은 부동 소수점 요소와 겹치지 않습니다. overlap
3. 독립 컨테이너
bfc 만들기:
1.overflow

3.position은 정적이 아닙니다

4.display는 테이블 관련

display:inline-block 간격은 언제 표시되나요?

공백 제거, 음수 여백 값 사용, 글꼴 크기:0, 문자 간격, 단어 간격 사용

수레 위치 지우기

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

로그인 후 복사

1. a 태그를 사용하여 부동 요소가 포함된 div를 지원하도록 display: inline-block; width: 100%를 설정할 수 있습니다(div는 높이로 디자인할 필요가 없음)
2.overflow: Hidden(BFC)
3. a 태그를 사용하여 디스플레이를 설정할 수 있습니다: block; width : 100%,clear: Both
4.div=》display: table
5.div=》display: table-cell

6.div=》display: flow-root (BFC 트리거)

7.div::after 대신 태그 =》content:'' display:block;clear:both;(하단에 높이가 없는 요소가 있습니다)8을 사용합니다. after{content:'' display:block;clear:both;}9 .div도 부동화시키세요(BFC)

Box model

상자 모델은 content, padding, border, margin

IE8로 구성됩니다. 아래 브라우저에서 DOCTYPE을 선언하지 않으면 콘텐츠 너비와 높이에 내부 패딩과 테두리가 포함됩니다. 이를 이상한 상자 모델(IE 상자 모델)

표준(W3C) 상자 모델: 요소 너비 = 너비 + 패딩 + 테두리 + margin
이상한(IE) 상자 모델: 요소 너비 = 너비 + 여백
표준 브라우저는 css3

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

로그인 후 복사

Inherit

의 box-sizing: border-box 속성을 설정하여 너비와 높이를 구문 분석하고 계산하는 "이상한 모드"를 트리거합니다.

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

로그인 후 복사

요소 숨기기 방법

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

로그인 후 복사

rgba() 및 불투명도

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

로그인 후 복사

## 브라우저 JS 호환성##

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

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!