CSS3 인라인 블록이 직면하는 함정에 대하여-CSS 튜토리얼-php.cn

CSS3 인라인 블록이 직면하는 함정에 대하여

小云云

풀어 주다： 2018-02-02 14:08:43

원래의

4144명이 탐색했습니다.

인라인 블록에 익숙하지 않은 사람이 많을 수도 있습니다. flex나 float를 사용하는 사람이 많습니다. flex가 매우 강력하다는 것은 의심의 여지가 없지만, float는 호환성이 그다지 만족스럽지 않습니다. 플로팅은 매우 번거롭습니다. 따라서 우리의 Segmentfault와 같은 일부 대형 웹사이트의 홈페이지 탐색 표시 레이아웃으로 inline-block을 사용했지만 갑자기 발견했습니다. 우선 코드를 먼저 게시하세요

<p style="background-color:green">
      <p style="width:40px;height:30px;background-color:red;">

      </p>
      <p style="width:40px;height:30px;background-color:red;">

      </p>
      <p style="width:40px;height:30px;background-color:red;">

      </p>
</p>

로그인 후 복사

CSS3 인라인 블록이 직면하는 함정에 대하여
이때 레이아웃에 인라인 블록을 사용했는데 뭔가 마법 같은 일이 일어났습니다

<p style="background-color:green;">
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
    </p>

로그인 후 복사

CSS3 인라인 블록이 직면하는 함정에 대하여

원본 3p가 나란히 있습니다. 옆에 3p가 되기 때문에 인라인 요소가 있어서 나란히 있어야 하는데...
여기서 두 가지 문제가 있습니다:

사이에 간격이 있습니다. 자식 p와 부모 p 사이의 간격은 4px입니다. 간격

여기서 이런 문제가 발생하는 이유는 인라인 블록에서 가로로 표시되는 요소 사이에 줄 바꿈이나 공백으로 구분하여 표시할 때 간격이 있기 때문입니다

p 사이의 간격에 대한 해결책

여기에서 시도한 한 가지 방법은 margin-right를 음수 값으로 설정하는 것입니다.

<p style="background-color:green">
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
    </p>

로그인 후 복사

CSS3 인라인 블록이 직면하는 함정에 대하여

여기서 첫 번째 p와 p 사이에 여전히 1px 간격이 있음을 볼 수 있습니다. 두 번째 p, 두 번째 p 첫 번째와 세 번째 사이에는 거리가 없고 자식 p와 부모 p 사이에는 거리가 없습니다. 이는 우리의 문제가 여기에 없다는 것을 보여줍니다

저는 Zhang Xuxin의 블로그와 저는 깊은 인상을 받았고 이 방법이 최고라고 생각했습니다.

이것을 상위 p에 추가하십시오. css 속성

font-size:0
-webkit-text-size-adjust:none;

로그인 후 복사

po code

<p style="background-color:green;font-size:0;-webkit-text-size-adjust:none;">

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

로그인 후 복사

CSS3 인라인 블록이 직면하는 함정에 대하여

그런 다음 또 다른 질문이 있습니다. -webkit-이 무엇입니까? text-size-adjust????

웹킷 커널이 있는 브라우저(크롬)에서 CSS에 정의된 중국어 글꼴 크기가 12px 미만인 경우 브라우저는 여전히 12px를 사용하므로 -webkit-text-를 사용할 수 있습니다. size-adjust:none;

하하, 이렇게 하면 문제가 해결됩니다

마지막으로 inline-block의 호환성에 대해 이야기해 보겠습니다. 이 기사를 참조하세요
-->
IE6과 IE7은 inline-block을 인식하지 못합니다. 하지만 블록 요소를 트리거할 수 있습니다. 다른 주류 브라우저는 인라인 블록을 지원합니다. 이것만으로도 충분합니다. ie6과 7은 고려되지 않습니다...