CSS에서 여백을 사용하는 방법에 대한 심층적인 이해-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 여백을 사용하는 방법에 대한 심층적인 이해

高洛峰

Mar 22, 2017 pm 03:08 PM

1.css 여백은 컨테이너의 크기를 변경할 수 있습니다.
요소 크기
보이는 크기 - 표준 상자 모델 의 상자 너비는 포함되지 않습니다. 여백 값, clientWidth
점유 크기 - 여백의 너비 포함 outWidth는 표준에 없으며 jquery

margin에 해당 메서드가 있습니다. 및 시각적 크기
1.1 너비/높이
를 설정하지 않는 일반 블록 가로 요소 사용
2.2 가로 크기에만 적용 　
　　　

　　 텍스트

　　　　

　　 여백 값이 변경되면 상자의 너비도 변경됩니다.

애플리케이션: 한쪽의 너비가 고정된 적응형 레이아웃 구현 블록/인라인 블록 가로 요소에 적용 　　　
사이즈가 작아졌습니다. 이 기능을 활용하세요 스크롤 컨테이너 상단과 하단에 공백을 남겨주세요 ="300"> 　　　

　　내부 상자가 열리고 외부 상자에 스크롤 막대가 표시됩니다. 물론 Chrome이 아닌 브라우저에서는 공백 효과가 없습니다(위에는 표시되지 않음).

올바른 접근 방식은

p>

2장: CSS 여백 및 백분율 단위 - 여백 백분율 단위 이해
입니다. 가로 백분율/세로 백분율
　　보통 요소 백분율/절대 요소 백분율

　　　퍼센트 마진 계산 규칙
　　　 img{margin:10%;with:600px;heigth:200px;}
일반 요소의 마진율은 컨테이너 너비를 기준으로 계산됩니다! 따라서 여기의 여백: 10%;---->top:60px, left:60px은 모두 컨테이너 너비를 기준으로 계산됩니다.

　　　절대 위치 지정요소 마진 비율
　　　 img{margin:10%; 위치:absolute;}
절대 요소 마진 비율은 상대적입니다. 위치가 지정된 요소의 조상 요소에는 계산된 (상대/절대/고정) 너비가 있습니다. 일반 요소는 상위 요소를 기준으로 계산됩니다.
　　　

="margin:10%;position:absolute;"

.box{배경색:olive;
overflow
:hidden;}
.box > p{margin:50%}
여기에 관련된 또 다른 요점은 여백 겹침입니다. 여백 겹침을 방지하기 위해 여기에서 Overflow를 설정합니다Chapter 3 여백 겹침의 일반적인 특징
1. 가로 요소 차단(부동 및 절대 요소 제외)
2.

쓰기 모드를 고려하지 않음

