CSS 학습 디렉토리에는 CSS 사용법이 자세하게 소개되어 있습니다. 그것이 무엇인지 알려면 왜 그런지도 알아야 합니다. 이 글에서는 CSS의 각 부분이 등장한 이유에 대해 소개하겠습니다. 잘못된 점이 있으면 언제든지 문의해 주세요.
1. 구조와 스타일의 완전한 분리를 고려하고 스타일 시트가 여러 HTML 파일에서 사용될 수 있다는 점을 고려한다면 외부 스타일 시트
2. 스타일 시트가 현재 페이지에만 사용되고 HTTP 요청 수를 줄이는 경우 내부 스타일 시트를 사용하세요
3. 단일 요소에 대해 일부 스타일만 지정하려는 경우 다음을 사용할 수 있습니다. 인라인 스타일을 설정하는 HTML의 스타일 속성
선택 이유
1. 와일드카드 선택기는 모든 요소를 선택합니다.
2. 요소 선택기는 요소를 선택합니다. HTML 태그에 따라 3. 클래스 선택 선택자는 클래스 이름을 정의하여 요소의 유형을 선택합니다
4. ID 선택자는 특정 ID를 가진 요소를 선택합니다
5. 속성 선택자는 속성 및 속성에 따라 요소를 선택합니다. 요소의 값
6. 하위 선택자는 HTML 계층 관계를 전달하여 요소를 선택합니다
7. 그룹 선택자는 동일한 규칙으로 요소를 결합하여 설정합니다
Cascading을 사용하는 이유
CSS(Cascading Style Sheet)는 계단식 스타일 시트로 중국어로 번역되었으며 가장 기본적인 기능 중 하나는 계단식입니다. 충돌하는 선언은 계단식으로 정렬되어 최종 문서 표현을 결정합니다
<style>div{height: 100px;}.test{height: 200px;} </style><div class="test"></div></h3>
<p> </p>
<div class="cnblogs_code">Hack이 필요한 이유</div>
<p> CSS Hack은 브라우저 스타일 호환성을 확보하기 위한 완벽한 방법입니다. 가능하다면 사용하지 마세요. 그러나 이전 버전의 IE의 버그와 같은 일부 브라우저 버그의 경우 CSS Hack을 사용하는 것이 최후의 수단입니다</p>
<h3> 예를 들어 IE6의 경우 브라우저는 주로 밑줄_과 가운데 밑줄을 사용합니다. 이 두 문자는 핵을 구현합니다. 아래와 같이 IE6 브라우저에서는 div의 텍스트 색상이 파란색이고 다른 브라우저에서는 빨간색입니다</h3>
<p></p>
<pre class="brush:php;toolbar:false"><span style="color: #000000;">div{<br> color:red;<br> _color:blue;<br>}</span>개인적으로 의사 클래스는 의사 요소는 HTML을 반영합니다. 요소의 확장을 통해 요소의 스타일 표현을 풍부하게 할 수 있습니다.
a:hover{background-color:lightblue;}/*浅蓝，鼠标悬停*/생성된 콘텐츠는 주로 브라우저에서 생성된 콘텐츠를 의미합니다
, 예를 들어
왜 유닛
, 단위 사물좌표계의 좌표축에서 개체를 구성할 수 있는 추상적 개념인 상대적인 개념이다. 길이 단위는 공간적 거리를 측정하기 위한 기본 단위를 말하며, CSS에서 길이를 표준화하기 위해 개발한 기본 단위이다.
【절대 길이 단위】
절대 길이 단위는 물리적 측정값을 나타내며, 픽셀 포함 px(픽셀), 인치 인치(인치), 인치 인치(인치), 인치 인치(인치), 인치 인치(인치), 1/4 mm q(¼밀리미터), 포인트 pt(포인트), 파이카 pc (picas)
웹에서는 픽셀 px가 일반적인 측정 단위이며, 다른 많은 길이 단위도 픽셀에 직접 매핑됩니다. 마지막으로 픽셀 단위로 처리됩니다
1in = 2.54cm = 96px 1cm = 10mm = 96px/2.54 = 37.8px 1mm = 0.1cm = 3.78px 1q = 1/4mm = 0.945px 1pt = 1/72in = =0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px 1pc = 12pt = 1/6in = 1/6*96px = 16px
【字体相关的长度单位】
字体相关的相对长度单位包括em、ex、ch、rem
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size
rem是相对于根元素html的font-size属性的计算值
ex是指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值
ch与ex类似，被定义为数字0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值
【视口相关的长度单位】
视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的overflow值为auto时，任何滚动条会假定不存在
关于视口相关的单位有vh、vw、vmin、vmax4个单位
vh:布局视口高度的 1/100 vw:布局视口宽度的 1/100 vmin:布局视口高度和宽度之间的最小值的 1/100 vmax:布局视口高度和宽度之间的最大值的 1/100
盒模型是CSS布局的基础，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小
【box-sizing】
在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸
在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式
在网页布局中，因为margin重叠的原因，我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上，它是在很大的作用的
HTML文档创建的初衷只是用来展示信息的。HTML文档只使用默认样式的前提下，如果上下margin不发生重叠，则会出现以下几个问题：1、连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟元素呈现1:2的关系，排版不自然；2、web中任何地方嵌套或直接放入任何裸div，都会影响原生的布局，与web设计原则相违背；3、遗落的空的任意多个p标签，会影响原来的阅读排版
所以，我们要善用重叠，可以在列表项中同时使用margin-top和margin-bottom。这样，使页面结构更具有健壮性，最后一个元素移除或位置调换，都不会破坏原生的布局
【-webkit-margin-collapse】
-webkit-margin-collapse: <collapse>(默认重叠) | <discard>(取消) | <separate>(分隔)
이 속성은 여백 겹침 여부를 설정하는 데 사용되며, 여백 겹침이 발생하는 두 요소 중 하나에 작용합니다. 둘 다 이 속성을 사용하면 하나는 삭제로 설정되고 다른 하나는 분리로 설정되면 최종 효과는 겹치게 됩니다. 표시되어야 하는 내용 올바른 효과는 여전히 브라우저 호환성 버그입니다. 시각적 형식 지정에서 더 중요한 개념 중 하나는 자동입니다. 자동 값은 실제 값과 필요한 합계 사이의 간격을 보충하는 데 사용됩니다
[블록 수준 요소의 너비가 기본적으로 상위 요소를 채우는 이유]
line-height
및vertical에 의존합니다. -align
【인라인 블록 요소에 하단 틈이 있는 이유】
인라인 블록 요소가 블록 수준에 틈을 남기는 이유 요소는 이미지 때문입니다. 기본 세로 정렬은 기준선 정렬입니다(원칙적으로 기준선 정렬은 이미지의 아래쪽 가장자리를 익명 텍스트의 대문자 영문자 X의 아래쪽 가장자리와 정렬하는 것과 같습니다). line height는 부모 요소에서 설정한 line height를 상속받습니다. 기본값은 일반(크롬 아래 글꼴 크기의 1.334배)이므로 솔루션 하단 가장자리 사이에 거리가 있습니다.1. 수직이므로 디스플레이:블록을 설정합니다. 정렬은 대체 요소와 인라인 요소에만 적용할 수 있습니다. 블록 수준 요소로 변경하면 수직 정렬이 무효화됩니다. 2. 익명 텍스트와 줄 상자 사이의 거리가 0이 되도록 부모의 줄 높이를 0으로 설정합니다. 3. 수직 정렬을 상단/중간/하단으로 설정
[인라인 요소의 수직 여백이 유효하지 않은 이유]
인라인 요소의 수직 레이아웃은 주로 줄 높이를 통해 이루어지기 때문에 line- 높이와 수직 정렬은 수직의 영향을 받습니다. -align, 수직 여백은 영향을 미치지 않으므로 수직 레이아웃에는 영향을 미치지 않습니다. 표시 모드에서 여백 영역은 요소의 배경을 표시하지 않으므로 자체 요소의 표시에 영향을 미치지 않습니다. 따라서 인라인 요소의 세로 여백은 유효하지 않습니다
Floating 이유
가장 빠릅니다. 플로팅 사용은플로팅 요소는 일반 흐름에서 벗어나 지정된 방향으로 왼쪽이나 오른쪽으로 이동하고 상위 경계 또는 다른 플로팅 요소를 만나면 중지됩니다. 플로팅에는 다음과 같은 4가지 특성이 있습니다.
1. 플로팅 흐름: 일반 흐름의 요소가 차례로 배열되어 플로팅 흐름을 구성합니다.
2. 블록 수준 상자: 플로팅 요소 자체가 블록을 생성합니다. 요소에 관계없이 레벨 상자 플로팅 요소 주변의 여백이 병합되지 않도록 하는 것은 무엇입니까? 3. 래핑: 플로팅 요소의 포함 블록은 가장 가까운 블록 수준 조상 요소를 참조하고 하위 플로팅 요소는 다음을 초과해서는 안 됩니다. 포함하는 블록 경계의 상단, 왼쪽 및 오른쪽. 포함 블록의 높이가 설정되지 않고 포함 블록이 부동하는 경우 포함 블록은 모든 하위 부동 요소를 포함하도록 확장됩니다. 포함 블록의 너비가 설정되지 않고 포함 블록이 부동하는 경우 너비는
4. 파괴적: 플로팅 요소는 일반 흐름에서 벗어나 자체 라인 상자 속성을 파괴하여 포함된 블록 요소의 높이를 붕괴시킵니다. 플로팅 박스 옆에 있는 라인 박스를 줄여서 플로팅 박스를 위한 공간을 남겨두고 라인 박스가 플로팅 박스 주변으로 재배치됩니다【플로트를 지워야 하는 이유】
플로트를 지우는 것이 실제로는 플로팅 요소의 포함 블록 높이 붕괴 문제를 해결하려면
표준 브라우저의 경우 플로트를 지우는 것은 실제로 두 가지 방법뿐입니다. 하나는 플로팅 요소 아래에 새 요소를 추가하고 다른 하나는 부동 요소를 포함하도록 포함 블록의 BFC를 트리거하는 것입니다
왜 BFC
BFC를 설명하기 전에 문서 흐름에 대해 이야기해 보겠습니다. 우리가 자주 이야기하는 문서 흐름은 실제로 위치 지정 흐름, 부동 흐름 및 일반 흐름의 세 가지 유형으로 나뉩니다. 일반적인 흐름은 실제로 BFC의 FC를 나타냅니다. FC는 서식 컨텍스트(formatting context)의 약어로, 페이지의 렌더링 영역이며, 하위 요소가 배치되는 방식은 물론 다른 요소와의 관계 및 역할을 결정하는 일련의 렌더링 규칙이 있습니다. 강요. 일반적인 FC에는 BFC, IFC, GFC 및 FFC가 포함됩니다. BFC는 블록 수준 서식 컨텍스트이기도 한 블록 수준 상자를 레이아웃하는 데 사용되는 렌더링 영역입니다.
BFC는 다음 조건 중 하나가 충족될 때 트리거될 수 있습니다. 1. 루트 요소, 즉 HTML 요소 2. float 값이 none이 아닙니다
3. Overflow 값이 보이지 않습니다 4. display 값이 inline-block, table-cell, table 입니다. -caption 5. 위치 값은 절대 또는 고정입니다BFC는 페이지에서 격리된 독립 컨테이너입니다. 컨테이너 내부의 하위 요소는 외부 요소에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다
. BFC는 다음 세 가지 목적을 달성하기 위해 자주 사용됩니다 1. 요소가 플로팅 요소에 의해 가려지는 것을 방지 <설명>내용이 BFC이고 배경이 빨간색인 상자의 속성 값을 변경하여 BFC로 만듭니다. 녹색 플로팅 상자 오버레이로 덮이지 않도록
2. 플로팅 요소 포함
3.
동일 BFC에 속하는 인접한 두 블록 수준 하위 요소의 위쪽 및 아래쪽 여백이 겹칩니다(write-mode: tb-rl이 설정된 경우 가로 여백이 겹침). 따라서 두 개의 인접한 블록 수준 하위 요소가 서로 다른 BFC에 속하면 여백 겹침을 방지할 수 있습니다
위치 지정 이유
CSS에는 일반 흐름, 부동 흐름 및 위치 지정 흐름의 세 가지 기본 레이아웃 메커니즘이 있습니다. 위치 지정을 사용하면 요소의 상자가 일반 위치 또는 상위 요소, 다른 요소 또는 브라우저 창 자체를 기준으로 표시되어야 하는 위치를 정확하게 정의할 수 있습니다.
요소의 위치가 절대적으로 지정되면 해당 요소는 문서 흐름을 삭제합니다. 요소는 가장 가까운 위치의 조상을 기준으로 위치가 지정됩니다. 요소에 위치가 지정된 조상이 없으면 해당 위치는 오프셋 속성에 따라 경계가 배치되는 원래 포함 블록 문서를 기준으로 합니다. 요소는 원래 일반 흐름에서 생성된 상자 유형에 관계없이 위치 지정 후 블록 수준 상자를 생성합니다. 위치가 지정된 요소는 다른 요소의 콘텐츠로 흐르지 않으며, 그 반대도 마찬가지입니다.
요소가 상대적으로 위치를 지정하면 원래 위치에서 이동하지만 원래 차지했던 공간은 사라지지 않습니다. 상대적으로 배치된 요소는 모든 하위 요소에 대해 새로운 포함 블록을 만듭니다. 이 포함 블록은 요소의 원래 위치에 해당합니다
固定定位与绝对定位很类似，元素会完全从文档流中去除，但固定元素的偏移是相对于视窗
【为什么clip属性无效】
绝对定位或固定定位元素才可以使用clip属性。绝对定位元素常配合clip属性达到元素隐藏的效果
.hide{
position:absolute;
clip: rect(0,0,0,0);
}【为什么静态位置的元素会发生跳动】
对于居中对齐的行内元素来说，将元素设置为absolute或fixed会发生静态位置跳动问题。而relative或static则不会有此问题。这是因为元素默认的居中对齐是元素的内容中线对应父级块级元素中线，而当元素绝对定位或固定定位之后，定位元素左边界将与其父级块级元素的中线对齐
【为什么overflow属性会失效】
当overflow在绝对定位元素和其包含块之间时，绝对定位元素不会被父级overflow属性剪裁
解决办法就是有两种， 一种是让overflow元素自身成为包含块，给父级设置position:absolute或fixed或relative；另一种是设置overflow元素的子元素为包含块，在绝对定位元素和overflow元素之间增加一个元素并设置position:absolute或fixed或relative
对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index
利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放
对于CSS2.1来说，页面元素的堆叠规则如下图所示
위치가 지정된 요소(위치가 정적이 아닌 요소)의 경우 z-인덱스가 설정되지 않았거나 Z-인덱스가 동일하면 후속 요소가 동일한 스택 컨텍스트에서 동일한 레벨의 요소에 대해 이전 요소를 덮습니다. 기본 z-index 큰 값은 z-index의 작은 값보다 우선합니다.
요소에 z-index 값(자동 아님)이 지정되면 요소는 자체 로컬 스태킹 컨텍스트를 설정합니다. 이는 요소의 모든 하위 요소가 상위 요소를 기준으로 고유한 스택 순서를 갖는다는 것을 의미합니다
[참고] 자동 값은 현재 스택 컨텍스트에서 생성된 스택 수준이 해당 상위 상자의 수준과 동일함을 의미합니다. 새로운 로컬 오버레이 컨텍스트를 생성하지 않습니다. z-index:auto와 z-index:0의 값은 동일하지만 z-index:0은 새로운 로컬 스택 컨텍스트를 설정합니다
CSS3의 출현은 과거에 많은 규칙에 도전했습니다. 스태킹 컨텍스트에 대한 z-index의 영향은 주로 다음 8가지 속성을 포함하여 더 중요합니다
1. auto가 아닌 z-index 값을 갖는 Flex 항목(상위 요소 표시: flex | inline-flex)
2 . 요소의 투명도 불투명도 값이 1
이 아닙니다. 3. 요소의 변환 변환이 없음이 아닙니다. 4. 요소의 혼합 혼합 모드 값이 정상이 아닙니다. 5. 요소의 필터 값이 없음이 아닙니다.
6. 요소의 격리 값은 격리됨
7. will-change에 지정된 속성 값은 위 중 하나입니다.
8. 요소의 -webkit-overflow-scrolling은 touch로 설정됩니다.
위 8개 속성 중 하나 설정 절대, 계단식 컨텍스트 z를 설정하는 것과 비슷합니다 - 인덱스가 적용됩니다
오버플로가 발생하는 이유
요소가 특정 크기로 고정되어 있지만 내용이 요소에 맞지 않는 경우. 이때)를 사용하여 이러한 상황을 제어할 수 있습니다. Overflow-x 및 Overflow-y 속성은 원래 IE 브라우저에서 독립적으로 개발된 속성이었으며 나중에 CSS3에서 채택 및 표준화되었습니다. . Overflow-x는 주로 가로 콘텐츠 오버플로의 잘라내기를 정의하는 데 사용되는 반면, Overflow-y는 세로 콘텐츠 오버플로의 잘라내기를 정의하는 데 주로 사용됩니다.
오버플로가 자동, 스크롤 또는 숨김으로 설정된 경우 트리거될 수 있습니다. BFC는 일부 관련 애플리케이션을 구현하기 위해 오버플로를 허용합니다.
【스크롤 막대가 나타나는 이유】
어떤 브라우저에서든 기본 스크롤 막대는
chrome/firefox/IE 브라우저의 기본 스크롤 막대 너비는 17px이고 Safari 브라우저는 21px입니다.
Flex가 필요한 이유
CSS3에서는 새로운 레이아웃 모델인 Flex 레이아웃을 도입합니다. 플렉스(Flex)는 Flexbox의 약어로, 일반적으로 Flexbox 모델이라고 합니다. Flex 레이아웃은 다양한 유형의 디스플레이 장치 및 다양한 크기의 화면에 맞게 컨테이너 내의 항목을 레이아웃하는 보다 효율적인 방법을 제공합니다.
Flex 컨테이너에는 기본적으로 가로 주축(주축)이라는 두 개의 축이 있습니다. 및 수직 교차 축 [참고] 주축의 방향은 반드시 수평일 필요는 없으며 주로 justify-content 속성에 따라 다릅니다.
주축의 시작점을 주 시작점, 주축의 끝점이라고 합니다. 축을 메인 엔드라고 합니다. 교차 축의 시작점을 크로스 스타트라고 하고, 측면 축의 끝점을 크로스 엔드라고 합니다.망원경 항목은 기본적으로 기본 축을 따라 배열됩니다. 단일 텔레스코픽 프로젝트가 차지하는 주축 공간을 메인 사이즈라고 하고, 측면 축 공간이 차지하는 공간을 크로스 사이즈라고 합니다
[참고] 텔레스코픽 프로젝트의 메인 사이즈와 크로스 사이즈는 주로 너비나 높이에 따라 결정됩니다
flex를 사용하면 다양한 레이아웃 형태를 쉽게 구현할 수 있습니다. 자세한 내용은 여기를 참조하세요
다열 레이아웃이 필요한 이유
일반적인 조판 방법으로 플로팅은 단지 최후의 수단일 뿐입니다. 처음에는 그래픽의 혼합 레이아웃을 달성하는 데만 사용되었습니다. 그래픽과 텍스트가 혼합된 레이아웃에만 사용하는 것이 가장 좋습니다. 더 복잡한 레이아웃 구조는 아닙니다.
위치 지정은 요소의 정확한 위치 지정에 사용됩니다.
그리고 다중 열 레이아웃은 신문 및 잡지 레이아웃 방법과 유사한 것을 제공합니다
CSS는 브라우저가 한 열을 끝내고 시작할 시기를 결정할 수 있는 새로운 다중 열 레이아웃 기능을 추가했습니다. 추가 마크업 없이 다음 열. 간단히 말해서 CSS3 다중 열 레이아웃은 지정된 열 수에 따라 콘텐츠를 자동으로 정렬할 수 있습니다. 이 기능을 통해 얻을 수 있는 레이아웃 효과는 신문 및 잡지 조판
과 매우 유사합니다.
위 내용은 CSS가 널리 사용되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
