나는 이전 면접에서 면접관이 묻는 질문을 기억합니다. 업계의 요소는 무엇이며 그들과 블록 수준의 요소의 차이점은 무엇입니까? 이것은 매우 기본적인 인터뷰 질문이지만, 많은 초보자는 일반적으로 라벨 시맨틱에만 초점을 맞추고 블록 수준 내에서 레이블의 특성을 무시합니다. 따라서 위의 질문에 불완전하게 대답하거나 대답 할 수 없을 가능성이 높습니다.
HTML의 일반적인 인라인 요소는 다음과 같습니다.<span>, <a>, <img>, <input>, <textarea>, <select>, <label>
여기에는 <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <del>, <u> 등과 같은 일부 텍스트 요소도 포함됩니다.
<Span> 및 <Img> 만 대답하면 불합리합니다.
HTML의 일반적인 블록 수준 요소는 다음과 같습니다.<div>, <table>, <form>, <p>, <ul>,
<H1> ...... <H6>, <HR>, <pre>, <duddren>, <centre>, <carquee>, <blockquote> 등
<div> 만 대답하면 불합리합니다.
그렇다면 그들의 차이점은 무엇입니까?블록 레벨 요소
1. 항상 새로운 라인으로 시작합니다. 즉, 각 블록 레벨 요소는 한 줄을 차지하며 기본적으로 수직으로 아래쪽으로 배열됩니다.
2. 높이, 너비, 마진 및 패딩은 효과적인 설정과 여백 효과를 통해 제어 가능합니다.
3. 너비가 설정되지 않으면 기본값은 100%입니다.
4. 블록 레벨 요소에는 블록 레벨 요소와 인라인 요소가 포함될 수 있습니다.
· 인라인 요소
1. 다른 요소와 같은 줄에 있습니다. 즉, 라인의 요소 및 라인의 다른 요소는 수평선에 배치됩니다.
2. 높이와 너비는 통제 할 수 없으며 설정은 무효이며 내용에 의해 결정됩니다.
여백 설정은 마진 효과와 함께 왼쪽과 오른쪽에서 효과적입니다.
여백을 설정하면 공간 위아래로 가위를 지원하면 여백 효과가 발생하지 않습니다 (즉, 마진 탑/하단은 박스 모델에 값이 있지만 페이지에는 마진 효과가 없습니다).
왼쪽과 오른쪽으로 패딩을 설정하는 것이 효과적입니다. 패딩을 위아래로 설정하면 공간이 더 크지 만 여백 효과는 생성되지 않습니다 (위와 동일).
패딩 효과는 다음과 같이 표시됩니다.
<! docType html> <html> <head> <메타 charset = utf-8> </head> <style> span {경계 : 1px solid red; padding : 10px;} div {border : 1px solid blue;} </style> <bod> <div> 블록 레벨 요소 </div> </line element </span> in-span> in-inline> </span>. 요소 </div> </body> </html>3. 라벨 시맨틱의 개념에 따르면, 블록 수준의 요소가 아닌 인라인 요소 만 포함하는 것이 가장 좋습니다.
전환하다물론 블록 수준 요소와 인라인 요소 사이의 특성은 서로 변환 될 수 있습니다. HTML은 요소를 내 인루 요소, 블록 요소 및 인근 블록 요소의 세 가지 유형으로 나눌 수 있습니다.
디스플레이 속성을 사용하여 세 가지를 임의의 변환으로 변환합니다.
(1) 표시 : 인라인; 인라인 요소로 변환;
(2) 표시 : 블록; 블록 요소로 변환;
(3) 디스플레이 : 인라인 블록; 인라인 블록 요소로 변환합니다.
인라인 블록 요소는 인라인 요소와 인라인 요소의 특성을 결합합니다.(1) 라인 랩이 자동으로 포장되지 않으면 다른 선 요소가있는 수평선에 배열됩니다.
(2) 높이, 너비, 마진 및 패딩은 효과적인 설정과 여백 효과를 갖춘 제어 가능합니다.
(3) 기본 계약은 왼쪽에서 오른쪽으로입니다.
이것은 HTML 요소와 블록 레벨 요소의 차이점에 대한 세부 사항에 대한이 기사의 끝입니다. 관련 HTML 요소 및 블록 수준 요소는 Wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!