CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용
- 高洛峰원래의
- 2017-02-16 13:32:121252검색
프로젝트를 개발하면서 누구나 그런 요구에 직면했다고 생각합니다. X(X>1)개의 블록을 한 줄에 배치하고 인접한 블록 사이의 간격이 동일해야 합니다.
아마도 몇 가지 구현 방법은 다음과 같습니다.
1. 음수 여백 방식
요소의 너비와 여백을 부모의 너비를 채우도록 설정한 다음 부모의 왼쪽 여백을 다음으로 설정합니다. 여백 공백 공백 너비
CSS 코드클립보드에 콘텐츠 복사
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
ul>li{
float: left;
}
ul>li>img{
width: 100%;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
</style>
<p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>
<ul class="test1 clearfix">
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
</ul>
위 오류는 서로 다른 요소를 기준으로 ul과 li의 마진 비율을 계산했기 때문에 발생합니다. 그러나 모바일 단말기에서는 창의 범위가 제한되어 있기 때문에 PC에서는 그 차이가 매우 작습니다. 일반적으로 사용되므로 무시할 수 있습니다. (아래에 더 많은 방법이 있습니다)
2. 주요 웹사이트 구현을 위해서는 요소를 입력하고 box-sizing을 사용해야 합니다.
CSS 코드클립보드에 콘텐츠 복사
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>
<ul class="test2 clearfix">
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
</ul>
이 구현은 아직 발견되지 않았습니다. 단점은? 코드가 간단하고 이해하기 쉽다(권장)
3. 유연한 상자 모델 플렉스 구현에는 호환성 처리가 필요합니다(기존 상자 + 새 상자)
CSS 코드클립보드에 콘텐츠 복사
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
width: 1200px;
border: 1px solid red;
margin-left: -3.33%;
}
.test4>li{
width: 30%;
margin-left: 3.33%;
}
</style>
<p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>
<ul class="test3">
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
</ul>
이러한 상황에서 유연성 없이 어떻게 할 수 있습니까? 상황이 어떻습니까? 유연한 상자 모델은 이러한 상황을 처리하기 위해 특별히 설계되어야 하지만 이전 상자 모델과 새 상자 모델이 있으며 각 브라우저는 이를 다르게 구현합니다. 따라서 일반적으로 두 박스 모델 세트의 속성을 모두 추가해야 합니다. (원하시면 그냥 하시면 효과 좋습니다)
4.classname 구현
특별한 처리가 필요한 요소에는 별도의 클래스를 추가한 후 하세요. 해당 거래. 백그라운드 또는 프론트엔드에서 처리 가능합니다(백엔드 처리 권장)
CSS 코드클립보드에 콘텐츠 복사
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>4.classname实现</p>
<ul class="test4 clearfix">
<li class="first"><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
</ul>
5.css 선택기 구현
:first-child :first-type-of :nth-child() 없음 이러한 구현의 기술 난이도는 CSS 문서를 확인하고 호환성에 주의할 수 있습니다.
CSS 코드 클립보드
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}
.test1{
padding: 0 2%;
margin-left: -3.3%;
}
ul>li{
float: left;
}
.test1>li{
width: 30%;
margin-left: 3.3%;
}
ul>li>img{
width: 100%;
}
.test2>li{
width: 33.3%;
padding: 0 2%;
box-sizing: border-box;
}
.test3{
display: flex;
justify-content: space-between;
}
.test3>li{
width: 31.3%;
padding: 0 2%;
float: none;
}
.test4{
padding: 0 2%;
}
.test4>li{
width: 30%;
margin-left: 5%;
}
.test4>li.first{
margin: 0;
}
.test5{
padding: 0 2%;
}
.test5>li{
width: 30%;
margin-left: 5%;
}
.test5>li:first-child{
margin: 0;
}
</style>
<p>5.css选择器实现(注意ie兼容性)</p>
<ul class="test5 clearfix">
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
<li><img src="img/test.jpg"/ alt="CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용" ></li>
</ul>
DEMO를 모두 붙여넣기
X=2로 설정하고 너비를 설정하고 왼쪽에 왼쪽으로 띄우고 오른쪽에 떠 있습니다.
사실 X=3인 경우 이를 처리하는 또 다른 방법이 있습니다. 왼쪽 요소와 오른쪽 요소는 각각 왼쪽과 오른쪽으로 부동하며, 가운데 요소는 상위 요소를 기준으로 절대적 위치와 중앙에 위치하도록 설정됩니다. .
불가분성으로 인해 박스 크기만큼 완벽하게 계산할 수는 없지만 프로젝트에 합리적으로 적용하는 데에는 문제가 없습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.
CSS 레이아웃 및 기타 구현 관련 기사에서 음수 여백을 더 마술적으로 사용하려면 PHP 중국어 웹사이트에 주목하세요!