집 > 기사 > 웹 프론트엔드 > HTML과 CSS의 중요 지식과 어려운 지식 요약

HTML과 CSS의 중요 지식과 어려운 지식 요약

小云云원래의: 2018-03-02 10:33:171901검색

이 글은 주로 HTML과 CSS에 대한 중요하고 어려운 지식 포인트를 요약하여 공유합니다.

가변 너비와 높이를 사용하여 수직 및 수평으로 중앙에 배치하는 방법은 무엇입니까?
Flex를 사용하세요

부모 상자에 설정하세요. display: justify-content: center;align-items: center;

CSS3 변환 사용

상위 상자 설정: 위치:상대
p 설정: 변환: 변환(-50%,-50%);위치: 절대;상단: 50%;왼쪽: 50%;

디스플레이 사용:테이블- 셀 방법

상위 상자 설정: display:table-cell; text-align:center;vertical-align:middle;
p 설정: display:inline-block;vertical-align:middle;

2.여러 속성 배치
위치의 네 가지 공통 속성 값은 상대, 절대, 고정 및 정적입니다. 일반적으로 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성과 함께 사용됩니다.

정적: 기본 위치. 일반적인 상황에서는 이를 구체적으로 선언할 필요가 없지만 때로는 상속이 발생할 때 요소가 상속한 속성이 자체적으로 영향을 미치는 것을 보고 싶지 않으므로 Position:static을 사용하여 상속을 취소할 수 있습니다. , 요소의 위치 지정을 복원합니다. static으로 설정된 요소는 항상 페이지 흐름에 의해 지정된 위치에 있습니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). 일반적으로 일반적으로 사용되지 않습니다.
relative: 상대 위치 지정. 상대 위치 지정은 요소의 기본 위치를 기준으로 합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽의 오프셋 값은 다른 요소에 어떤 일이 발생하는지에 관계없이 모두 원래 위치를 기준으로 오프셋됩니다. 상대적으로 이동된 요소는 여전히 원래 위치에서 공간을 차지합니다.
절대: 절대 위치 지정. 절대값으로 설정된 요소의 경우 해당 상위 컨테이너에 위치 속성이 설정되어 있고 위치 속성 값이 절대 또는 상대이면 상위 컨테이너에 따라 오프셋됩니다. 상위 컨테이너가 위치 속성을 설정하지 않은 경우 오프셋은 본문을 기준으로 합니다. 절대 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.
고정: 위치가 고정되었습니다. 위치가 고정으로 설정된 요소는 브라우저 창을 기준으로 지정된 좌표에 배치될 수 있습니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. 항상 신체를 기반으로합니다. 고정 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.

플로트 부동 및 지우기
3.1 부동 관련 지식
float 속성 값:

left: 요소가 왼쪽으로 부동합니다.
right: 요소가 오른쪽에 떠 있습니다.
없음: 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.

플로팅의 특징:

플로팅 요소는 일반적인 문서 흐름과 분리되지만, 플로팅 요소는 자신에게 영향을 미칠 뿐만 아니라 주변 요소의 정렬 및 주변 요소에도 영향을 미칩니다.
요소가 인라인 요소이든 블록 수준 요소이든 상관없이 부동 요소로 설정되면 부동 요소는 블록 수준 상자를 생성하고 너비와 높이를 설정할 수 있으므로 부동 요소가 자주 사용됩니다. 가로로 정렬된 메뉴를 생성할 수 있으며, 크기를 설정하여 가로로 정렬할 수 있습니다.

플로팅 요소의 표시는 상황에 따라 다른 규칙을 갖습니다.

플로팅 요소가 플로팅할 때 해당 여백은 포함 블록의 패딩을 초과하지 않습니다. 추신: 요소를 초과하려면 여백 속성을 설정할 수 있습니다.
두 요소 중 하나가 왼쪽에 부동하고 다른 요소가 오른쪽에 부동하는 경우 왼쪽 부동 요소의 marginRight는 marginLeft의 marginLeft에 인접하지 않습니다. 오른쪽 부동 요소.
플로팅 요소가 여러 개인 경우 플로팅 요소가 겹치지 않고 순서대로 배열됩니다.
여러 개의 부동 요소가 있는 경우 다음 요소의 높이는 이전 요소를 초과하지 않으며 포함 블록을 초과하지 않습니다.
비부동 요소와 부동 요소가 동시에 있고 비부동 요소가 앞에 있는 경우 부동 요소는 비부동 요소보다 높지 않습니다.
부동 요소는 위쪽에 정렬됩니다.

