인라인 요소와 블록 수준 요소 간 변환에 대한 자세한 튜토리얼-HTML 튜토리얼-php.cn

2015년 1월 5일, 베이징의 한 인터넷 스타트업에 인터뷰를 하러 갔다. 그곳에서 청년들이 함께 일하는 분위기를 느꼈다. 웹 프론트엔드 업무 경험을 통해 저는 제 능력을 과대평가하지 않고 앞으로 나아갈 수 있는 작은 능력에 의존했습니다. 그 결과 면접관님이 제가 접했던 질문들을 많이 주셨는데, 아쉽게도 저는 해당 지식에 대해 대략적인 이해만 할 뿐 실제 적용에 대해서는 아는 바가 거의 없었습니다. 인터뷰를 하면서 저는 늘 사람들의 시간을 낭비하고 있다는 생각이 들어서 당황스러웠습니다.

이 질문은 면접관이 Box Model에 대해 물었을 때 나온 것입니다. 더 잘 설명하기 위해 인라인 요소와 블록 수준 요소의 예를 들었지만 사람들은 여전히 "인라인 요소와 블록 수준 요소를 변환하는 데 어떤 방법을 사용할 수 있습니까?"라고 묻습니다. 저는 <a href="http://www.php.cn/wiki/927.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>만 답변해서 관련 서적을 찾아봤고, 여러 웹사이트의 소스코드를 보고 요약했습니다.

블록 수준 요소 및 인라인 요소

블록 수준 요소는 요소와 동일한 너비로 확장됩니다. .
인라인 요소는 콘텐츠를 "수축 포장"하여 최대한 단단히 포장합니다.
(위 두 요약은 "CSS 디자인 가이드" 책에서 발췌)

기본 CSS 스타일

블록 수준 요소의 높이는 콘텐츠의 높이이며 너비는 상위 요소와 동일한 너비로 확장됩니다. 결과적으로 블록 수준 요소는 자체 줄을 차지하며 다른 블록 수준 요소와 그 뒤에 있는 인라인 요소를 수용할 수 없습니다.
인라인 요소의 높이는 내용의 높이이며 너비는 내용을 축소합니다. 이상한 점: 인라인 요소 사이에 일정한 거리가 있는데, 콘솔을 사용하여 볼 때 이 거리는 박스 모델로 계산되지 않습니다. <a href="http://www.php.cn/wiki/931.html" target="_blank">margin<code><a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0:0;padding:0을 사용했는데 그렇지 않습니다. 취소 이 거리가? ? 알려주세요!

css 수정

