당시 제가 답변한 것은 둘 다 요소를 숨길 수 있다는 것인데, 그 이후에 요소를 display:none;으로 설정하면 해당 요소가 이전에 차지했던 문서 흐름 공간이 에서 취소됩니다. 동시에 visibility:hidden; 요소가 표시되지 않더라도 여전히 공간을 차지하게 합니다.
전화 인터뷰였는데, 상대방이 디스플레이 관련 지식에 대해 더 이상 질문하지 않았습니다.
지금 생각해보면 나는 정말 행운아다. 누군가 나에게 디스플레이 관련 지식을 묻는다면, display:inline-block을 사용할 때 주의해야 할 점은 무엇일까? 나는 확실히 싸울 수 없을 것이다.
며칠 전 작성탐색을 연습할 때 항상 일부 인라인 요소나 블록 수준 요소를 인라인 블록 수준 요소로 설정해야 했는데, 그래서 display:inline-block
라고 생각했는데, 이게 아직 어느 정도 지식이 있는
속성 값이라는 걸 알게 됐어요. 이 기사를 추천합니다.
- IE5.5는 inline-block을 지원하기 시작했는데, IE5.5는 2000년에 공식적으로 출시되었다는 사실을 아셔야 하는데,
- IE 5.5, 6, 7, 8(Q) 블록 수준 요소는 인라인 블록을 불완전하게 지원합니다. 유사한 효과를 얻으려면 이를 표시하도록 설정해야 합니다. :inline 그런 다음 Zoom:1을 사용하여
을 실행합니다(이것이
hasLayout
IE 브라우저 의 버그 이유입니다. 이에 대해 자세히 작성하겠습니다). IE 5.5, 6, 7, 8(Q)의 인라인 요소의 경우 인라인 블록의 효과를 얻으려면 이 속성 값을 직접 설정하거나 Zoom:1 등을 사용하면 됩니다.
hasLayout을 트리거하려면 인라인 요소에 대해 display:inline-block 또는 Zoom:1을 수행하기만 하면 인라인 요소의 너비와 높이를 설정할 수 있습니다.
display:inline-block;
zoom:1;*
zoom 앞에
를 추가하는 것은 이 속성을 IE 브라우저에서만 인식하도록 하기 위한 것입니다. 다른 방법도 있습니다. 자세한 설명은 다음과 같습니다*
블록 수준 요소는 블록 수준을 만들지 않는 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:0px; font-size:0px;
IE6, 7 및 safri5 이전 버전을 제외하고 이 방법을 사용하면 인라인 요소의 공백을 제거할 수 있습니다.
을 수행합니다. 이 방법을 사용하면 safri5 이전 버전에서 인라인 요소 사이의 공백을 제거할 수 있습니다. . 인라인 요소 사이의 공백은 글꼴 크기와 관련이 있습니다. 글꼴 크기가 클수록 문자 간격의 음수 값의 절대값이 간격 크기보다 클 경우 내부 인라인 요소는 중복.
letter-spacing:-2px;//这个2px等于元素之间的间隙
font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
`*letter-spacing:normal;`
word-spacing:-1px;/* 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;` }
위 내용은 표시 여부:없음;의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!