Boolean Education_Yan Shiba_HTML 비디오 리소스 코스웨어

"Boolean Education_Yan Shiba_HTML Tutorial"은 가장 기본적인 개념부터 시작하여 단계별로 심화하여 모든 사람이 HTML 및 CSS 스타일에 대한 기본 지식을 배우고 일반적으로 사용되는 다양한 태그의 의미와 기본 사용법을 이해할 수 있도록 안내합니다. 후속 사례 강의의 기초를 마련하기 위해 CSS 스타일 코드가 추가되었습니다.

강좌 재생 주소: http://www.php.cn/course/222.html

선생님의 강의 스타일:

선생님의 강의는 간단하고 깊이 있고 명확합니다. 논리적 사고력을 사용하여 학생들의 관심을 끌고 이성을 사용하여 교실 교육 과정을 제어합니다. 선생님의 강의를 들으면서 학생들은 지식을 배울 뿐만 아니라 사고 훈련도 받으며 선생님의 엄격한 학업 태도에 영향을 받고 영향을 받습니다

이 영상에서 더 어려운 점은 오버플로 처리입니다:

질문이 제기됩니다.
가장 간단한 경우는 다른 요소 콘텐츠와 함께 큰 p에 작은 고정 너비 p 요소(예: 탐색, 참조 등)를 포함하는 것입니다. 예를 들어 다음 코드는

<p id="outer">     
  <p id="inner"> <h2>A Column</h2> </p>     
  <h1>Main Content</h1>     
  <p>Lorem ipsum</p>     
</p>

"#inner"에 너비 값(예: 20%)을 설정할 수 있지만 p는 블록 수준 요소이므로 너비를 설정하더라도 뒤에 있는 내용은 부동 속성(왼쪽으로 부동 또는 오른쪽으로 부동)을 설정하지 않는 한 다음 줄에만 표시될 수 있습니다. 그러면 위에서 언급한 문제가 이때 발생하게 됩니다.

"#inner"의 너비와 높이가 모두 "#outer"보다 작으면 문제가 되지 않습니다.

그러나 "#inner"의 높이가 "#outer"의 높이를 초과하면 하단이 "#outer"의 하단을 초과하게 됩니다. 이는 "#inner"에 float 속성을 설정하면 텍스트 흐름에서 벗어나 너비와 높이가 어떻게 변경되더라도 "#outer"는 변경 사항을 따르지 않기 때문입니다.

예제 1: 부동 소수점이 지워지지 않은 경우의 레이아웃 성능
이 예에서는 처음에는 "#inner"의 높이가 "#outer"보다 작기 때문에 문제가 없지만 "확장"을 클릭하면 "#inner"의 아래쪽 가장자리가 "#outer"의 범위를 초과했지만 "#outer"는 변경되지 않았음을 확인하세요. 이것이 우리가 언급한 "clear float(closed float element)" 또는 "close float" 문제입니다.

해결책:
1) 추가 태그 방법
첫 번째 방법은 W3C에서 권장하는 방법이기도 한, 추가 태그를 사용하는 것입니다. 이 방법은 콘텐츠 끝에 빈 태그를 추가하는 것입니다. 일반적인 방법은

<br style="clear:both;" />

와 같은 것을 사용하거나

<p style="clear:both;"></p>

를 사용하여 HTML 요소를 추가하여 외부 컨테이너를 강제로 여는 것입니다. 그러나 이 방법을 사용하면 태그가 추가되어 HTML 구조가 덜 간결해 보입니다.

여기에서 자료를 다운로드하는 것이 좋습니다: http://www.php.cn/xiazai/learn/1857

1. lionhit

2. minilionhit

3. xhtml

위 내용은 Boolean Education_Yan Shiba_HTML 비디오 리소스 코스웨어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!