>  기사  >  웹 프론트엔드  >  표시 여부:없음;

표시 여부:없음;

PHPz
PHPz원래의
2017-04-04 11:18:521047검색

당시 제가 답변한 것은 둘 다 요소를 숨길 수 있다는 것인데, 그 이후에 요소를 display:none;으로 설정하면 해당 요소가 이전에 차지했던 문서 흐름 공간이 에서 취소됩니다. 동시에 visibility:hidden; 요소가 표시되지 않더라도 여전히 공간을 차지하게 합니다.
전화 인터뷰였는데, 상대방이 디스플레이 관련 지식에 대해 더 이상 질문하지 않았습니다.
지금 생각해보면 나는 정말 행운아다. 누군가 나에게 디스플레이 관련 지식을 묻는다면, display:inline-block을 사용할 때 주의해야 할 점은 무엇일까? 나는 확실히 싸울 수 없을 것이다.

며칠 전 작성탐색을 연습할 때 항상 일부 인라인 요소나 블록 수준 요소를 인라인 블록 수준 요소로 설정해야 했는데, 그래서 display:inline-block라고 생각했는데, 이게 아직 어느 정도 지식이 있는
속성 값이라는 걸 알게 됐어요. 이 기사를 추천합니다.

  • 다음은 IE 5.5, 6, 7, 8(Q) 브라우저용입니다

    • 인라인 요소 display:inline-block

      hasLayout을 트리거하려면 인라인 요소에 대해 display:inline-block 또는 Zoom:1을 수행하기만 하면 인라인 요소의 너비와 높이를 설정할 수 있습니다.
      display:inline-block;

      zoom:1;*zoom 앞에
      를 추가하는 것은 이 속성을 IE 브라우저에서만 인식하도록 하기 위한 것입니다. 다른 방법도 있습니다. 자세한 설명은 다음과 같습니다*

    • 블록 수준 요소 display:inline-block

      블록 수준 요소는 블록 수준을 만들지 않는 display:inline-block을 통해 hasLayout을 트리거합니다. 줄 바꿈하지 않는 요소. 이는 불완전한 지원의 표현이기도 합니다.

      display:inline zoom:1;먼저 인라인 요소로 변환한 다음 만듭니다. 레이아웃을 가지고 있습니다.

  • 최신 브라우저와 결합하여 요소를 인라인 블록 수준 요소로 변환하려는 경우

     `display:inline-block;`/*兼容现代浏览器,IE6、7 行内元素*/
     `*display:inline;`/*兼容IE6、7块级元素*/
    만 하면 됩니다.

    ;*zoom:1[인라인 요소로 인한 또 다른 문제] 인라인 요소 사이에 일정량의 여백이 발생한다는 것입니다.
    마지막 글을 쓸 때는 이해가 안 됐는데, 방금 추천한 블로그를 읽어보니 이해가 되네요.
    브라우저는 단락의 단어나 라는 단어를 렌더링하는 것처럼 인라인 요소를 렌더링합니다. 글을 쓸 때 hello와 buddy 사이에 공백이 있고,

           <p>hello buddy</p>
    가 in입니다. 쓰기 줄 요소, 각 인라인 요소는 습관적으로 래핑됩니다.

           <span>hello</span>
           <span>buddy</span>
    일반적으로 여러 연속 공백 문자(공백, 줄 바꿈, 캐리지 리턴 등)의 경우 브라우저는 단일 공백 ​​문자로 결합됩니다. .

  • 인라인 요소 사이의 공백을 제거하는 방법

  • 由于这些文本属性都会继承下去,造成行内元素内部的文字内容受到影响,所以需要为行内元素内部重新设置字体属性值。

          font-size: 12px; letter-spacing: normal; word-spacing: normal;

    刚才推荐的那篇文章,总结了代码如下:
    .dib-wrap修饰行内元素的父级元素,.dib修饰行内元素,另外需要注意由于 inline-block 具有 inline 元素的特性,在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现,所以在「.dib-wrap」中统一重置为「vertical-align:top」即可

          .dib-wrap {
          font-size:0;/* 所有浏览器 */
          *word-spacing:-1px;/* IE6、7 */
          }
          .dib-wrap .dib{
          font-size: 12px;
          letter-spacing: normal;
          word-spacing: normal;
          vertical-align:top;
          }
          @media screen and (-webkit-min-device-pixel-ratio:0){
          /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
          .dib-wrap{
          letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
          }
          }
          .dib {
          display: inline-block;
          `*display:inline;`
          `*zoom:1;`
          }

위 내용은 표시 여부:없음;의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.