특별 추천1 CSS3의 상자 모델
box-sizing:border-box를 사용하여 일반 상자 모델을 IE 상자 모델로 변환할 수 있습니다. 때로는 상자의 너비와 높이를 설정했지만 테두리를 변경하여 상자의 크기를 변경하려는 경우 별도의 작업 없이 이를 IE 상자 모델로 변환할 수 있습니다. 매번 상자 내용물의 크기를 계산하십시오. box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。
在盒子模型中
box-sizeing:content-box表示标准盒模型（默认值）box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）除此之外，还有：Flex弹性伸缩盒模型
这两个属性都是让元素隐藏不可见
区别：
（1）在渲染树中
display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见（2）继承
display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘
（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden
概念：
精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position
box-sizing:content-box는 표준 상자 모델을 나타냅니다(기본값)
box-sizing:border-box IE 상자 모델을 나타냅니다(이상한 상자 모델이라고도 함)
2. display:none과 visible:hidden의 차이점
두 속성 모두 요소를 숨깁니다 🎜🎜🎜차이: 🎜 🎜🎜 (1) 렌더링 트리에서 🎜🎜🎜display:none은 요소를 렌더링 트리에서 완전히 사라지게 만들고 렌더링할 때 어떤 공간도 차지하지 않습니다. 🎜🎜visibility:hidden는 렌더링 트리에서 요소를 사라지게 하지 않습니다. 렌더링된 요소는 해당 공간을 계속 차지하지만 콘텐츠는 표시되지 않습니다🎜🎜🎜(2) Inherited🎜🎜🎜<code>display:none는 상속되지 않는 속성입니다. 해당 하위 노드는 상위 노드와 함께 렌더링 트리에서 사라지며 하위 노드의 속성을 수정하여 표시할 수 없습니다. 🎜🎜<code>visibility:hidden은 상속된 속성입니다. hidden을 상속하기 때문에 하위 노드는 사라집니다. 표시됩니다. 🎜🎜🎜(3) 일반 문서 흐름에서 요소의 display를 수정하면 일반적으로 문서가 재정렬되지만 visibility 속성을 수정하면 요소만 재정렬됩니다. to be reraw🎜 🎜(4) 스크린 리더를 사용하면 display:none으로 설정된 콘텐츠는 읽혀지지 않고, visibility:hidden으로 설정된 콘텐츠는 읽혀지지 않습니다. 읽을 수 있습니다. visibility:hidden🎜🎜3. CSS 스프라이트에 대해 이야기해 봅시다🎜🎜🎜개념: 🎜🎜🎜스프라이트를 사용할 때 여러 개의 작은 그림을 하나의 그림으로 연결하는 것입니다. 요소 크기는 표시해야 하는 배경 패턴을 조정합니다. 🎜🎜🎜장점: 🎜🎜🎜🎜 HTTP 요청 수를 줄여 페이지 로딩 속도를 어느 정도 향상시킵니다. 🎜🎜 각 이미지에 헤더 정보가 있으므로 이미지 크기를 줄입니다. 동일한 헤더 정보로 인해 이미지의 바이트 수가 줄어 스타일을 변경하는 것이 편리합니다. 하나 또는 몇 개의 이미지에서 이미지의 색상이나 스타일만 수정하면 되며 전체 웹페이지의 스타일을 변경할 수 있습니다. 변경되었습니다. 🎜🎜사진 이름을 지정하는 수고를 덜었습니다. 하나 또는 여러 장의 사진에 이름을 지정하세요.🎜🎜🎜🎜단점: 🎜🎜| 속성 값 | 개요 |
|---|---|
| absolute | 정적 위치 지정이 아닌 상위 요소를 기준으로 위치가 지정된 절대 위치 요소 생성 |
| relative | 상대 위치가 지정된 요소 생성 원래 위치 |
| fixed | 브라우저 창을 기준으로 위치가 지정된 절대 위치 요소 생성 |
| static | 기본값, 위치 지정 없음, 요소가 일반 문서 흐름에 나타남 |
| inherit | 규정 position 속성의 값은 상위 요소 |
(1) GIF
적용 대상: : 간단한 로고 색상, 아이콘, 와이어프레임, 단순 애니메이션
(2) JPG
적용 대상: 색상 풍부한 사진 및 그라데이션 이미지
(3) PNG
(4)WEBP
적용 대상: webp를 지원하는 앱 또는 웹 페이지
| 형식 | 장점 | 단점 | 적용 가능한 시나리오 |
|---|---|---|---|
| gif | 작은 파일, 애니메이션 지원, 투명도, 호환성 문제 없음 | 256색만 지원 | 단순한 색상의 로고, 아이콘, 애니메이션 사진 |
| jpg | 풍부한 색상, 작은 파일 | 손실 압축, 반복 저장하면 사진 품질이 현저히 저하됨 | 다채로운 사진/그라데이션 이미지 |
| png | 무손실 압축, 투명도 지원, 간단한 사진 크기 작음 | 애니메이션을 지원하지 않습니다. 화려한 그림은 크기가 큽니다. | 로고/아이콘/투명 그림 |
| webp | 작은 파일, 손실 및 무손실 압축 지원, 애니메이션, 투명도 지원 | 낮은 브라우저 호환성 | 앱 및 지원 webp 형식의 webview |
| selector | format |
|---|---|
| 태그 선택기 | p |
| class 선택기 | #myclassname |
| id 선택기 | #myid |
| 인접 형제 선택자 | h1 +p |
| 하위 선택자 | ul>li |
| 하위 선택자 | li a |
| 와일드카드 선택자 | * |
| 속성 선택자 | a[ref="eee"] |
| 의사 클래스 선택기 | li:last-child |
다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접한 형제 선택기를 사용할 수 있습니다. 예를 들어 h1 요소 바로 뒤에 나타나는 단락의 상단 여백을 늘리려는 경우입니다. , 다음과 같이 작성할 수 있습니다:
h1 + p {margin-top:50px;}선택기의 우선순위에 대해:
이어야 합니다.
속성 상속:
요소를 부동으로 설정한 후 디스플레이가 자동으로 차단됩니다.
플로팅으로 인해 발생하는 문제는 다음과 같습니다.
플로트를 지우는 방법은 다음과 같습니다.
height 속성을 정의합니다. height属性clear:both样式overflow:hidden或者overflow:autoCSS3中的盒模型有以下两种：标准盒模型、IE盒模型
标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。
在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。
在盒子模型中
box-sizeing:content-box表示标准盒模型（默认值）box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）除此之外，还有：Flex弹性伸缩盒模型
这两个属性都是让元素隐藏不可见
区别：
（1）在渲染树中
display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见（2）继承
display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘
（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden
clear:both<를 추가합니다. /code >스타일 <h3></h3> <code>overflow:hidden 또는 overflow:auto 추가
🎜🎜🎜🎜표준 박스 모델과 IE 박스 모델의 차이점은 표준 박스 모델의 너비와 높이는 너비를 참조하세요. 콘텐츠의 높이, IE 박스 모델의 너비와 높이는 콘텐츠, 패딩, 테두리의 합을 의미합니다. 🎜🎜🎜🎜CSS3에서는 box-sizing:border-box를 사용하여 일반 상자 모델을 IE 상자 모델로 변환할 수 있습니다. 때로는 상자의 너비와 높이를 설정했지만 테두리를 변경하여 상자의 크기를 변경하려는 경우 별도의 작업 없이 이를 IE 상자 모델로 변환할 수 있습니다. 매번 상자 내용물의 크기를 계산하십시오. 🎜🎜🎜🎜상자 모델에서🎜🎜🎜box-sizing:content-box는 표준 상자 모델을 나타냅니다(기본값) 🎜🎜box-sizing:border-box IE 상자 모델을 나타냅니다(이상한 상자 모델이라고도 함)🎜🎜🎜🎜🎜또한 다음이 있습니다: 🎜Flex 탄력적 상자 모델🎜🎜🎜
🎜🎜2. display:none과 visible:hidden의 차이점🎜🎜두 속성 모두 요소를 숨깁니다 🎜🎜🎜차이: 🎜 🎜🎜 (1) 렌더링 트리에서 🎜🎜🎜display:none은 요소를 렌더링 트리에서 완전히 사라지게 만들고 렌더링할 때 어떤 공간도 차지하지 않습니다. 🎜🎜visibility:hidden< /code>는 렌더링 트리에서 요소를 사라지게 하지 않습니다. 렌더링된 요소는 해당 공간을 계속 차지하지만 콘텐츠는 표시되지 않습니다🎜🎜🎜(2) Inherited🎜🎜🎜<code>display:none< /code >는 상속되지 않는 속성입니다. 해당 하위 노드는 상위 노드와 함께 렌더링 트리에서 사라지며 하위 노드의 속성을 수정하여 표시할 수 없습니다. 🎜🎜<code>visibility:hidden은 상속된 속성입니다. hidden을 상속하기 때문에 하위 노드는 사라집니다. 표시됩니다. 🎜🎜🎜(3) 일반 문서 흐름에서 요소의 display를 수정하면 일반적으로 문서가 재정렬되지만 visibility 속성을 수정하면 요소만 재정렬됩니다. to be reraw🎜 🎜(4) 스크린 리더를 사용하면 display:none으로 설정된 콘텐츠는 읽혀지지 않고, visibility:hidden으로 설정된 콘텐츠는 읽혀지지 않습니다. 읽을 수 있습니다. 가시성:숨김🎜🎜3 CSS 스프라이트에 대해 이야기해 보겠습니다🎜🎜🎜개념:🎜🎜精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。
优点：
缺点：
| 속성 값 | 개요 |
|---|---|
| absolute | 정적 위치 지정이 아닌 상위 요소를 기준으로 위치가 지정된 절대 위치 요소 생성 |
| relative | 상대 위치가 지정된 요소 생성 원래 위치 |
| fixed | 브라우저 창을 기준으로 위치가 지정된 절대 위치 요소 생성 |
| static | 기본값, 위치 지정 없음, 요소가 일반 문서 흐름에 나타남 |
| inherit | 규정 position 속성의 값은 상위 요소 |
(1) GIF
적용 대상: : 간단한 로고 색상, 아이콘, 와이어프레임, 단순 애니메이션
(2) JPG
적용 대상: 색상 풍부한 사진 및 그라데이션 이미지
(3) PNG
(4)WEBP
적용 대상: webp를 지원하는 앱 또는 웹 페이지
| 형식 | 장점 | 단점 | 적용 가능한 시나리오 |
|---|---|---|---|
| gif | 작은 파일, 애니메이션 지원, 투명도, 호환성 문제 없음 | 256색만 지원 | 단순한 색상의 로고, 아이콘, 애니메이션 사진 |
| jpg | 풍부한 색상, 작은 파일 | 손실 압축, 반복 저장하면 사진 품질이 현저히 저하됨 | 다채로운 사진/그라데이션 이미지 |
| png | 무손실 압축, 투명도 지원, 간단한 사진 크기 작음 | 애니메이션을 지원하지 않습니다. 화려한 그림은 크기가 큽니다. | 로고/아이콘/투명 그림 |
| webp | 작은 파일, 손실 및 무손실 압축 지원, 애니메이션, 투명도 지원 | 낮은 브라우저 호환성 | 앱 및 지원 webp 형식의 webview |
| selector | format |
|---|---|
| 태그 선택기 | p |
| class 선택기 | #myclassname |
| id 선택기 | #myid |
| 인접 형제 선택자 | h1 +p |
| 하위 선택자 | ul>li |
| 하위 선택자 | li a |
| 와일드카드 선택자 | * |
| 속성 선택자 | a[ref="eee"] |
| 의사 클래스 선택기 | li:last-child |
다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접한 형제 선택기를 사용할 수 있습니다. 예를 들어 h1 요소 바로 뒤에 나타나는 단락의 상단 여백을 늘리려는 경우입니다. , 다음과 같이 작성할 수 있습니다:
h1 + p {margin-top:50px;}선택기의 우선순위에 대해:
이어야 합니다.
속성 상속:
요소를 부동으로 설정한 후 디스플레이가 자동으로 차단됩니다.
플로팅으로 인해 발생하는 문제는 다음과 같습니다.
플로트를 지우는 방법은 다음과 같습니다.
height 속성을 정의합니다. height属性clear:both样式overflow:hidden或者overflow:auto
clear:both스타일
플로팅 요소가 포함된 상위 태그에CSS 비디오 튜토리얼🎜🎜🎜overflow:hidden또는overflow:auto추가권장 관련 튜토리얼:
위 내용은 7가지 중요한 CSS 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
