I. 소개
페이지의 요소는 모두 상자로 구성되며, 요소의 내용은 상자에 담겨 있습니다. 박스 안쪽부터 바깥쪽까지 content, padding, border, margin이 있으며, 이 속성들도 흔히 사용되는 속성입니다. 개발자 도구를 열고 F12로 페이지의 요소를 선택하면 해당 속성과 속성 값을 명확하게 볼 수 있습니다.
2. 박스 모델
1. 박스모델의 구성
- 국경
- 내용 내용
- 패딩: 텍스트와 상자 테두리 사이의 거리
- 여백: 한 상자와 다른 상자 사이의 거리를 제어합니다.
소위 상자 모델 : HTML 페이지의 레이아웃 요소를 콘텐츠의 컨테이너인 직사각형 상자로 간주하는 것입니다.
CSS 상자 모델은 본질적으로 테두리, 여백, 내부 여백 및 실제 콘텐츠를 포함한 HTML 요소를 캡슐화하는 상자입니다.
1.1, 국경 국경
border는 요소의 테두리를 설정할 수 있습니다.
1.1.1 프레임은 세 부분으로 구성됩니다.
- 테두리 너비(두께, 단위는 px): border-width
- 테두리 스타일: 테두리 스타일
- 테두리 색상: border-color
/* 边框高度 */
border-width: 5px;
/* 边框样式 solid实线 */
border-style: solid;
/* 边框样式 dashed虚线 */
border-style: dashed;
/* 边框样式 dotted点线 */
border-style: dotted;
/* 边框颜色 */
border-color: red;
/* transparent透明色 */
border-color: transparent;
1.1.2 복합 프레임의 약칭
/* 边框的复合简写 没有顺序*/
border: 5px solid red
1.1.3, 프레임을 별도로 작성
/* 边框分开写*/
border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid pink;
border-right: 5px solid purple;
1.1.4, 테이블의 얇은 선 테두리
border-collapse 속성은 브라우저가 테이블 테두리를 그리는 방법을 제어합니다. 인접한 셀의 테두리를 제어합니다.
/* 合并相邻的边框 表示相邻边框合并在一起 */
border-collapse: collapse;
1.2, 내부 여백 패딩
padding 속성은 안쪽 여백, 즉 테두리와 내용 사이의 거리를 설정하는 데 사용되며,
padding 속성(약칭 속성)은 1~4개의 값을 가질 수 있습니다.
1.3, 여백 외부 여백
margin 속성은 외부 여백, 즉 컨트롤 박스와 박스 사이의 거리를 설정하는 데 사용됩니다.
1.3.1, 여백은 가로 중앙에 위치
여백을 사용하면 블록 수준 상자를 가로 중앙에 배치할 수 있으며 다음 두 가지 조건이 충족되어야 합니다.
- 상자에는 너비(너비)를 지정해야 합니다.
- 상자의 왼쪽 및 오른쪽 여백은 자동으로 설정됩니다.
元素/.类{
width: 20px;
margin: 0 auto;
}
위의 방법은 블록 수준 요소를 가로로 중앙에 배치하고, 인라인 요소 또는 인라인 블록 요소의 상위 요소에 text-align: center를 추가하는 것입니다.
1.3.2 마진 병합
블록 요소의 수직 여백을 정의하기 위해 여백을 사용할 때 여백이 병합될 수 있습니다.
1.3.3 중첩된 블록 요소의 수직 여백 축소
두 개의 중첩 관계(부모-자식 관계)가 있는 블록 요소의 경우 상위 요소는 위쪽 여백을 가지며 하위 요소도 위쪽 여백을 갖습니다. 이때 상위 요소는 더 큰 여백 값으로 축소됩니다.
1.3.3.1.해결책
- 상위 요소에 대해 위쪽 테두리를 정의할 수 있습니다.
/* 设置边框为1px 实线 透明色 */
border: 1px solid transparent
- 상위 요소의 상단 패딩을 정의할 수 있습니다.
/* 设置内边距为1px */
padding: 1px
- 오버플로를 추가할 수 있습니다: 상위 요소에 숨겨짐
1.3.4 내부 및 외부 여백 지우기
* {
//清除内边距
padding: 0
//清除外边距
margin: 0
}
참고 : 호환성을 고려하여 인라인 요소의 경우 왼쪽 및 오른쪽 내부 및 외부 여백만 설정하고 위쪽 및 아래쪽 내부 및 외부 여백은 설정하지 마십시오. 그러나 블록 수준 및 인라인 블록 요소로 변환하면 문제가 해결됩니다.
2. 둥근 테두리
border-radius 속성은 요소 외부 테두리의 둥근 모서리를 설정하는 데 사용됩니다.
border-radius: 长度px/%；
3. 박스 섀도우
box-shadow 속성은 상자에 그림자를 추가합니다.
box-shadow: h-shadow v-shadow blur spread color inset
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
참고 :
1. 기본값은 외부 그림자(아웃셋)이지만 이 단어는 쓸 수 없습니다. 그렇지 않으면 그림자가 유효하지 않습니다. 2. 상자 그림자는
공간을 차지하지 않으며 다른 상자의 배열에 영향을 주지 않습니다.
3. 합성 글쓰기는 반드시 이루어져야 하며, 글쓰기만으로는 효과가 없습니다.
4. 텍스트 그림자
text-shadow 속성은 텍스트에 그림자를 추가합니다.
text-shadow: h-shadow v-shadow blur color
text-shadow: 3px 3px 2px rgba(0,0,0,0.3);
세 번째, CSS 플로팅
1. 플로팅
- 요소의 수평 방향은 부동입니다. 이는 요소가 왼쪽 및 오른쪽으로만 이동할 수 있고 위아래로 이동할 수 없음을 의미합니다.
- 부동 요소는 바깥쪽 가장자리가 포함 상자나 다른 부동 상자의 테두리에 닿을 때까지 최대한 왼쪽이나 오른쪽으로 이동합니다.
- 부동 요소 뒤의 요소가 해당 요소를 둘러쌉니다.
- 부동 요소 앞의 요소는 영향을 받지 않습니다.
1.1.표준 스트림(일반 스트림/문서 스트림)
1.2 플로팅 특성
- 표준적인 일반적인 흐름의 제어에서 벗어나(부동) 지정된 위치로 이동(이동)하는 것을 오프라벨(off-label) 이라고 합니다.
- 떠다니는 상자는 더 이상 원래 위치를 유지하지 않습니다.
2. 클리어 플로팅
4. 요약
이 글의 소개를 통해 독자들은 CSS 박스 모델과 플로팅에 대해 더 깊이 이해할 수 있게 되었습니다. 이 두 가지 개념을 익히면 독자는 페이지 레이아웃과 디자인을 보다 유연하게 수행하고 웹 페이지의 사용자 경험과 유지 관리성을 향상시킬 수 있습니다. 동시에 박스 모델과 플로팅의 호환성 문제와 솔루션을 이해함으로써 독자는 다양한 브라우저의 차이점을 더 잘 처리하고 개발 효율성을 높일 수 있습니다. 이 기사가 독자들이 프런트엔드 개발에서 CSS 박스 모델과 플로팅 기술을 더 잘 사용하는 데 도움이 되기를 바랍니다.