교체 요소: 대체 요소는 요소의 태그와 를 기반으로 하는 브라우저를 의미합니다. 속성 요소의 특정 표시 내용을 결정합니다. 예를 들어 브라우저는 <img>사진 정보를 읽어 src 속성 값에 따라 표시하지만, (X) HTML 코드를 보면 내용을 볼 수 없습니다. 그림의 실제 내용은 <input>type 속성에 따라 입력 상자를 표시할지 라디오 버튼 등을 표시할지 결정됩니다. 여기에서 인용
대체할 수 없는 요소: p a span p 등, 해당 콘텐츠는 사용자에게 직접 표시됩니다(예: 브라우저).
따라서 인라인 요소는 인라인 대체 요소imginput와 인라인 비대체 요소spana로 구분됩니다. 둘 사이에는 CSS 수정에 차이가 있습니다.
인라인 비대체 요소: 너비 및 높이 설정이 유효하지 않습니다. 내부 및 외부 여백과 테두리를 설정할 수 있지만 세로 설정은 문서 흐름 레이아웃에 영향을 미치지 않습니다. 수직 내부 및 외부 여백을 설정합니다. 수직 테두리는 표시되지 않지만 문서 흐름을 차지하지 않습니다. 따라서 위의 인라인 요소는 너비가 10px인 테두리를 설정하므로 하위 요소가 아래로 이동하지 않습니다.
인라인 대체 요소는 인라인 요소를 병치하는 특성을 갖는 것 외에도 문서 흐름 레이아웃에 영향을 미치는 내부 및 외부 여백, 너비, 높이를 설정할 수 있습니다. 높이를 설정하는 것은 행 높이를 설정하는 것과 동일하며 수직으로 중앙에 배치됩니다.
line-height 인라인 비대체 요소에는 너비가 없지만 및 height는 line-height 높이 설정과 함께 사용할 수 있습니다. 그러나 이상한 점은 줄 높이가 인라인 요소의 문서 흐름 레이아웃에 영향을 미칠 수 있지만 테두리는 여전히 위쪽 및 아래쪽 흰색을 무시하고 내용을 감싸는 것입니다. 줄 높이로 인한 공간.
margin 병합되지 않는 인라인 요소의 여백입니다(교체되지만 대체되지는 않음). 블록 수준 요소와 달리 위쪽 및 아래쪽, 왼쪽 및 오른쪽 여백이 결합됩니다.
블록 수준 요소는 높이와 너비는 물론 테두리, 내부 및 외부 여백을 설정할 수 있으며 해당 설정은 문서 흐름 레이아웃에 영향을 줍니다.
너비를 수정해도 그 아래의 인라인 요소는 위로 이동하지 않습니다.
인라인 요소의 높이를 설정할 수 있나요? 물론 그렇지 않습니다! 물론 이 대답은 너무 절대적이다.
요소는 대체된 요소와 대체되지 않은 요소로 구분됩니다. 대체된 거의 모든 요소는 인라인 요소입니다.

인라인 요소와 블록 수준 요소 간의 변환

display:none; 요소가 표시되지 않으며 원래 요소가 차지했던 문서 흐름 위치도 유지되지 않습니다.
display:block;블록 수준 요소로 변환합니다.
display:inline 요소로 변환합니다.
display:inline-block;인라인 블록 수준 요소로 변환합니다.
위 4가지가 제가 자주 사용하는 것들이고 사실 더 많습니다.

display:block;과 display:inline;을 사용하면 두 가지 유형의 요소를 쉽게 변환할 수 있습니다. 실현 형태 .
그러나 인라인 요소나 블록 수준 요소를 변환하기 위해 display:inline-block;을 사용해야 하는 경우가 많습니다. 그러나 이 요소는 css2의 새로운 속성입니다. 이 속성은 IE7 이하 버전에서는 지원되지 않으므로 일부 호환 가능한 방법이 필요합니다. 곧 기사를 쓸 예정입니다
display
블록 수준 요소는 기본적으로 표시됩니다.인라인 비대체 요소(a,span)는 기본적으로 표시됩니다. :inline; ;인라인 대체 요소(입력)의 기본값은 display:inline-block;
<a href="http://www.php.cn/%20wiki/919.html%20" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
인라인 요소에 float:left/right를 설정한 후 표시 속성 인라인 요소의 블록 값이 할당되며 float 속성을 갖습니다. 인라인 요소는
<a href="http://www.php.cn/wiki/902.html" target="_blank">위치<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
인라인 요소의 위치를 지정할 때 위치:절대 및 위치:고정. 원래 인라인 요소를 블록 수준 요소로 만듭니다.

[참고] 위 설정을 통해 대체되지 않는 인라인 요소의 너비, 높이, 내부 및 외부 여백을 설정할 수 있습니다. 그러나 교체 시 블록 수준 요소로 변환하는 것은 플로트 및 위치의 부작용일 뿐이며 자체 효과도 레이아웃 효과를 방해한다는 사실에 주의해야 합니다.
이전에 블록 수준 요소를 소개했을 때 블록 수준 요소의 너비는 상위 요소를 상속한다고 말했습니다. 그러나 이 효과는 인라인 요소에 대해 display:block이 설정된 경우에만 발생합니다. 다른 변환에서는 기본적으로 이 효과가 발생하지 않습니다.

에디터에서 친구들이 직접 입력하고 비교하여 깊은 인상을 남기는 것을 추천합니다.