겹침 문제

인라인 요소가 플로팅 요소와 겹치면 테두리, 배경 및 내용이 플로팅 요소 위에 표시됩니다.
블록 수준 요소가 플로팅 요소와 겹치면 테두리가 표시됩니다. 배경은 플로팅 요소 아래에 표시되고 콘텐츠는 플로팅 요소 위에 표시됩니다.

요소의 지우기 속성
clear 속성: 현재 요소의 왼쪽과 오른쪽에 플로팅 요소가 없는지 확인하세요. Clear는 요소 자체의 레이아웃에만 영향을 미칩니다.
값: 왼쪽, 오른쪽, 둘 다
3.2 부모 요소 높이 축소 문제
부모 요소 축소의 부동 소수점 및 높이를 지워야 하는 이유는 무엇입니까?
부모 요소 높이 축소 문제 해결: 블록 수준 요소가 그렇지 않은 경우 높이를 설정하면 해당 높이는 의 하위 요소에서 지원됩니다. 하위 요소에 float를 사용한 후 하위 요소는 표준 문서 흐름에서 벗어나게 됩니다. 즉, 상위 요소에 높이를 확장할 콘텐츠가 없으므로 상위 요소의 높이가 무시됩니다. 이른바 높이 붕괴다.
3.3 부동 소수점 지우기 방법
방법 1: 부모 p의 높이 정의
원리: 부모 p의 고정 높이(높이)를 정의하면 부모 p가 높이를 얻을 수 없는 문제를 해결할 수 있습니다.
장점: 코드가 간결하다.
단점: 높이가 고정되어 있어 내용이 고정된 모듈에 적합하다. (권장되지 않음)
방법 2:

과 같은 빈 요소 사용

(.clear{clear:both})
原理：添加一对空的 p 标签，利用 css 的 clear:both 属性清除浮动，让父级 p 能够获取高度。
优点：浏览器支持好
缺点：多出了很多空的 p 标签，如果页面中浮动模块多的话，就会出现很多的空置 p 了，这样感觉视乎不是太令人满意。（不推荐使用）
方法三：让父级 p 也一并浮起来
这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。不推荐使用
方法四：父级 p 定义 display:table
原理：将 p 属性强制变成表格
优点：不解
缺点：会产生新的未知问题。（不推荐使用）
方法五：父元素设置 overflow：hidden、auto；
原理：这个方法的关键在于触发了 BFC。在 IE6 中还需要触发 hasLayout（zoom：1）
优点：代码简介，不存在结构和语义化问题
缺点：无法显示需要溢出的元素（亦不太推荐使用）
方法六：父级 p 定义伪类: after 和 zoom

.clearfix:after{ 
content:’.’; 
display:block; 
height:0; 
clear:both; 
visibility: hidden; 
}

.clearfix {zoom:1;}
原理：IE8 以上和非 IE 浏览器才支持: after，原理和方法 2 有点类似，zoom(IE 转有属性) 可解决 ie6,ie7 浮动问题
优点：结构和语义化完全正确, 代码量也适中，可重复利用率（建议定义公共类）
缺点：代码不是非常简洁（极力推荐使用）
经益求精写法

.clearfix:after { 
content:”\200B”; 
display:block; 
height:0; 
clear:both; 
} 
.clearfix {*zoom:1;} 照顾 IE6，IE7 就可以了

4.BFC 相关知识
定义：BFC(Block formatting context) 直译为 “块级格式化上下文”。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
BFC 布局规则
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC 这个元素的垂直方向的边距会发生重叠，垂直方向的距离由 margin 决定，取最大值
BFC 的区域不会与浮动盒子重叠（清除浮动原理）。
计算 BFC 的高度时，浮动元素也参与计算。

哪些元素会生成 BFC

根元素
float 属性不为 none
position 为 absolute 或 fixed
display 为 inline-block， table-cell， table-caption， flex， inline-flex
overflow 不为 visible

5.box-sizing 是什么
设置 CSS 盒模型为标准模型或 IE 模型。标准模型的宽度只包括 content，二 IE 模型包括 border 和 padding
box-sizing 属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border 和 padding 不计算入 width 之内
padding-box，padding 计算入宽度内
border-box，border 和 padding 计算入宽度之内

