HTML 페이지의 레이아웃 기술은 무엇입니까?-HTML 튜토리얼-php.cn

HTML 페이지의 레이아웃 기술은 무엇입니까?

青灯夜游

풀어 주다： 2021-12-03 11:13:37

원래의

10496명이 탐색했습니다.

HTML 레이아웃 기술에는 다음이 포함됩니다. 1. 플로팅 레이아웃 기술은 상대적으로 호환되지만 페이지 너비가 충분하지 않으면 레이아웃에 영향을 미칩니다. 2. 절대 위치 지정 레이아웃 기술 3. 유연한 탄력적 레이아웃 기술, 우수한 적응성 및 높이 4. 테이블-셀 테이블 레이아웃 기술; 5. 그리드 레이아웃 기술;

HTML 페이지의 레이아웃 기술은 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML 페이지 레이아웃 기술

1. 플로팅 레이아웃 기술

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>浮动布局</title>
    <style type="text/css">
      .wrap1 div{
            min-height: 200px;
        }
        .wrap1 .left{
            float: left;
            width: 300px;
            background: red;
        }
        .wrap1 .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .wrap1 .center{
            background: pink;
        }  

    </style>
</head>
<body>

    <div class="wrap1">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            浮动布局
        </div>  
    </div>
    
</body>
</html>

로그인 후 복사

플로팅 레이아웃은 호환성이 더 좋지만 페이지 너비가 충분하지 않으면 플로팅이 더 많은 영향을 미칩니다.

2.절대 위치 레이아웃 기술

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>绝对定位布局</title>
    <style type="text/css">
      .wrap2 div{
            position: absolute;
            min-height: 200px;
        }
        .wrap2 .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .wrap2 .right{
            right: 0;
            width: 300px;
            background: blue;
        }
        .wrap2 .center{
            left: 300px;
            right: 300px;
            background: pink;
        } 

    </style>
</head>
<body>

    <div class="wrap2 wrap">
        <div class="left"></div>
        <div class="center">
            绝对定位布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

로그인 후 복사

절대 위치 레이아웃은 빠르지만 문서 흐름과 분리되어 효율성이 상대적으로 떨어집니다.

셋, 플렉스 엘라스틱 레이아웃 기술

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>flex布局</title>
    <style type="text/css">
      .wrap3{
            display: flex;
            min-height: 200px;
        }
        .wrap3 .left{            
            flex-basis: 300px;
            background: red;
        }
        .wrap3 .right{            
            flex-basis: 300px;
            background: blue;
        }
        .wrap3 .center{
            flex: 1;
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap3 wrap">
        <div class="left"></div>
        <div class="center">
            flex布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

로그인 후 복사

적응성이 뛰어나 높이 자동 확장 가능

넷째, 테이블-셀 테이블 레이아웃 기술

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>table-cell表格布局</title>
    <style type="text/css">
      .wrap4{
            display: table;
            width: 100%;
            height: 200px;
        }
        .wrap4>div{
            display: table-cell;
        }
        .wrap4 .left{           
            width: 300px;
            background: red;
        }
        .wrap4 .right{          
            width: 300px;
            background: blue;
        }
        .wrap4 .center{
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap4 wrap">
        <div class="left"></div>
        <div class="center">
            表格布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

로그인 후 복사

호환성은 좋으나 높이가 고정되지 않을 때가 있습니다. 콘텐츠로 강화되었습니다.

5. 그리드 레이아웃 기술

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>网格布局</title>
    <style type="text/css">
      .wrap5{
            display: grid;
            width: 100%;
            grid-template-rows: 200px;
            grid-template-columns: 300px auto 300px;
        }
        .wrap5 .left{   
            background: red;
        }
        .wrap5 .right{  
            background: blue;
        }
        .wrap5 .center{
            background: pink;
        }

    </style>
</head>
<body>

    <div class="wrap5 wrap">
        <div class="left"></div>
        <div class="center">
            网格布局
        </div>
        <div class="right"></div>
    </div>

</body>
</html>

로그인 후 복사

추천 튜토리얼: html 비디오 튜토리얼, css 비디오 튜토리얼

위 내용은 HTML 페이지의 레이아웃 기술은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!