DIV 요소와 SPAN 요소의 차이점 및 적용

1738 단어 htmlDreamweaver
먼저 두 가지 개념을 말하는데 하나는 행내 원소이고 하나는 블록급 원소이다.업계 요소란 이 요소가 표시한 내용이 현재의 구조에 영향을 주지 않고 응용 양식, 보조 응용 양식표 등 작용에 속한다.그러나 블록급 원소는 하나의 블록 모양으로 단독으로 한 줄을 차지하는데 이 원소의 앞뒤에 각각 한 줄씩 바꾸는 것과 같다.
두 가지 가장 뚜렷한 차이점은 DIV(division)는 단락, 제목, 표, 심지어 장, 요약, 비고 등을 포함하는 블록 급 요소이다.반면에 SPAN은 인라인 요소로 SPAN의 앞뒤가 줄을 바꾸지 않으며 구조적인 의미가 없고 순전히 응용 스타일이기 때문에 다른 인라인 요소가 모두 적합하지 않을 때 SPAN을 사용할 수 있다.블록 원소는 내장 원소가 앞뒤에 각각
줄을 바꾸는 것과 같다.사실 블록 요소와 줄 안의 요소도 고정불변한 것이 아니다. 블록 요소에 display:inline을 정의하면 블록 요소는 내장 요소가 된다. 마찬가지로 내장 요소에 display:block을 정의하면 블록 요소가 된다.
구체적인 단계:
코드 예:

<style> 
div,span{border:1px solid #000;margin:2px;} 
</style> 
<div>div1</div><div>div2</div> 
<span>span1</span><span>span2</span> 
<br> 
<div style="display:inline">div3</div> 
<div style="display:inline">div4</div> 
<span style="display:block">span3</span> 
<span style="display:block">span4</span>

기교: 어떤 친구들은 DIV가 층 라벨이라고 말하지만 사실 HTML에는 층이라는 표현이 없다. 단지 이해하기 쉽도록 Dreamweaver에 이렇게 쓰여 있다. 모든 대상은'층'이 될 수 있고 대상에게position 속성(값은 absolute 또는relavite)을 정의할 수 있다.예를 들어, 그림을 레이어로 만들려면 다음과 같이 코드를 쓸 수 있습니다.

특별 힌트
이 예제 코드의 운행 효과는 그림에서 보듯이 문제를 더욱 잘 설명하기 위해 여기에 블록 요소와 내장 요소에 1픽셀 폭의 검은색 실선 테두리를 넣었다. 그림에서 볼 수 있듯이 DIV는 기본적으로 블록 요소이고 display 속성 값은 inline을 정의한 후 내장 요소이고 SPAN은 기본적으로 내장 요소이며 display 속성 값을 Block으로 정의한 후 블록 요소로 표시한다.
SPAN 태그는 아무 일도 하지 않는 중요하고 실용적인 특성을 가지고 있으며, 유일한 목적은 HTML 코드의 다른 요소를 둘러싸고 있어서 스타일을 지정할 수 있다는 것이다.
출처:http://www.aa25.cn/545.shtml
useCallback의 반응에 대한 이해
캐디와 함께 A+ SSL 받기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage