마이너스 의 아름다움: 마이너스 margin 이 페이지 레이아웃 에서 의 응용
19390 단어 margin
음 수 는 항상 소극 적 이 고 부정 적 이 며 거부 감 을 주지 만 가끔 은 마이너스 margin 을 이용 하면 기묘 한 효 과 를 얻 을 수 있 습 니 다. 오늘 은 마이너스 가 페이지 레이아웃 에서 의 응용 을 나타 냅 니 다.여기 서 말 하 는 마이너스 값 은 주로 마이너스 margin 을 가리킨다.
마이너스 margin 의 원리 에 대해 서 는 이 글 을 보 시 는 것 을 권장 합 니 다. http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812
본 고 는 원 리 를 말 하지 않 고 주로 몇 가지 응용 을 보 여 준다.
1. 좌우 열 고정, 중간 열 적응 레이아웃
이 예 는 좌우 칸 너비 가 고정 되 고 중간 칸 너비 가 적응 하 는 레이아웃 에 적 용 됩 니 다.웹 페이지 의 주체 부분 이 보통 중간 에 있 기 때문에 많은 웹 페이지 는 중간 열 을 우선 불 러 와 야 하 는데 이런 구 조 는 이 수 요 를 만족 시 킬 수 있다.
HTML：
<div class="main">
<div class="main_body">Main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>CSS：
body{
margin:0;
padding:0;
min-width:600px;
}
.main{
float:left;
width:100%;
}
.main_body{
margin:0 210px;
background:#888;
height:200px;
}
.left,.right{
float:left;
width:200px;
height:200px;
background:#F60;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}효과:
2. 목록 오른쪽 테두리 제거
프로젝트 에 서 는 유동 목록 을 사용 하여 정 보 를 보 여 줍 니 다. 미관 을 위해 모든 목록 사이 에 일정한 간격 (margin - right) 을 설정 합 니 다. 부모 요소 의 너비 고정 식 이 있 으 면 각 줄 의 가장 오른쪽 에 있 는 li 요소 의 오른쪽 거 리 는 불필요 합 니 다. 제거 하 는 방법 은 보통 가장 오른쪽 에 있 는 li 에 class 를 추가 하고 margin - right: 0 을 설정 합 니 다. 이런 방법 은 어떤 li 요소 에 class 를 추가 하 는 지 동태 적 으로 판단 해 야 합 니 다. 귀 찮 습 니 다!!마이너스 margin 을 이용 하면 다음 과 같은 효 과 를 실현 할 수 있 습 니 다.
HTML：
<div id="test">
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> 4</li>
<li> 5</li>
<li> 6</li>
</ul>
</div>CSS：
body,ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
#test{
width:320px;
height:210px;
background:#CCC;
}
#test ul{
margin-right:-10px;
zoom:1;
}
#test ul li{
width:100px;
height:100px;
background:#F60;
margin-right:10px;
margin-bottom:10px;
float:left;
}효과:
3. 네 거 티 브 사 이 드 + 포 지 셔 닝: 수평 수직 가운데
절대 포 지 셔 닝 을 사용 하여 div 를 body 의 중심 에 위치 시 킨 다음 마이너스 margin (content 너비 의 절반) 을 사용 하여 div 의 중심 을 body 의 중심 으로 끌 어 올 려 수평 수직 으로 가운데 에 있 는 효과 에 도달 하 였 습 니 다.
HTML：
<div id="test"></div>CSS：
body{margin:0;padding:0;}
#test{
width:200px;
height:200px;
background:#F60;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}효과:
4. 목록 의 마지막 li 요 소 를 제거 하 는 border - bottom
목록 에서 우 리 는 border - bottom 값 을 자주 추가 합 니 다. 마지막 li 의 border - bottom 은 외부 테두리 와 겹 치고 시각 적 으로 보기 싫 으 며 제거 해 야 합 니 다.
HTML：
<ul id="test">
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>CSS：
body,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
#test{
margin:20px;
width:390px;
background:#F4F8FC;
border-radius:3px;
border:2px solid #D7E2EC;
}
#test li{
height:25px;
line-height:25px;
padding:5px;
border-bottom:1px dotted #D5D5D5;
margin-bottom:-1px;
}효과:
5. 다 열 등 높이
이 예 는 각 상자 에 큰 아래쪽 안쪽 거 리 를 설정 한 다음 수치 가 비슷 한 네 거 티 브 외곽 거 리 를 사용 하여 이 높이 를 제거 하 는 것 이 관건 이다.이 는 모든 열 에 용기 요 소 를 넘 치 게 할 수 있 습 니 다. 아웃 소 싱 용기 의 overflow 속성 을 hidden 으로 설정 하면 열 이 가장 높 은 곳 에서 잘 립 니 다.
HTML：
<div id="wrap">
<div id="left">
<p style="height:50px">style="height:50px"</p>
</div>
<div id="center">
<p style="height:100px">style="height:100px"</p>
</div>
<div id="right">
<p style="height:200px">style="height:200px"</p>
</div>
</div>CSS：
body,p{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:580px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-200px;
padding-bottom:200px;
}
#left {
float:left;
width:140px;
background:#777;
}
#center {
float:left;
width:300px;
background:#888;
}
#right {
float:right;
width:140px;
background:#999;
}
p {color:#FFF;text-align:center}효과:
기타 자원
1、 The Definitive Guide to Using Negative Margins
좋 은 자원 이 있다 면 보충 을 환영 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
레이아웃, 여백의 비밀값이 content-box인 경우 width, height 값을 적용할 때 padding과 border 값은 제외됨 (width, height 값을 설정하고 padding, border를 추가하면 그 값만큼 박스의 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
