CSS의 인라인 블록이란 무엇입니까? 인라인 블록 레이아웃 사용

CSS에서 인라인 블록이란 무엇인가요? 이 기사에서는 CSS에서 인라인 블록이 무엇을 의미하는지 소개하고 CSS 레이아웃에서 인라인 블록을 사용하면 얻을 수 있는 이점에 대해 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 inline-block이 무엇인지 알아볼까요?

inline-block은 인라인 블록 요소를 나타냅니다. 예를 들어 img 및 input은 기본적으로 인라인 블록 요소입니다. 즉, 기본적으로 표시 속성의 값은 inline-block입니다. .

inline-block's Features: 한 줄을 차지하지 않고 너비와 높이를 설정할 수 있습니다. .

inline-block 요소의 이러한 기능 덕분에 CSS 레이아웃에서 큰 역할을 할 수 있습니다.

과거에는 사람들이 브라우저를 채우기 위해 많은 그리드를 만들고 싶어했습니다(아래 참조). 가장 먼저 떠오른 것은 float 속성을 사용하는 것이었지만 float에는 많은 그리드가 있습니다. 제한 사항. 플로팅 레이아웃을 사용한 후에는 플로팅이 다른 요소에 미치는 영향을 제거하기 위해 플로팅을 지워야 합니다.

실제로 인라인 블록을 사용하는 것도 위의 효과를 얻을 수 있고 더 간단해질 것입니다.

display 속성 의 값이 inline-block 으로 설정되어 있는 한 동일한 효과를 얻을 수 있으며 요소는 텍스트 흐름에서 벗어나지 마세요.

.box {
	width: 80px;
	height: 80px;
	border: 2px solid peru;
	display: inline-block;
	margin: 10px 8px;
}

Rendering:

은 float(부동)과 동일한 효과를 얻으며 필요가 없습니다. 일부 문제(예: 상위 요소 높이 축소)를 방지하려면 Clear:both(clear float)를 설정하세요.

인라인 블록 레이아웃을 구현할 때 명심해야 할 몇 가지 사항:

1 수직 정렬 속성은 인라인에 영향을 미칩니다. 블록 요소의 값은

2로 설정되어야 합니다. 요소 사이에 공백이 있는 경우

🎜🎜#3. html 소스 코드를 사용하면 열 사이에도 간격이 생깁니다.

간격 문제도 쉽게 해결할 수 있습니다.

다음에 {font-size:0}을 추가하세요. 즉, 글꼴 크기를 0으로 설정하면 공백도 0px가 되어 간격이 제거됩니다. 그러나 상자 자체에 텍스트가 있는 경우 동시에 자체 글꼴 크기를 적절한 값으로 설정해야 하며 그렇지 않으면 표시되지 않습니다.

.demo {
	width: 520px;
	overflow: hidden;
	border: 2px solid paleturquoise;
	font-size: 0;
}
.box {
	width: 80px;
	height: 80px;
	border: 2px solid peru;
	display: inline-block;
	font-size: 14px;
}

이제 이 방법은 다양한 브라우저와 호환됩니다. 이전에는 Chrome 브라우저가 호환되지 않았습니다

4 , 브라우저 호환성. : ie6/7은 display: inline-block과 호환되지 않으므로 추가 처리가 필요합니다:

ie6/7 이하 브라우저의 경우 다음이 필요합니다:

인라인 요소인 경우 직접 사용 {dislplay:inline-block;}
블록 수준 요소인 경우: {display:inline;zoom:1;}

Summary: 위 내용은 요약입니다. 이 글의 모든 내용이 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 비디오 튜토리얼을 보려면

css tutorial을 방문하세요!

위 내용은 CSS의 인라인 블록이란 무엇입니까? 인라인 블록 레이아웃 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!