>  기사  >  웹 프론트엔드  >  float는 html의 상자 속성이 아닌가요?

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

青灯夜游
青灯夜游원래의
2021-03-02 17:34:121966검색

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

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

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

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

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

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

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.