집 > 기사 > 웹 프론트엔드 > CSS의 유동 레이아웃이란 무엇입니까?

CSS의 유동 레이아웃이란 무엇입니까?

王林원래의: 2020-11-13 13:44:372519검색

CSS의 유동 레이아웃은 웹 페이지가 축소되거나 확대될 때 웹 페이지 레이아웃이 브라우저 크기에 따라 변경된다는 의미입니다. 유동 레이아웃의 장점은 사용자의 창이 작을 경우 옆으로 스크롤할 필요 없이 창에 맞게 페이지가 축소된다는 것입니다.

유동적 레이아웃:

간단히 말하면, 웹페이지를 축소하거나 확대할 때 브라우저의 크기에 따라 웹페이지 레이아웃이 변경됩니다!

(학습 동영상 공유: css 동영상 튜토리얼)

장점:

페이지가 전체 브라우저 창으로 확장되므로 큰 화면에서도 페이지 주위에 빈 공간이 없습니다. 창이 작으면 가로로 스크롤하지 않고도 페이지가 창에 맞게 축소됩니다.

사용자가 설정한 글꼴이 디자이너의 사전 설정보다 크더라도 이 디자인은 조정할 수 있습니다(페이지가 늘어날 수 있기 때문).

단점:

페이지의 각 부분의 너비를 조절하지 않으면 페이지 디자인이 예상한 효과와 크게 달라집니다. 예를 들어 일부 항목이나 요소가 뭉쳐지고 그 주위에 예상치 못한 공백이 나타납니다.

사용자의 창이 매우 좁은 경우 텍스트 줄이 매우 길어 읽기 어려울 수 있습니다.

사용자의 창이 매우 좁은 경우 단어가 꽉 눌려 한 줄에 몇 단어만 표시될 수 있습니다.

고정 너비 요소가 해당 요소를 수용할 수 없는 상자에 있는 경우 해당 요소가 상자 밖으로 넘치게 됩니다.

예:

다음 코드는 유동적인 레이아웃을 보여줍니다. 핵심 기술은 너비 단위를 백분율로 설정하는 것입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Liquid Layout</title>
        <style type="text/css">
            * {
                color: #fff;
                text-align: center;}
            body {
                width: 90%;
                margin: 0 auto;}
            #content {
                overflow: auto;}
            #nav, #feature, #footer {
                margin: 1%;}
            .column1, .column2, .column3 {
                width: 31.3%;
                float: left;
                margin: 1%;}
            .column3 {
                margin-right: 0%;}
            li {
                display: inline;
                padding: 0.5em;}
            #nav, #footer {
                
                padding: 0.5em 0;}
            #feature, .article {
                color:#fff;
                height: 10em;
                margin-bottom: 1em;
                }
        </style>
    </head>
    <body>
        <h1 style="color:#706fd3">软件开发，成就梦想</h1>
        <h2><a href="https://www.liyongzhen.com/" style="color:#000">学编程，上利永贞网</a></h2>
        <div id="header">
            <h1>Logo</h1>
            <div id="nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">产品</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="feature">
                <p>功能</p>
            </div>
            <div class="article column1">
                <p>第一列</p>
            </div>
            <div class="article column2">
                <p>第二列</p>
            </div>
            <div class="article column3">
                <p>第三列</p>
            </div>
        </div>
        <div id="footer">
            <p>&copy; Copyright 2019</p>
        </div>
    </body>
</html>

CSS의 유동 레이아웃이란 무엇입니까?

관련 기사