CSS 박스 모델 소개

CSS 박스 모델이란 무엇인가요? CSS 박스 모델은 p+css 모델의 위치 지정 기능을 완벽하게 이해할 수 있도록 하기 위한 것입니다. 박스 모델은 p+css 레이아웃 방법을 배울 때 반드시 배워야 하는 모델입니다

1. CSS란 무엇입니까?

CSS(Cascading Style Sheet) : 캐스케이딩 스타일시트(Cascading Style Sheet)는 웹페이지의 내용과 스타일을 구분하는 언어, 즉 웹페이지를 aspx나 html로 디자인하는 것을 말한다. 콘텐츠, CSS에서 웹페이지 스타일 설정 등

2. CSS 박스 모델이란 무엇인가요?

웹 디자인에서 흔히 듣는 속성 이름: content, padding(padding), border(border ), border (margin), CSS 상자 모델에는 모두 이러한 속성이 있습니다. 이러한 성질은 우리 일상생활에서 흔히 볼 수 있는 상자의 성질과 동일합니다. 내용물은 상자 안에 들어 있는 것입니다. 충전재는 상자 내용물의 손상을 방지하기 위해 추가된 내진 재료입니다. 프레임은 상자 자체를 말하며, 이는 일정한 간격이 남아 있어야 함을 의미합니다. 환기를 유지하기 위해 상자 사이.

3. 2박스 모델

1. 표준 박스 모델

2. IE 박스 모델                                                     이 두 가지 그림은 똑같지만, 자세히 살펴보면 두 그림 사이의 유사점과 차이점을 발견할 수 있습니다. 두 박스 모델 모두 콘텐츠, 패딩, 테두리, 여백의 네 가지 속성을 포함하지만 IE 박스 모델의 콘텐츠 부분에는 패딩과 테두리가 포함됩니다. 일반적으로 여러 브라우저와 호환되기 위해 표준 상자 모델을 사용하고 DOCTYPE 선언만 추가하면 됩니다. 1) 속성값의 약어형

① 두 개의 속성값이 주어지면 전자가 상하 속성을 나타내고 후자가 좌우 속성을 나타낸다. ②속성값이 3개 주어지면 전자가 상위 속성을 나타내고, 가운데 값이 좌우 속성, 후자가 하위 속성을 나타냅니다.

③속성값 4개가 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽의 속성을 의미합니다. 즉, 시계방향으로 정렬합니다.

2) 표준 흐름: 표준 흐름은 태그 배열로 이해될 수 있습니다. 태그 배열을 디자인하면 블록 수준 요소와 인라인 요소가 생성됩니다.

3) 요소 분류:

①블록 수준 요소: 각 블록 수준 요소는 기본적으로 한 줄의 높이를 차지합니다. 표현 방법

.
②인라인 요소: 블록 수준 요소와 비교하여 인라인 요소는 한 줄에 여러 요소를 수용할 수 있다는 의미로 이해할 수 있습니다. 표현은 입니다.

4. 박스모델의 용도는 무엇인가요?

CSS의 상자 모델은 p+css 모델의 위치 지정 기능을 완전히 이해할 수 있도록 하기 위한 것입니다. 따라서 전통적인

테이블

레이아웃을 대체하기 위해 상자 모델을 사용합니다. , 박스 모델은 p+css 레이아웃 방법을 학습할 때 반드시 학습해야 하는 모델입니다. 이 모델을 통해 웹 페이지에서 p와 p 사이의 상대적인 위치가 어떻게 배치되는지 이해할 수 있습니다.

위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS 박스 모델 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!