집 > 기사 > 웹 프론트엔드 > 표시:없음과 표시 여부:숨김의 차이점은 무엇인가요?

표시:없음과 표시 여부:숨김의 차이점은 무엇인가요?

零下一度원래의: 2017-05-08 15:20:211899검색

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

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

IE5.5는 inline-block을 지원하기 시작했는데, IE5.5는 2000년에 공식적으로 출시되었다는 사실을 아셔야 하는데,
W3C 이 속성은 2002의 CSS2.1 초안에 값이 추가되었습니다.

IE 5.5, 6, 7, 8(Q) 블록 수준 요소는 인라인 블록을 불완전하게 지원합니다. 유사한 효과를 얻으려면 이를 표시하도록 설정해야 합니다. :inline 그런 다음 Zoom:1을 사용하여
을 실행합니다(이것이 hasLayoutIE 브라우저 의 버그 이유입니다. 이에 대해 자세히 작성하겠습니다). IE 5.5, 6, 7, 8(Q)의 인라인 요소의 경우 인라인 블록의 효과를 얻으려면 이 속성 값을 직접 설정하거나 Zoom:1 등을 사용하면 됩니다.

다음은 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 사이에 공백이 있고,
```
 hello buddy
```
가 in입니다. 쓰기 줄 요소, 각 인라인 요소는 습관적으로 래핑됩니다.
```
 hello
 buddy
```
일반적으로 여러 연속 공백 문자(공백, 줄 바꿈, 캐리지 리턴 등)의 경우 브라우저는 단일 공백 문자로 결합됩니다. .
인라인 요소 사이의 공백을 제거하는 방법

인라인의 상위 요소에
font-size:0px;
```
         font-size:0px;
```
IE6, 7 및 safri5 이전 버전을 제외하고 이 방법을 사용하면 인라인 요소의 공백을 제거할 수 있습니다.
letter-spacing
을 수행합니다. 이 방법을 사용하면 safri5 이전 버전에서 인라인 요소 사이의 공백을 제거할 수 있습니다. . 인라인 요소 사이의 공백은 글꼴 크기와 관련이 있습니다. 글꼴 크기가 클수록 문자 간격의 음수 값의 절대값이 간격 크기보다 클 경우 내부 인라인 요소는 중복.
```
        letter-spacing:-2px;//这个2px等于元素之间的间隙
```
white-space
```
 font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
`*letter-spacing:normal;`
word-spacing:-1px;/* IE6、7 */
```
를 수행합니다. 위 작성 방법은 기본적으로 모든 브라우저에서 호환됩니다.
IE6과 7에서 글자 간격과 단어 간격 사이의 충돌을 피하기 위해서는 글자 간격을 해킹해야 한다는 점에 유의해야 합니다.

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

      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;`
      }

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

위 내용은 표시:없음과 표시 여부:숨김의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML+css는 멋진 계산기 예제 코드를 구현합니다.다음 기사：HTML+css는 멋진 계산기 예제 코드를 구현합니다.