스팬(span)은 블록 요소인가요?-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

스팬(span)은 블록 요소인가요?

青灯夜游

Nov 17, 2020 am 10:45 AM

html span 인라인 요소 블록 요소 인라인 요소

span은 블록 요소가 아니라 문서 내 인라인 요소를 결합할 수 있는 인라인 요소(인라인 요소)입니다. span은 레이아웃과 디스플레이에 영향을 주지 않고 작업을 위해 전체 콘텐츠를 정의할 뿐이며, HTML 코드의 다른 요소를 둘러싸서 스타일을 지정하는 기능은 없습니다.

스팬(span)은 블록 요소인가요?

(추천 튜토리얼: html tutorial)

span은 블록 요소가 아니고, 주로 텍스트를 수용하는 데 사용되는 인라인 요소(인라인 요소)입니다. 스팬은 문서의 인라인 요소를 결합하는 데 사용됩니다.

span은 콘텐츠를 전체적으로 정의하고 레이아웃과 표시에 영향을 주지 않고 작동합니다. 또한, HTML 코드에서 다른 요소를 둘러싸서 스타일을 지정하는 기능도 없습니다.

태그에는 고정된 형식이 없습니다. 스타일을 적용하면 시각적으로만 변경됩니다. 에 스타일을 적용하지 않으면 요소의 텍스트가 다른 텍스트와 시각적으로 다르지 않습니다.

태그는 텍스트의 일부나 문서의 일부를 분리하는 방법을 제공합니다.

예:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<p>我的母亲有 <span style="color:blue;font-weight:bold">蓝色</span> 的眼睛，我的父亲有 <span style="color:darkolivegreen;font-weight:bold">碧绿色</span> 的眼睛。</p>
</body>
</html>

로그인 후 복사

렌더링:

스팬(span)은 블록 요소인가요?

Block 요소, 인라인 요소, 인라인 블록 요소:

요소는 레이아웃, 블록 요소 및 인라인 요소에 일반적으로 사용되는 세 가지 레이블이 있습니다. 이 세 가지 요소의 특성을 이해해야만 페이지를 능숙하게 레이아웃할 수 있습니다.

1. 블록 요소:

블록 요소는 행 요소라고도 합니다. div, p, ul, li, h1-h6 등과 같이 레이아웃에서 일반적으로 사용되는 태그는 모두 블록 요소입니다. 레이아웃:

(1) 모든 스타일 지원

(2) 너비가 설정되지 않은 경우 기본 너비는 상위 너비의 100%입니다.

(3) 너비가 1인 경우에도 상자는 한 줄을 차지합니다. set

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <style type="text/css">
        .box{
            background-color: gold;
            /*width:300px;*/
            /*height:200px;*/
        }

        .box2{
            background-color: green;
            /*width:300px;*/
            /*height:200px;*/
        }
    </style>
</head>
<body>
    <div>div元素</div>
    <p>p元素</p
</body>
</html>

로그인 후 복사

페이지 표시 효과:

스팬(span)은 블록 요소인가요?

2. 인라인 요소:

인라인 요소는 a,span,em,b와 같이 레이아웃에서 일반적으로 사용되는 태그라고도 합니다. Strong, i 등은 모두 인라인 요소이며 레이아웃에서의 동작:

(1) 일부 스타일 지원(너비, 높이, 상단 및 하단 여백, 상단 및 하단 패딩은 지원되지 않음)

(2) 너비 및 높이는 내용에 따라 결정됩니다.

(3) 상자는 한 줄로 결합됩니다.

(4) 코드가 깨지고 상자 사이에 간격이 생깁니다.

(5) 하위 요소는 인라인 요소이며, 상위 요소는 text-align 속성을 사용하여 하위 요소를 서로 수평으로 설정할 수 있습니다.

인라인 요소 사이의 간격을 해결합니다. 방법:

(1) 인라인 요소 사이의 줄 바꿈 제거

(2) 글꼴 설정 -인라인 요소의 부모 크기를 0으로 설정한 다음 인라인 요소 자체의 글꼴 크기를 설정합니다.

코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联元素</title>
    <style type="text/css">
        .box{
            width:500px;
            height:400px;
            border:1px solid #000;
            margin:50px auto 0;

            font-size:0;  /* 解决内联元素间隙 */
        }

        .box div{
            width:100px;
            height:100px;
            margin:10px;
            background-color:gold;
        }

        .box a{
            background-color:gold;
            /*
            width:300px;
            height:200px;
            设置宽高完全不起作用 */

            /*
            margin:100px 20px;
            没有上下的边距，只有左右的边距 */

            /*padding:10px 10px;*/
            /* padding的上下不应该起作用的，却出现了bug */

            font-size:16px;/* 解决内联元素间距 */
        }

        .box2{
            width:500px;
            height:100px;
            border:1px solid #000;
            margin:50px auto 0;
            text-align:center;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <a href="#">链接文字一</a><a href="#">链接文字二</a>  /* 取消间隙 */
        <a href="#">链接文字三</a>
        <a href="#">链接文字四</a>
        <a href="#">链接文字五</a>
    </div>

    <div>
        <a href="#">链接文字</a>
    </div>
</body>
</html>

로그인 후 복사

3. 인라인 블록 요소:

인라인 블록 요소라고도 불리는 인라인 블록 요소는 새로운 요소 유형. img 및 input 요소는 이 범주에 속하지 않지만 인라인 요소와 유사하게 표시 속성을 사용하여 블록 요소 또는 인라인을 변환할 수 있습니다. 요소를 이 유형의 요소로 변환합니다. 레이아웃에서의 동작:

(1) 모든 스타일 지원

(2) 너비와 높이가 설정되지 않은 경우 너비와 높이는 내용에 따라 결정됩니다.

(3) 상자는 함께 결합됩니다

(4 ) 코드 나누기, 상자 간격이 발생합니다

(5) 하위 요소는 인라인 블록 요소이며 상위 요소는 text-align 속성을 사용하여 하위 요소의 가로 정렬을 설정할 수 있습니다.

이 세 요소는 표시 속성을 통해 서로 변환할 수 있습니다. 하지만 실제 개발에서는 블록 요소를 더 자주 사용하므로 인라인 요소를 블록 요소로 변환하고 대신에 소량을 사용합니다. 인라인 요소를 연결할 때는 블록 요소를 변환하는 대신 인라인 요소를 직접 사용하세요.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습 웹사이트를 방문하세요! !

위 내용은 스팬(span)은 블록 요소인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.