집 >웹 프론트엔드 >JS 튜토리얼 >마진 플로트 배경 이미지 사용 방법

마진 플로트 배경 이미지 사용 방법

이번에는 마진 플로트 배경 이미지 사용 방법과 마진 플로트 배경 이미지 사용 시 주의 사항에 대해 알려드리겠습니다.

오늘은 웹페이지 제작 시 발생하는 문제점을 정리해보겠습니다

1. 배경 이미지를 삽입하고 p 하단에 해당 이미지를 배치하여 전체 행을 채웁니다.

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom; 
    background-size:100%;</style>

　속성:

　 배경 위치: 배경 위치 속성은 배경 이미지의 위치를 설정하는 데 사용됩니다. 이 속성은 블록 수준 요소 및 대체 요소에만 적용할 수 있습니다. 대체 요소에는 img, input, textarea 및 select가 포함됩니다.

　　구문 값에는 길이와 키워드라는 두 가지 유형이 있습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ　　　　　　　　　　　　　ccoint' , 두 번째 값은 설정되지 않으며 기본값은 중앙입니다.

　 background-size: 배경 이미지의 크기를 정의합니다.

　　속성값 1.length: 첫 번째 값은 너비, 두 번째 값은 높이입니다. 첫 번째 값만 설정하면 두 번째 값은 자동으로 "auto"

　　2로 변환됩니다. : 이미지의 너비와 높이를 상위 요소의 백분율로 설정합니다. 첫 번째 값은 너비이고 두 번째 값은 높이입니다. 하나의 값만 설정하면 두 번째 값은 "auto"로 설정됩니다.

　 3.cover: 배경 이미지가 영역을 완전히 덮도록 확장됨(불균일 비율)

2. 여백 문제

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　uuation에 대한 문제에 대한 마진

| 높이입니다

　　 (2) 마진과 패딩의 차이

　　여백: 테두리 외부에 공간을 추가해야 할 때. 서로 취소해야 할 때. 예를 들어 여백이 15px + 20px이면 여백이 20px가 됩니다.

　Padding : 테두리 안쪽에 공백을 추가해야 합니다. 필요는 둘의 합과 같습니다. 예를 들어 15px + 20px 패딩을 사용하면 35px 공백이 생성됩니다.

　　 (3) 인라인 요소 위쪽 및 아래쪽 여백에는 영향을 주지 않습니다.

3.float 문제

(1) 다음 p가 위쪽 p로 왼쪽으로 떠오를 때 위쪽 p의 텍스트가 표류하는 p를 감싸게 됩니다.

　　 문서 흐름과 관련하여 자세한 내용은 4를 참조하세요. 　요소 조판 및 레이아웃 프로세스 중에 요소가 자동으로 왼쪽에서 오른쪽으로, 위에서 아래로 흐름 배열됩니다.

　 문서 흐름에서 벗어나는 것은 일반적인 레이아웃과 조판에서 요소를 빼내는 것을 의미하며 블록 요소를 배치할 때 해당 요소는 부동 요소로 처리되어 존재하지 않습니다. 위치 지정 시 절대 및 부동 부동은 문서 흐름에서 벗어나게 됩니다.

부분적으로 무시됨: float는 문서 흐름에서 벗어납니다. 다른 상자는 이 요소를 무시하지만 상자 내의 인라인 요소는 부동 위치를 포기하고 그 주위에 존재합니다.

　　 완전 무시: Absolute는 문서 흐름에서 벗어납니다. 상자 내의 인라인 요소를 포함한 다른 상자는 위치 지정 요소를 완전히 무시합니다.

Margin과 float는 동시에 사용할 수 없습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!