이번 주에는 프로젝트가 없었으며 HTML 디자인 모델을 연구하고 있습니다. 나는 이번 주에 당신의 참조를 위해 내 학습 결과를 조직하고 공유 할 것입니다.
HTML 디자인 패턴 학습 노트
이번 주에는 주로 HTML 디자인 패턴을 배웠으며 이제는 학습 컨텐츠를 다음과 같이 요약하겠습니다.
하나. 상자 모델 학습
CSS에는 상자 모델이라는 기본 설계 모델이 있으며, 이는 요소가 상자로 구문 분석되는 방식을 정의합니다. 나는 주로 6 가지 유형의 박스 모델, 즉 인라인 박스 모델, 인라인 블록 박스 모델, 블록 박스 모델, 테이블 박스 모델, 절대 상자 모델 및 부동 포지셔닝 박스 모델을 배웠습니다.
Box 모델 설계 패턴은 CSS로 내장되어 있으며 경계, 경계, 충전 및 내용의 다음 속성 사이의 관계를 정의합니다. 각 속성에는 네 부분이 포함됩니다 : 상단, 오른쪽, 하단 및 왼쪽; 이 네 부분은 동시에 또는 별도로 설정할 수 있습니다. 경계는 크기와 색상으로 나눌 수 있습니다. 우리는 그것을 인생에서 볼 수있는 상자의 두께와 상자의 색상으로 이해할 수 있습니다. 경계는 상자가 다른 것들로부터 얼마나 멀리 떨어져 있어야하는지입니다. 내용은 상자에 포함되어 있으며 충전 상자의 예비 부품에 채워진 자료입니다.
1.1 인라인 박스 모델인라인 박스 모델은 인라인 배열 순서로 구문 분석되며 왼쪽에서 오른쪽으로 수평으로 정렬되며 가장 가까운 터미널 블록 조상의 너비를 초과하면 새 행으로 교체됩니다. 너비, 높이 및 오버플로는 항상 내용의 너비와 높이와 일치하기 때문에 인라인 요소에서 작동하지 않습니다. 마진과 라인 높이는 특별한 방식으로 인라인 요소에 적용 할 수 있습니다. 수평 마진은 배열 순서대로 인라인 요소의 위치를 변경합니다. 왼쪽 왼쪽의 양수 값은 요소를 이전 요소에서 멀어지게하는 반면, 음수 값은 더 가깝게 끌어 당깁니다. 마진 오른쪽의 양수 값은 요소를 다음 요소에서 멀어지게하는 반면, 음수 값은 더 가깝게 끌어 당깁니다. 마진 탑 및 마진 바닥은 인라인 요소에 대해서는 작동하지 않습니다. 국경은 인라인 요소에 대한 경계를 특별한 방식으로 설정하고 수평 테두리는 배열에서 인라인 요소의 위치를 변경합니다. 왼쪽 테두리는 요소를 왼쪽으로 만들고 오른쪽 테두리는 다음 요소를 오른쪽으로 만듭니다. 상단 및 하단 경계는 내부 마진 외부에 표시되지만 행 높이까지 확장되지 않거나 수직 방향으로 요소 위치를 변경하지 않습니다. 이 패턴의 템플릿은 다음과 같이 표현 될 수 있습니다.
코드를 복사하십시오