클래식 CSS 인터뷰 질문
- coldplay.xixi앞으로
- 2020-08-03 15:18:424113검색
1. 표준 박스 모델과 하위 버전 IE 박스 모델(이상한 모드)의 차이점은 무엇인가요?
표준 상자 모델: 콘텐츠 너비(콘텐츠)+테두리+패딩+여백;
IE 낮은 버전 상자 모델: 콘텐츠 너비(콘텐츠+테두리+패딩)+마진;
가장 큰 차이점은 상자 모델입니다. of 콘텐츠 부분의 높이와 너비입니다
border-box: IE 기존 상자 모델, 요소의 높이/너비 속성 설정은 테두리+패딩+콘텐츠 부분의 높이와 너비를 나타냅니다
- 특별 추천
- :
2020 올해의 CSS 면접 질문 요약(최신)
2. CSS3 속성을 사용하여 삼각형 작성
<style> p{ width: 0; height: 0; border-top: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid red; border-left: 40px solid transparent; } </style> </head> <body> <!-- 想要改变三角形的方向只需要改变border属性值（即tblr） --> <p></p> </body>3. HTML5를 이해하는 방법은 무엇입니까?
(1) 프론트엔드 분야에서 H5는 단순한 기술적 포인트가 아닌 기술 집합(기술 스택)이므로 HTML 사양으로 이해할 수 없습니다. (2), html, css 및 js의 세 가지 측면에서 정리할 수 있습니다. > ~ ~ ~ > WeChat 공개 계정 개발
H5 개발은 일반적으로 포괄적인 H5 기술 스택(HTML 개선, CSS 개선, JavaScript 개선)을 사용하여 웹 애플리케이션 개발
4. CSS3의 새로운 기능은 무엇입니까?(1), RGBA 및 투명도
(2), background-image, background-origin, background-size, background-repeat
(3), word-wrap(분할 수 없는 긴 단어 감싸기)word-wrap: break-word;
(4), text-shadow: text-shadow: 5px 5px 5px #ccc; (
수평 그림자, 수직 그림자, 흐림 거리, 그림자 색상)
(5), 글꼴 -얼굴: 사용자 정의 자신만의 글꼴
(6),
둥근 모서리(테두리 반경): border-radius 속성은 둥근 모서리를 만드는 데 사용됩니다. (7), box-shadow: 5px 5px 5px #ccc ; ( 8),미디어 쿼리: 두 개의 CSS 세트를 정의하면 브라우저 크기가 변경될 때 서로 다른 속성이 사용됩니다
5. 모바일 프로젝트에서 box-sizing: border -box를 사용하는 이유는 무엇입니까?
box-sizing:border-box; 너비 오버플로를 방지하고 가로 스크롤 막대를 유발할 수 있습니다(모바일 프로젝트는 모두 고정되지 않은 너비입니다)
6. ?
display: none은 해당 요소를 표시하지 않으며 더 이상 문서 레이아웃에서 공간을 할당하지 않습니다(리플로우 + 다시 그리기).
visibility: hide은 해당 요소를 숨깁니다. 문서 원래 공간은 여전히 레이아웃에 유지됩니다(다시 그리기)
다시 그리기: 렌더 트리의 일부 요소가 속성을 업데이트해야 할 때 이러한 속성은 요소의 모양과 스타일에만 영향을 미치고 예를 들어 배경색인 경우 다시 그리기라고 합니다.
리플로우:
f35d6e602fd7d0f0edfa6f7d103c1b57, 표시되는 DOM 요소 추가 또는 삭제와 같이 페이지의 레이아웃 및 기하학적 속성이 변경될 때 리플로우가 필요합니다. 2cc198a1d5eb0d3eb508d858c9f5cbdb、元素位置的改变 5bdf4c78156c7953567bb5a0aef2fc53、元素尺寸的改变（边框、尺寸、填充、宽度、高度） 23889872c2e8594e0f446a471a78ec4c、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变） 43ad812d3a971134e40facaca816c822、页面渲染初始化 efbfa0de8737dc86eae413541a49df20、浏览器窗口尺寸的改变-resize事件发生时 回流必将引起重绘，重绘不一定会引起回流 7、对BFC（块级格式化上下文block formatting context）的理解？ 简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？ f35d6e602fd7d0f0edfa6f7d103c1b57居中p 2cc198a1d5eb0d3eb508d858c9f5cbdb居中一个浮动的元素上下左右居中 5bdf4c78156c7953567bb5a0aef2fc53绝对定位水平居中 9、position的值？ static（默认）：按照正常文档流进行排列 relative（相对定位）不脱离文档流，参考自身的top、right、bottom、left进行定位 absolute（绝对定位）参考其最近的一个非static的父级元素通过top、right、bottom、left进行定位 fixed（固定定位）所固定的参照对象是可视窗口的位置 10、常见的兼容性问题 f35d6e602fd7d0f0edfa6f7d103c1b57不同浏览器标签默认的padding和margin不一样，*{padding:0;margin:0} 2cc198a1d5eb0d3eb508d858c9f5cbdbchorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none; 11、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？ 由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。 浮动带来的问题： f35d6e602fd7d0f0edfa6f7d103c1b57父元素的高度无法被撑开 2cc198a1d5eb0d3eb508d858c9f5cbdb与浮动元素同级的非浮动元素（内联元素）会跟随其后 5bdf4c78156c7953567bb5a0aef2fc53若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。 清除浮动的方式： f35d6e602fd7d0f0edfa6f7d103c1b57 父级p定义高度 2cc198a1d5eb0d3eb508d858c9f5cbdb 最后一个浮动元素后加空p标签，并添加样式clear：both 5bdf4c78156c7953567bb5a0aef2fc53 包含浮动元素的父标签添加样式overflow为hidden和auto 23889872c2e8594e0f446a471a78ec4c 父级定义zoom 相关教程推荐：CSS视频教程<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body><style>
p{
width: 200px;
height: 200px;
background-color: pink;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<p></p>
</body><style>
p{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<p></p>
</body>
위 내용은 클래식 CSS 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!