> 웹 프론트엔드 > CSS 튜토리얼 > CSS 블록 수준 태그, 인라인 태그 및 인라인 블록 태그 변환

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

高洛峰
풀어 주다: 2017-02-20 13:38:38
원래의
2210명이 탐색했습니다.

CSS 블록 수준 레이블, 인라인 레이블 및 내부 블록 레이블 변환

기본 1에서는 CSS의 공통 속성과 여러 가지 선택기에 대해 자세히 설명했습니다. 관련 개발 기술을 더 잘 배우고 익히는 데 도움이 되는 특성입니다.

HTML 태그 분류

태그 분류에 관해 이야기할 때, 초보자로서 태그를 처음 사용할 때 너비, 높이, 실제로 수평 중심화는 블록 수준 태그에서 사용될 때만 이 속성을 사용할 수 있습니다. 개인적으로 초보분들이 ​​쉽게 지나칠 수 있는 부분이라 생각해서 적어보았습니다!

먼저 HTML 태그를 디스플레이에 따라 블록 수준 태그, 인라인 태그, 인라인 블록 태그로 나눌 수 있는데, 이제 별도로 소개하겠습니다.

블록 수준 태그

특징: 한 줄을 차지하고 높이, 너비, 줄 높이, 위쪽 및 아래쪽 여백 등 설정 가능한 속성 값에 적용됩니다. width가 지정되면 블록 수준 요소가 됩니다. 기본값은 브라우저의 너비, 즉 100% 너비입니다.

일반적인 블록 수준 태그는

, h 시리즈,

  • ;,
    ,
    , < ;p> ,
    ,

      인라인 라벨

      기능: 한 줄에 여러 라벨이 존재할 수 있습니다. 그러나 인라인 라벨의 높이, 너비, 줄 높이 및 상단은 직접 설정할 수 없으며 하단 여백, 너비 및 높이는 내용에 전적으로 의존합니다.

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

      인라인 블록 태그:

      기능: 인라인과 블록 수준 기능을 결합하여 너비 및 높이 속성 값에 영향을 미칠 수 있을 뿐만 아니라 여러 태그를 사용할 수도 있습니다.

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

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

      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>
      로그인 후 복사

      실행 결과는 다음과 같습니다. 빨간색 영역을 클릭하면 점프합니다. Baidu에 연결하여 링크 범위를 확장할 수 있습니다.

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

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

      인라인 블록 수준 태그와 블록 수준 태그의 차이점은 위에서 언급했는데, 다시 강조하겠습니다. 블록 수준 태그와 인라인 블록 수준 태그 모두 길이와 너비를 설정할 수 있지만 블록 수준 태그

      를 설정하면 자동으로 줄 바꿈되므로 변경할 수 없습니다. 인라인 블록 수준 태그는 같은 줄에 여러 개의 인라인 태그를 배치할 수 있습니다. 구체적으로 설명할 경우가 있습니다.

      <html>
          <head>
              <title>块级和行内块级</title>
              <style type="text/css">
                  a{
                      width: 100px;
                      height: 100px;
                      background-color: green;
                      display: inline-block;  
                  }
                  div{
                  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>
              <div>我是div1</div>   <!--这个是一般的块级标签,会上下分行-->
              <div>我是div2</div>
          </body>
      </html>
      로그인 후 복사

      실행 결과:

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

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

      <!DOCTYPE html>
      <html>
          <head>
              <title>块级标签转行内标签</title>
              <style type="text/css">
                  div{
                      width: 100px;
                      height: 100px;
                      background-color: red;
                      display: inline;
                  }
              </style>
          </head>
          <body>
               <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了,所以长和宽失效-->
               <div>https://www.google.com</div>
          </body>
      </html>
      로그인 후 복사

      효과

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

      여기서는 먼저 블록 수준 태그, 인라인 태그, 인라인 블록 수준 태그에 대해 작성하겠습니다. 읽어보신 후 추가 조언 부탁드립니다.

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

  • 관련 라벨:
    css
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