CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2)

高洛峰

Feb 22, 2017 pm 01:34 PM

HTML태그 분류

태그 분류에 관해 이야기할 때, 초보자로서 태그를 처음 사용할 때 일부 태그에 일부 속성이 있다는 것을 알게 됩니다. 너비, 높이, 가로 가운데 맞춤 등은 작동하지 않습니다. 실제로 이 속성의 사용은 블록 수준 태그에 사용될 때만 작동합니다. 개인적으로 초보분들이 쉽게 지나칠 수 있는 부분이라 생각해서 적어보았습니다!

우선 HTML 태그를 디스플레이에 따라 블록 수준 태그, 인라인 태그, 인라인 블록 태그로 나눌 수 있습니다 ; 이제 각각 소개하겠습니다.

블록 수준 태그

기능: 가 한 개 점유 line, 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백의 설정 가능한 속성 값에 적용됩니다. 너비가 지정되지 않으면 블록 수준 요소의 기본값은 브라우저의 너비입니다. 100% width;

일반적인 블록 수준 태그는

, h 시리즈,

인라인 태그

특징: 은 여러 개일 수 있습니다. 각 레이블은 한 행에 존재합니다. 인라인 레이블의 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백은 완전히 종속됩니다. 내용에!

일반적인 인라인 태그는 다음과 같습니다: , , , , , , , ,

인라인 블록 태그:

기능: 결합된 인라인 및 블록 수준 기능 너비 및 높이 속성 값에만 적용할 수 있으며 여러 레이블을 한 줄에 표시할 수도 있습니다.

일반적인 인라인 태그는 CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2) ,

그러면 '폭이나 글꼴의 너비와 높이를 조절할 수는 없지 않을까?'라고 생각하는 학생들도 있을 것입니다. 예, 이번에는 플로팅 및 위치 지정을 제쳐두고 디스플레이 속성을 통해 서로 변환해 보겠습니다.

1. 블록 수준 태그를 인라인 태그로 변환: display: inline;

2. 인라인 태그를 블록 수준 태그로 변환: display:block;

3. 인라인 블록 태그로 변환: display: inline-block;

해당 태그에 대한 표시 속성을 사용하고 해당 값만 취하면 표시 모드를 서로 전환할 수 있습니다.

아래 예를 참조하세요.

1: 인라인 태그를 블록 수준 태그로 변환

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

실행 결과는 다음과 같습니다. 빨간색으로 표시된 영역을 클릭하면 바이두로 이동하여 링크 범위를 확장할 수 있습니다.

CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2)

2: 인라인 태그를 인라인 블록 태그로 변환

위에서 이미 언급했습니다. 인라인 블록 수준 태그와 블록 수준 태그의 차이점을 강조하세요. 블록 수준 태그와 인라인 블록 수준 태그 모두 길이와 너비를 설정할 수 있지만 블록 수준 태그를 설정한 후에

자동으로 래핑됩니다. 이 줄에는 다른 내용을 넣을 수 없습니다. 인라인 블록 수준 태그는 같은 줄에 여러 개의 인라인 태그를 넣을 수 있습니다. 구체적으로 설명할 경우가 있습니다.

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            p{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <p>我是p1</p>   <!--这个是一般的块级标签，会上下分行-->
        <p>我是p2</p>
    </body>
</html>

실행 결과:

CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2)

3. 블록 수준 태그를 인라인 태그로 변환

rreee

효과는 다음과 같습니다.

CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환(2)

여기서는 먼저 블록 수준 태그, 인라인 태그, 인라인 블록 수준 태그에 대해 작성하겠습니다. 읽어보신 후 더 많은 조언을 주시면 감사하겠습니다.

관련 글에 대한 더 많은 CSS 블록레벨 태그, 인라인 태그, 인라인 블록 태그 변환(2)은 PHP 중국어 홈페이지를 주목해주세요!

성명

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

관련 기사

Mailto에 관한 모든 것 : 링크Apr 22, 2025 am 11:04 AM

Garden Variety Anchor Link ()가 새 이메일을 열 수 있습니다. 이 기능으로 약간의 여행을하자. 사용하기 쉽지만 무엇이든 사용하기 쉽습니다

그것은 넷리레이션 CMS가 모든 플랫 파일 사이트 생성기에서 작동하는 방식이 매우 멋지다Apr 22, 2025 am 11:03 AM

여기에 작은 고백 : 내가 한 눈에 Netlify CMS를 처음 보았을 때, 나는 다음과 같이 생각했다. 그 다음에

퍼시의 시각적 회귀 테스트Apr 22, 2025 am 11:02 AM

테스트하는 것은 끔찍한 작업입니다

Edge Goes Goes Chromium : 프론트 엔드 개발자에게는 무엇을 의미합니까?Apr 22, 2025 am 10:58 AM

2018 년 12 월, Microsoft는 Edge가 Chrome을 강화하는 오픈 소스 프로젝트 인 Chromium을 채택 할 것이라고 발표했습니다. 업계의 많은 사람들이 반응했습니다

구텐부르크 구동 뉴스 레터Apr 22, 2025 am 10:57 AM

나는 새로운 WordPress 편집자 인 Gutenberg를 좋아합니다. 나는 접근성, ux 및 준비에 관한 모든 대화를 잊어 버리지 않지만 그것이 얼마나 힘든지 알고 있습니다.

메뉴 및 대화 상자에 을 사용하는 것은 흥미로운 아이디어입니다.Apr 22, 2025 am 10:56 AM

메뉴를 사용하는 것은 흥미로운 아이디어 일 수 있지만 실제로 생산에서 배송하는 것은 아닐 수도 있습니다. "자세한 내용"을 참조하십시오.

극작가를 통한 자동 시각적 회귀 테스트Apr 22, 2025 am 10:54 AM

시각적 회귀 테스트를 통해 페이지를 업데이트하고 사실 전후 스크린 샷을 찍고 의도하지 않은 변경 결과를 비교할 수 있습니다. 이 기사에서는 극작가를 사용하여 시각적 회귀 테스트를 설정하는 방법을 배우십시오.

CSS Houdini는 CSS를 작성하고 관리하는 방식을 바꿀 수 있습니다.Apr 22, 2025 am 10:45 AM

CSS Houdini는 CSS에서 가장 흥미로운 개발 일 수 있습니다. houdini

See all articles

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

드림위버 CS6

시각적 웹 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는