float는 html의 상자 속성이 아닌가요?

예, float는 box 속성에 속하지 않습니다. 상자 속성에는 너비, 높이, 패딩, 하단 패딩, 왼쪽 패딩, 오른쪽 패딩, 상단 패딩, 여백, 테두리 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

박스 패턴(모델)은 웹 디자인에서 자주 사용되는 CSS 기술이 사용하는 사고 모델입니다. CSS는 모든 HTML 문서 요소가 상자로 시각화될 수 있는 HTML 문서 레이아웃의 요소가 차지하는 공간을 설명하는 직사각형 요소 상자를 생성한다고 가정합니다.

일련의 상자 관련 속성을 정의하면 각 상자는 물론 전체 HTML 문서의 성능과 레이아웃 구조가 크게 향상되고 향상될 수 있습니다.

css 박스 모드(모델)는 박스 모델이라고도 알려져 있으며 그림과 같이 요소 콘텐츠(content), 내부 여백(padding), 테두리(border), 외부 여백(margin) 등 여러 요소로 구성됩니다. 그림에서).

우리가 일상에서 접하는 상자는 물건을 담을 수 있는 상자이고, 이런 속성을 갖고 있어서 상자무늬라고 합니다.

Box 모델(Flexible Box) 속성

1. 콘텐츠 영역 설정(content):

• width: 너비 설정
• height: 높이 설정

너비 및 높이 설정 특정 값(단위 포함) 또는 백분율 설정이 될 수 있습니다.

2. 패딩 설정:

• 상자의 패딩은 위쪽, 오른쪽, 아래쪽, 왼쪽의 네 방향으로 구분됩니다.
• 패딩 설정은 상자에 로드되는 콘텐츠의 거리를 제어하는 ​​데 사용됩니다. 상자 가장자리(테두리) 사이.
• 상자의 패딩은 상자 내부 공간을 차지하며 최소값은 0이며 음수 값은 허용되지 않습니다.

Property	Description
padding	단축 속성을 사용하여 하나의 선언으로 모든 패딩 속성을 설정합니다.
padding-bottom	요소의 하단 패딩을 설정합니다
패딩 -left	요소의 왼쪽 패딩 설정
padding-right	요소의 오른쪽 패딩 설정
padding-top	요소의 상단 패딩 설정

(학습 동영상 공유: css 동영상 튜토리얼)

3. 여백 설정

• 상자의 여백은 위쪽, 오른쪽, 아래쪽, 왼쪽 네 방향으로 구분됩니다.
• 여백 설정은 상자 외부 주위의 거리입니다. 상자 자체의 범주에 속합니다. 여백의 주요 목적은 상자의 위치를 ​​제어하는 ​​것이므로 음수 값이 나타날 수 있습니다. 하나의 문에서 모든 여백 속성을 설정합니다.

margin-bottom요소의 아래쪽 여백을 설정합니다. 요소의 왼쪽 여백을 설정합니다. 요소의 오른쪽 여백을 설정합니다. 요소의 위쪽 여백을 설정합니다.

margin-left

margin-right

margin-top

4. 테두리 설정

• 대부분의 요소 개체에는 기본적으로 테두리가 없습니다.

• 테두리를 설정하려면 너비, 스타일, 색상 등 3가지 요소를 동시에 설정해야 합니다.

• 테두리 복합 속성

• 속성 요소로 분류된 테두리의 확장 속성(border-width: 테두리 너비, border-style: 테두리 스타일, border-color: 테두리 색상)

Property	Description
border	약어 속성으로, 하나의 명령문에서 네 면에 대한 속성을 설정하는 데 사용됩니다.
border-style	은 요소의 모든 테두리 스타일을 설정하거나 각 측면의 테두리 스타일을 개별적으로 설정하는 데 사용됩니다.
border-width	요소의 모든 테두리 너비를 설정하거나 각 테두리의 너비를 개별적으로 설정하는 데 사용되는 단축 속성입니다.
border-color	약식 속성으로, 요소의 모든 테두리에서 보이는 부분의 색상을 설정하거나 4개 면 각각의 색상을 설정합니다.
border-bottom	약어 속성, 하단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-bottom-color	요소의 아래쪽 테두리 색상을 설정합니다.
border-bottom-style	요소의 하단 테두리 스타일을 설정합니다.
border-bottom-width	요소의 하단 테두리 너비를 설정합니다.
border-left	약어 속성, 왼쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-left-color	요소의 왼쪽 테두리 색상을 설정합니다.
border-left-style	요소의 왼쪽 테두리 스타일을 설정합니다.
border-left-width	요소의 왼쪽 테두리 너비를 설정합니다.
border-right	약어 속성, 오른쪽 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-right-color	요소의 오른쪽 테두리 색상을 설정합니다.
border-right-style	요소의 오른쪽 테두리 스타일을 설정합니다.
border-right-width	요소의 오른쪽 테두리 너비를 설정합니다.
border-top	약어 속성, 상단 테두리의 모든 속성을 하나의 명령문으로 설정하는 데 사용됩니다.
border-top-color	요소의 상단 테두리 색상을 설정합니다.
border-top-style	요소의 상단 테두리 스타일을 설정합니다.
border-top-width	요소의 상단 테두리 너비를 설정합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 float는 html의 상자 속성이 아닌가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!