CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용-CSS 튜토리얼-php.cn

CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용

高洛峰

풀어 주다： 2017-02-16 13:32:12

원래의

1288명이 탐색했습니다.

프로젝트를 개발하면서 누구나 그런 요구에 직면했다고 생각합니다. X(X>1)개의 블록을 한 줄에 배치하고 인접한 블록 사이의 간격이 동일해야 합니다.

CSS 레이아웃 및 기타 구현에서 음수 여백을 마술처럼 사용

아마도 몇 가지 구현 방법은 다음과 같습니다.

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 중국어 웹사이트에 주목하세요!