이 글에서는 CSS 레이아웃의 표시 속성에 대한 자세한 설명을 제공하므로 표시 속성이 CSS 레이아웃에 미치는 영향을 이해할 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
디스플레이는 레이아웃을 제어하는 데 사용되는 CSS에서 가장 중요한 속성이라는 것을 알아야 합니다. 각 요소에는 요소 유형과 관련된 기본 표시 값이 있습니다. 기본값은 일반적으로 대부분의 요소에 대해 블록 또는 인라인입니다. 블록 요소는 일반적으로 블록 수준 요소라고 합니다. 인라인 요소는 일반적으로 인라인 요소라고 합니다. [더 많은 CSS 비디오 학습을 보려면 다음을 방문하세요: css tutorial]
다양한 표시 속성 값이 CSS 컨트롤 레이아웃에 미치는 영향을 살펴보겠습니다.
css 블록 속성 값
블록 요소는 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
특징:
1. 각 블록 수준 요소는 새 줄에서 시작되고, 후속 요소도 새 줄에서 시작됩니다. (실제로 블록 수준 요소는 한 행을 차지합니다.)
2. 요소의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백을 설정할 수 있습니다.
3. 설정되지 않은 경우 너비가 설정되지 않은 한 요소의 너비는 상위 컨테이너의 100%입니다(상위 요소의 너비와 동일).
예: div 요소
<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div> <div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>
렌더링:
css 인라인 속성 값
인라인 요소는 요소 앞뒤에 줄 바꿈 없이 인라인 요소로 표시됩니다. 인라인 요소는 단락 레이아웃을 방해하지 않고 단락 내에서 텍스트를 줄바꿈할 수 있습니다.
특징:
1. 요소의 높이, 너비, 위쪽 및 아래쪽 여백을 설정할 수 없습니다.
3. 포함된 텍스트나 이미지는 변경할 수 없습니다.
예: 스팬은 표준 인라인 요소입니다. a 요소는 가장 일반적으로 사용되는 인라인 요소이며 링크로 사용할 수 있습니다.
<div>测试文字，<span style="background-color: palegreen;">被span元素包围，设置span的背景颜色</span>，<a href="#">a链接</a></div>
Rendering:
css none 속성 값 일반적으로 사용되는 CSS 요소의 표시 값 중 하나는 none 입니다. 이는 스크립트와 같은 일부 특수 요소의 기본 표시 값입니다. display:none은 일반적으로 JavaScript에서 요소를 제거하지 않고 숨기거나 표시하는 데 사용됩니다. (None은 block과 함께 사용할 수도 있습니다. 요소를 숨기려면 display:none을 사용하고 숨겨진 요소를 표시하려면 display:block을 사용합니다. 예: 보조 탐색 메뉴)
가시성 속성과 다릅니다. 디스플레이가 없음으로 설정된 요소는 표시되어야 하는 공간을 차지하지 않지만, visible: Hidden을 사용하면 여전히 공간을 차지합니다.
inline-block 및 flex와 같은 더 흥미로운 표시 값이 많이 있습니다. 우리는 후속 기사에서 이 두 가지 속성 값에 대해 논의할 것입니다.
표시 값 변환앞서 설명한 것처럼 모든 요소에는 기본 표시 값이 있습니다. 하지만 언제 어디서나 다시 작성할 수 있습니다! 인라인 요소를 "인위적으로 생성"하는 것이 혼란스러워 보일 수 있지만 특정 의미 체계를 가진 요소를 인라인 요소로 변경할 수 있습니다. 일반적인 예는 li 요소의 기본 블록 값을 인라인 값으로 변경하여 가로 메뉴를 만드는 것입니다. 그리고 변환 방법도 매우 간단합니다. 다음 문장을 사용하세요:
display: inline;
요약: 위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. CSS에 대해 더 자세히 알고 싶다면
css 튜토리얼위 내용은 CSS 레이아웃의 표시 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!