6.px，em，rem 的区别
px 像素 (Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位 (root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
7.CSS 引入的方式有哪些? link 和 @import 的区别是?
有四种：内联 (元素上的 style 属性)、内嵌 (style 标签)、外链 (link)、导入 (@import)
link 和 @import 的区别：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。

超小屏幕 (移动设备) 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

반응형 개발은 더 번거롭기 때문에 일반적으로 부트스트랩과 같은 타사 반응형 프레임워크를 사용하여 작업의 일부를 완료합니다. 물론 반응형 개발을 직접 작성할 수도 있습니다.
차이

-
플로잉 레이아웃
반응형 개발

개발 방법
모바일 웹 개발 + PC 개발
반응형 개발

응용 시나리오
일반적으로 이미 PC 웹사이트가 있는 경우, 웹사이트를 개발할 때 별도로 개발하면 됩니다. 모바일 버전 모바일 단말기
새롭게 구축된 일부 웹사이트의 경우 이제 모바일 단말기에 적응해야 하므로 일련의 페이지가 다양한 단말기와 호환됩니다

개발
강력한 정렬 및 높은 개발 효율성
다양한 단말기와 호환 및 낮은 효율성

적응
모바일 기기에만 적용되어 패드에서의 경험이 상대적으로 좋지 않습니다
다양한 단말기에 적용 가능

효율성
코드가 간단하고 로드가 빠릅니다
코드가 비교적 복잡하고 로드가 느립니다

점진적인 향상과 우아한 저하
핵심 차이점은 중점을 두는 콘텐츠, 그리고 이 차이로 인해 발생하는 작업 흐름의 차이

우아한 다운그레이드는 처음부터 완전한 기능을 구축한 후 하위 버전의 브라우저와 호환되도록 만드는 것입니다. . .
점진적 개선을 통해 낮은 버전의 브라우저용 페이지를 구축하여 가장 기본적인 기능을 보장한 다음 효과, 상호 작용을 개선하고 고급 브라우저용 추가 기능을 추가하여 더 나은 사용자 경험을 제공합니다.

차이:

우아한 저하는 복잡한 현상 유지에서 시작하여 사용자 경험의 공급을 줄이려고 합니다.
점진적 개선은 매우 기본적이고 기능적인 버전에서 시작하여 미래 환경의 요구에 맞게 지속적으로 확장합니다.
다운그레이드( 기능적 감쇠)는 뒤를 돌아보는 것을 의미하며, 점진적인 향상은 미래를 바라보는 동시에 그 기초가 안전 지대에 있는지 확인하는 것을 의미합니다

10. CSS 숨겨진 요소의 여러 가지 방법과 차이점
display:none

에서 요소가 완전히 사라집니다. 페이지에 원래 요소가 차지했던 공간이 다른 요소로 채워지게 됩니다. 즉, 브라우저가 리플로우되고 다시 그려지게 됩니다.
클릭 이벤트는 실행되지 않습니다.

visibility:hidden

display:none의 차이점은 요소가 페이지에서 사라진 후에도 해당 요소가 차지하는 공간은 그대로 유지되므로 브라우저가 해당 요소 없이 다시 그리게 된다는 것입니다. 다시 그리기.
클릭 이벤트가 실행될 수 없습니다
요소가 숨겨진 후 페이지 레이아웃이 변경되지 않을 것으로 예상되는 시나리오에 적합합니다

opacity:0

요소의 투명도를 0으로 설정한 후 우리의 눈에는 사용자의 경우 요소도 숨겨져 있으며 이는 요소를 숨기는 방법으로 간주됩니다.
와 visible:hidden의 공통점 중 하나는 요소가 숨겨진 후에도 여전히 공간을 차지한다는 것입니다. 하지만 투명도를 0으로 설정한 후에도 요소는 보이지 않고 페이지에 여전히 존재한다는 것을 우리 모두 알고 있습니다.
클릭 이벤트 발생 가능

높이, 너비 등 상자 모델 속성을 0으로 설정

간단히 요소의 여백, 테두리, 패딩, 높이 및 너비와 요소 상자 모델에 영향을 미치는 기타 속성을 0으로 설정 . 요소에 하위 요소가 있는 경우 해당 하위 요소를 숨기기 위해 Overflow:hidden도 설정해야 합니다.
요소의 테두리, 패딩 및 기타 속성이 0이 아닌 것으로 설정되면 해당 요소가 페이지에 계속 표시될 수 있으며 해당 요소의 클릭 이벤트를 트리거하는 데 문제가 없음이 분명합니다. 모든 속성이 0으로 설정되면 요소가 사라지는 것이 분명합니다. 즉, 클릭 이벤트가 트리거될 수 없습니다.
이 방법은 실용적이지 않으며 몇 가지 문제가 있을 수 있습니다. 그러나 요소의 Overflow:hidden을 설정한 다음 타이머, margin-bottom, border-top을 통해 요소의 높이와 margin-top을 지속적으로 설정하는 jquery의 SlideUp 애니메이션과 같이 우리가 일반적으로 사용하는 일부 페이지 효과는 이런 방식으로 완료될 수 있습니다. , border-bottom, padding-top, padding-bottom이 0이므로 슬라이드업 효과를 얻습니다.

다른 창의적인 방법

요소의 위치와 왼쪽, 위쪽, 아래쪽, 오른쪽 등을 설정하여 요소를 화면 밖으로 이동합니다.
요소의 위치와 Z-인덱스를 설정하고, Z-인덱스를 설정합니다. 가능한 한 작은 음수로

src와 href의 차이점을 간략하게 설명하세요
href는 네트워크 리소스의 위치를 가리키며, 현재 요소(앵커) 또는 현재 문서(링크)에 대한 링크를 설정하고, 하이퍼링크에 사용됩니다.
src는 외부 리소스의 위치를 나타내며, src 리소스를 요청하면 가리키는 콘텐츠가 문서의 현재 태그 위치에 삽입되고, 가리키는 리소스가 다운로드되어 문서에 적용됩니다. js 스크립트, img 이미지 및 프레임 등의 요소로. 브라우저가 이 요소를 구문 분석하면 리소스가 로드, 컴파일 및 실행될 때까지 다른 리소스의 다운로드 및 처리가 일시 중지됩니다. 이는 지정된 리소스를 리소스에 삽입하는 것과 유사합니다. 현재 태그. 이것이 js 스크립트가 헤드 대신 하단에 배치되는 이유이기도 합니다.
산업 요소는 무엇인가요? 블록 수준 요소란 무엇입니까? 공허한 요소는 무엇입니까?
이런 질문은 인터뷰에서 가끔 나오는데 좀 헷갈리네요~~~ 평소에는 별로 신경쓰지 않는 편이에요. . . .
인라인 요소: a, b, 범위, img, 입력, 강한, 선택, 레이블, em, 버튼, 텍스트 영역
블록 수준 요소: p, ul, li, dl, dt, dd, p, h1-h6, blockquote
빈 요소: 내용이 없는 HTML 요소(예: br, 메타, hr, 링크, 입력, img
)

폭과 높이가 가변적인 p를 수직 및 수평으로 가운데 배치하는 방법은 무엇입니까?
Flex를 사용하세요

부모 상자에 설정하세요. display: justify-content: center;align-items: center;

CSS3 변환 사용

상위 상자 설정: 위치:상대
p 설정: 변환: 변환(-50%, -50%);위치: 절대;위: 50%;왼쪽: 50%;

디스플레이 사용:테이블 - 셀 방법

상위 상자 설정: display:table-cell; text-align:center;vertical-align:middle;
p 설정: display:inline-block;vertical-align:middle;

2.여러 속성 배치
위치의 네 가지 공통 속성 값: 상대, 절대, 고정, 정적. 일반적으로 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성과 함께 사용됩니다.

정적: 기본 위치. 일반적인 상황에서는 이를 구체적으로 선언할 필요가 없지만 때로는 상속이 발생할 때 요소가 상속한 속성이 자체적으로 영향을 미치는 것을 보고 싶지 않으므로 Position:static을 사용하여 상속을 취소할 수 있습니다. 요소의 위치를 기본값으로 복원합니다. static으로 설정된 요소는 항상 페이지 흐름에 의해 지정된 위치에 있습니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). 일반적으로 일반적으로 사용되지 않습니다.
relative: 상대 위치 지정. 상대 위치 지정은 요소의 기본 위치를 기준으로 합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽의 오프셋 값은 다른 요소에 어떤 일이 발생하는지에 관계없이 모두 원래 위치를 기준으로 오프셋됩니다. 상대적으로 이동된 요소는 여전히 원래 위치에서 공간을 차지합니다.
절대: 절대 위치 지정. 절대값으로 설정된 요소의 경우 해당 상위 컨테이너에 위치 속성이 설정되어 있고 위치 속성 값이 절대 또는 상대이면 상위 컨테이너에 따라 오프셋됩니다. 상위 컨테이너가 위치 속성을 설정하지 않은 경우 오프셋은 본문을 기반으로 합니다. 절대 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.
고정: 위치가 고정되었습니다. 위치가 고정으로 설정된 요소는 브라우저 창을 기준으로 지정된 좌표에 배치될 수 있습니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. 항상 신체를 기반으로합니다. 고정 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.

플로트 부동 및 지우기
3.1 부동 관련 지식
float 속성 값:

플로팅의 특징:

플로팅 요소는 일반 문서 흐름과 분리되지만 플로팅 요소는 자신에게 영향을 미칠 뿐만 아니라 주변 요소의 정렬 및 주변 요소에도 영향을 미칩니다.
요소가 인라인 요소이든 블록 수준 요소이든 상관없이 부동 요소로 설정되면 부동 요소는 블록 수준 상자를 생성하고 너비와 높이를 설정할 수 있으므로 부동 요소가 자주 사용됩니다. 가로로 정렬된 메뉴를 생성할 수 있으며, 크기를 설정하여 가로로 정렬할 수 있습니다.

플로팅 요소의 표시는 상황에 따라 다른 규칙을 갖습니다.

겹침 문제

인라인 요소가 플로팅 요소와 겹치면 테두리, 배경 및 내용이 플로팅 요소 위에 표시됩니다.
블록 수준 요소가 플로팅 요소와 겹치면 테두리와 배경은 플로팅 요소 아래에 표시되고 콘텐츠는 플로팅 요소 위에 표시됩니다.

요소의 명확한 속성
clear 속성: 현재 요소의 왼쪽과 오른쪽에 플로팅 요소가 없는지 확인하세요. Clear는 요소 자체의 레이아웃에만 영향을 미칩니다.
값: 왼쪽, 오른쪽, 둘 다
3.2 부모 요소 높이 축소 문제
부모 요소 축소의 부동 소수점 및 높이를 지워야 하는 이유는 무엇입니까?
부모 요소 높이 축소 문제 해결: 블록 수준 요소가 그렇지 않은 경우 높이를 설정하면 해당 높이는 의 하위 요소에서 지원됩니다. 하위 요소에 float를 사용한 후 하위 요소는 표준 문서 흐름에서 벗어나게 됩니다. 즉, 상위 요소에 높이를 확장할 콘텐츠가 없으므로 상위 요소의 높이가 무시됩니다. 이른바 높이 붕괴다.
3.3 부동 소수점 지우기 방법
방법 1: 부모 p의 높이 정의
원리: 부모 p의 고정 높이(높이)를 정의하면 부모 p가 높이를 얻을 수 없는 문제를 해결할 수 있습니다.
장점: 코드가 간결하다.
단점: 높이가 고정되어 있어 내용이 고정된 모듈에 적합하다. (권장하지 않음)
방법 2:

와 같은 빈 요소를 사용합니다.

(.clear{clear:both})
원리: 빈 p 태그 쌍을 추가하고 css의clear:both 속성을 사용하여 부동 소수점을 지워 상위 p가 높이를 얻을 수 있도록 합니다.
장점: 좋은 브라우저 지원
단점: 빈 p 태그가 많습니다. 페이지에 떠 있는 모듈이 많으면 빈 p 태그가 많아 그다지 만족스럽지 않을 것입니다. (권장하지 않음)
방법 3: 부모 p도 부동하게 합니다.
이렇게 하면 초기에 현재 부동 문제를 해결할 수 있습니다. 하지만 이는 또한 부모를 부동 상태로 만들어 새로운 부동 문제를 야기합니다. 권장하지 않음
방법 4: 상위 p에 display:table 정의
원리: 테이블에 p 속성을 강제 적용
장점: 수수께끼
단점: 알려지지 않은 새로운 문제가 발생합니다. (권장하지 않음)
방법 5: 상위 요소 설정 오버플로: hide, auto
원리: 이 방법의 핵심은 BFC를 트리거하는 것입니다. IE6에서는 hasLayout(zoom: 1)도 트리거되어야 합니다.
장점: 코드가 간단하고 구조적 및 의미론적 문제가 없습니다.
단점: 오버플로되어야 하는 요소를 표시할 수 없습니다(권장하지 않음)
방법 6: 상위 p 의사 클래스 정의: after 및 Zoom
content:'.';
height:0;
clear:both;
.clearfix {zoom:1; }
원리: IE8 이상 및 IE가 아닌 브라우저만 지원합니다. 이후 원리는 방법 2와 다소 유사하며, 확대/축소(IE 전송에는 속성이 있음)가 ie6 및 ie7의 부동 문제를 해결할 수 있습니다.
장점: 구조와 의미는 다음과 같습니다. 완전히 정확하고 코드의 양이 보통입니다. 재사용성(공개 클래스를 정의하는 것이 좋습니다)
단점: 코드가 그다지 간결하지 않습니다(강력히 권장됨)
더 나은 작성 방법을 위해 노력 중
.clearfix:after {
content:” 200B”;
display:block;
height:0 ;
clear:both;
}
.clearfix {*zoom:1;} IE6과 IE7만 주의하세요

플로팅에 대한 자세한 내용은 이 문서를 참조하세요. :
http://luopq.com/2015/11 /08/CSS-float/

4.BFC 관련 지식

정의: BFC(블록 서식 컨텍스트)는 말 그대로 "블록 수준 서식 컨텍스트"로 번역됩니다. 블록 수준 상자만 참여하는 독립적인 렌더링 영역입니다. 내부 블록 수준 상자가 배치되는 방식을 지정하며 이 영역 외부와는 아무 관련이 없습니다.
BFC 레이아웃 규칙

BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않습니다. 그리고 그 반대도 마찬가지입니다.

BFC 이 요소의 수직 거리는 마진에 의해 결정됩니다. 최대값을 취하면
BFC의 영역은 플로팅 상자와 겹치지 않습니다(플로팅 원칙 지우기).
BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

BFC를 생성하는 요소

루트 요소

float 속성이 없음이 아닙니다.

위치가 절대 또는 고정입니다.

디스플레이가 inline-block, table-cell, table-caption, flex, inline-flex

오버플로가 표시되지 않습니다

5. 상자 크기 조정이란 무엇입니까? CSS 상자 모델을 표준 모델 또는 IE 모델로 설정합니다. 표준 모델의 너비에는 콘텐츠만 포함되고 두 번째 IE 모델에는 테두리와 패딩이 포함됩니다. 상자 크기 속성은 다음 세 가지 값 중 하나일 수 있습니다.

content-box, 기본값, 콘텐츠의 너비만 계산됩니다. , 테두리와 패딩은 너비로 계산되지 않습니다.

padding-box, 테두리와 패딩은 너비

6로 계산됩니다.
픽셀(픽셀). 절대 단위. 픽셀 px는 모니터 화면 해상도에 상대적입니다. 이는 가상 길이 단위이며, px를 물리적 길이로 변환하려면 정밀 DPI를 지정해야 합니다.

em은 현재 개체 내 텍스트의 글꼴 크기를 기준으로 한 상대적 길이 단위입니다. 인라인 텍스트의 현재 글꼴 크기가 수동으로 설정되지 않은 경우 브라우저의 기본 글꼴 크기를 기준으로 합니다. 상위 요소의 글꼴 크기를 상속하므로 고정된 값이 아닙니다.

rem은 CSS3의 새로운 상대 단위(루트 em)입니다. rem을 사용하여 요소의 글꼴 크기를 설정할 때 여전히 상대 크기이지만 HTML 루트 요소에만 상대적입니다.
7.CSS를 도입하는 방법은 무엇인가요? link와 @import의 차이점은 무엇인가요?
inline(요소의 스타일 속성), Embedded(스타일 태그), external link(링크), import( @import )

link와 @import의 차이점:

link는 CSS를 로드하는 것 외에도 RSS와 같은 다른 트랜잭션을 정의할 수도 있습니다. @import는 CSS 범주에 속하며 CSS만 로드할 수 있습니다.
link CSS를 참조하면 페이지가 로드되는 동시에 로드됩니다. @import에서는 페이지가 완전히 로드된 후에 로드되어야 합니다.
link는 XHTML 태그이며 호환성 문제가 없습니다. @import는 CSS2.1에서 제안되었으며 하위 버전 브라우저에서는 지원되지 않습니다.
link는 Javascript를 사용하여 DOM을 제어하여 스타일을 변경하도록 지원합니다. @import는 지원하지 않습니다.

流式布局与响应式布局的区别
流式布局
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进
行伸缩，不受固定像素的限制，内容向两侧填充。
响应式开发
利用 CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。