(텍스트 쓰기 방향은 위에서 아래), 세로 방향에서만 발생합니다 (
margin-top
/margin-bottom) 여백 겹침 3가지 상황 1. 인접한 형제 요소 p{

line-height

:2em;margin:1em 0;Background:#f0f3f9;}
첫 번째 행

.father{배경:#f0f3f9} 　　　

🎜> 　　

　　 첫 번째 또는 마지막 하위 요소에 여백을 설정하는 것은 동일한 여백을 설정하는 것과 같습니다. 상위 요소의 여백 값은 동일하며, 하위 요소의 여백 값은 상위 요소와 동일합니다.
3. 빈 블록 요소
　　 .father{배경:#f0f3f9}
　　 < ;p class="father">
　　　

　　　 여기 아들 키는 2em이 아니라 1em에 불과합니다 > 1. 요소에 테두리 설정이 없습니다
2. 요소 패딩 값이 없습니다
3. 내부에 인라인 요소
가 없습니다. 4. 높이가 없거나
최소 높이

🎜> 1.2 상위 요소가 border-top 설정이 없습니다
1.3 상위 요소에
padding-top
값이 없습니다
1.4 상위 요소와 첫 번째 하위 요소 사이에 인라인 요소 구분이 없습니다

　　여백-하단 중첩
　　　　1.1 상위 요소 비블록 서식 컨텍스트 요소
　　　　　1.2 테두리-하단 설정이 없는 상위 요소
　　　　1.3 패딩-하단 가치 1.4 상위 요소와 마지막 하위 요소 사이에 인라인 요소 분리가 없습니다
1.5 상위 요소에는 높이, 최소 높이,
최대 높이 제한 사항 margin-top 제거 중첩
아버지{배경:#f0f3f9}
　　　

son< /p>
　　　　

1. 상위 요소는 비블록 형식 지정 컨텍스트 요소입니다.father:overflow:hidden;
2. 상위 요소에는 테두리 상단 설정이 없습니다
.father:border:4px solid # ccc;
3. 상위 요소에는 패딩 상단 값이 없습니다
4. 상위 요소와 첫 번째 하위 요소 사이에 인라인 요소 구분이 없습니다
　　< ;p class="father">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　int -상단과 동일
　　　　　

;/p>
　　　　　

　 여백 중복 계산 규칙
　　　　1. 가장 큰 양수 값을 취함
　　　　.a{margin-bottom:50px;}

　　　　.b {여백- top:20px;}

.father{ margin-top:20px;}
　　　 .son{margin-top:50px;}
　　　

< ;/p> ;

　　　.a{margin-top:20px;margin-bottom:50px}
　　　

위 결과는 margin:50px;

2. 양수 및 음수 값을 추가합니다
.a{margin-bottom:50px;}

.b{margin-top:- 20px;}

　　 .father{margin- top:-20px ;}
　　 .son{margin-top:50px;}
　　　

　　　< ;/p>

　　　.a{margin-top:-20px;margin-bottom:50px}
　　> 위 결과는 모두 30px입니다
3. 가장 음수 값

.a {margin-bottom:-50px;}

.b{margin-top:-20px;}
　　< p class="a">

　　.father{margin-top:-20px;}
　　.son{margin-top:-50px;}
　　

　　
　　 .a{margin-top:-20px;margin-bottom:- 50px}
　　

　　 위 결과는 모두 -50px입니다
여백 겹침의 의미는 무엇인가요? 1. 연속된 단락이나 목록, 여백이 겹치지 않으면 첫 번째 항목과 마지막 항목 사이의 간격이 다른 형제 태그와 1:2가 되어 레이아웃이 부자연스러워집니다.

2. 중첩되거나 직접적으로; 웹의 아무 곳에나 기본 항목을 놓으면 p는 원래 레이아웃에 영향을 주지 않습니다
3. 누락된 p 요소는 원래 읽기 레이아웃에 영향을 주지 않습니다

연습:
여백 겹침을 잘 활용하세요
.list{margin-top:15px;}

.list{
margin-의 더 나은 구현 상단: 15px;
　　　　　　　margin-bottom:15px;
4장: CSS의 여백:자동 이해
　　여백:자동의 메커니즘
　　폭이나 높이가 설정되지 않은 경우에도 요소가 자동으로 채워지는 경우가 있습니다
　　p{배경:#f0f3f9}

너비 또는 높이를 설정하면 자동 채우기 기능이 덮어쓰기됩니다.

p{width:500px;ground:#f0f3f9;}

이때 여백 값은 0px
너비 또는 높이이며, 자동 완성 기능이 재정의됩니다.

채워야 할 원래 크기는 너비/높이에 따라 강제로 변경되며, 이 변경된 크기를 채우도록 margin:auto가 설정됩니다. > :100px;margin-left:auto;}

한쪽이 고정되면 한쪽이 자동, 자동은 남은 공간의 크기입니다. 양쪽이 자동이면 남은 공간이 나누어집니다. 마찬가지로
이미지 img{width:200px;marign:0 auto}가 중앙에 있지 않은 이유 이미지가 인라인 가로이기 때문에 너비가 없더라도 전체 컨테이너를 차지하지 않습니다.

img 설정{

display

:block;width:200px;marign:0 auto;}

이때 이미지는 가로 블록이므로 너비가 없어도 공간을 차지하게 됩니다. 전체 컨테이너이며 한 줄로 표시할 수 없습니다.

컨테이너 높이가 고정되어 있고 요소 높이 margin: auto 0이 수직으로 중앙에 배치될 수 없다는 것이 분명한 이유는 무엇입니까
.father{height:200px;Background:#f0f3f9;}

.son{ height:100px; width:500px;margin:auto;}

가로 중앙에 위치하지만 세로 위치는 아닙니다.

설명: .son이 height:100px를 설정하지 않으면 높이가 자동으로 200px가 되나요? ——NO 따라서 여백은 자동으로 채워지지 않습니다. 너비와 높이가 강제로 설정되므로 자동으로 채워지지 않습니다.

참고: 가로 방향으로 자식이 부모보다 큰 경우 계산 결과가 음수 값이더라도 중앙에 맞춰지지 않습니다.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　는 세로 방향으로 여백:auto

　　　 .father{height: 200px; wiriting-mode:vertical-lr;}
　　.son{height:100px ;width:500px;margin:auto;}

　　 절대값과 여백이 중앙에 위치함

　　 .father{height: 200px;position:relative;}
.son{position:absolute; 위쪽:0px 오른쪽:0px 아래쪽 :0px;left:0px}
.son에는 너비/높이가 없으며 절대 요소가 자동으로 컨테이너를 채웁니다.

너비와 높이가 설정된 경우
.father{height:200px;position:relative;}
.son{position:absolute; top:0px right:0px Bottom:0px;left:0px ;width:500px;height:100px;}
예전에는 늘어나서 퍼졌다가 이제는 수축되었습니다.
margin:auto; 늘어난 공간을 균등하게 분배하여 수평 및 수직 중심 맞추기
.father{height:200px;position:relative;}

.son{position:absolute top:0px right:0px; 하단:0px;왼쪽:0px;너비:500px;높이:100px;여백:자동;}

IE8+ 이상을 지원합니다!
5장: 음수 값을 사용한 CSS 여백 위치 지정
1. 음수 여백으로 양쪽 끝 정렬(여백은 요소 크기를 변경함)
예
.box{
width:1200px: auto ;배경:주황색;
.ul{오버플로:숨김;}
.li{
너비:380px;높이:300px;
x; 배경:녹색; 부동: left;
}
}
구현된 목록 중 마지막 목록에 공백이 있습니다.
　　　그리고 음수 여백 값을 사용하여 컨테이너의 크기를 변경하고 컨테이너를 더 넓게 만듭니다. 이 문제를 완벽하게 해결할 수 있습니다
　　.box{
　　width:1200px; margin:auto;Background:orange;
　　.ul{overflow:hidden;margin-right:-20px;}
　　.li{
너비:386.66px;높이:300px;
여백-오른쪽:20px;
배경:녹색;
부동:왼쪽;
부동:왼쪽;
}
}
2.margin은 음수입니다. 값 아래의 동일한 높이 레이아웃 여백은 요소가 차지하는 공간을 변경합니다.
　　Margin 및 위쪽 및 아래쪽 여백
　　

　　.box{overflow:hidden;resize:vertical;}
.child- orange,
.child-green{margin-bottom :-600px;padding-bottom:600px;}
　　.child-orange{float:left; background:orange;}
　　.child-green{float :left;Background:green;}

큰 음수 여백-하단 값을 설정하고 누락된 공간을 채우기 위해 큰 패딩-하단 값을 설정하여 동일한 높이 레이아웃을 구현합니다. 원칙:

이 설정되지 않은 한 콘텐츠 블록 요소는 패딩에 표시될 수 있습니다. background:

clip, box-sizing:content 3. 네거티브에서 2열 적응. 여백 값 레이아웃, 요소는 공간을 차지하고 여백에 따라 이동

사진 오른쪽

　　
6장: 유효하지 않은 CSS 마린 상황 분석

1. 인라인 수평 요소의 수직 여백이 유효하지 않습니다.
2 전제 조건 1. img 요소가 아닌 등 비대체 요소 2. 일반 쓰기 모드
예시
marign:0px
스팬에 대한 margin233px;
설정은 가로로는 유효하지만 세로로는 유효하지 않습니다.
2.마진 겹침
3.display:table-cell
display:table-cell/display:tab-row 및 기타 선언 여백은 유효하지 않습니다!

예외 대체 요소 img, 버튼

4. 위치 및 여백

절대 위치 요소의 위치 지정되지 않은 방향의 여백 값이 "유효하지 않음"
여백 값 절대 위치에 있는 요소는 항상 유효합니다. 일반 요소와는 다릅니다.
5. 도달 범위를 벗어난 마진 실패
bfc 콘텐츠 블록 앞에 플로팅 요소가 있는 경우 다음 요소의 마진은 외부 p를 기준으로 계산됩니다.
6. 인라인 처리로 인한 여백 오류
p[style="height:200px;Background-color:#f0f3f9;"]>img[style="marign-top:30;"]
margin-top이 충분히 크면 실패합니다.
설명: 인라인 요소는 기준선과 정렬되어야 합니다. 그림 뒤에 x를 추가하면 여백 상단이 아무리 멀리 있어도 컨테이너 외부를 벗어나지 않는다는 것을 알 수 있습니다.

7장 margin-start 및 margin-end
　　margin-start
　　img{
　　margin-left：100px;
　　-webkit-margin-start:100px ;
　　　 -moz-margin-start:100px;
　　　　margin-sart:100px;
2. 수평 흐름이 오른쪽에서 왼쪽인 경우 margin-start는
방향과 동일합니다.
:ltr(rtl) 3. 수직 흐름(writring-mode:vertical-lr )에서 margin-sart는 margin-top과 동일합니다. 웹킷의 기타 마진 관련 속성
margin-
before
img{-webkit-margin-before:100px;} 기본 흐름 방향 이 경우 margin-top 　　　margin-after
　　　 img{-webkit- marign-after:100px;} 기본 흐름 방향의 경우 margin-bottom과 같습니다.
　　 margin-collapse 외부 테두리가 겹칩니다
-webkit-margin-collapse:collapse|discard|separate
여백 겹침 제어
기본 겹침 축소
폐기