>  기사  >  웹 프론트엔드  >  CSS 레이아웃 기술 요약 및 공유

CSS 레이아웃 기술 요약 및 공유

一个新手
一个新手원래의
2017-09-06 09:36:171235검색

단일 열 레이아웃

가로 중심

  1. 상위 요소 text-align:center; 하위 요소: inline-block;

  • 장점: 호환성이 좋음

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            text-align: center;
        }
        .child {
            display: inline-block;
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
    </head>
    <body>
    <p class="parent">
        <p class="child"></p>
    </p>
    </body>
    </html>
    E
  • 감염 마진: 0 자동;
  1. 장점: 좋은 호환성
  • 단점: 너비를 지정해야 함

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>
    E

  • 하위 요소 {display: table; margin: 0 auto;}
  1. 장점: 직접 설정하기만 하면 됩니다.
  • 단점: IE6 및 7에서는 구조를 조정해야 합니다.

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                margin:0 auto;
                display:table;margin:0 auto;s
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>

  • 상위 요소: 상대 요소: 왼쪽:50%;여백-왼쪽:- 너비가 절반입니다
  1. 장점: 호환성이 좋음
  • 단점: 하위 요소의 너비를 알아야 합니다.

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                position: relative;
                top: 0;
                left: 0;
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -150px;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>

  • 상위 요소: 상대 요소: 절대; 왼쪽: 50%; 변환: 변환(-50%, 0);
  1. 장점: 호환성이 좋지 않음
  • 단점: 하위 요소의 너비를 알 필요가 없음

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                position: relative;
                top: 0;
                left: 0;
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%,0);
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>

  • 가변 상자: 상위 요소: 디스플레이: flex; justify-content: center;
  1. 장점: 단순함
  • 단점: 호환성이 좋지 않음

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平居中1</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            background: red;
            display: flex;
            justify-content: center;
        }
        .child {
            width: 300px;
            height: 100px;
            background: blue;
        }
    </style>
    </head>
    <body>
    <p class="parent">
        <p class="child"></p>
    </p>
    </body>
    </html>

  • 수직 센터링

vertical-align: center;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>水平居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                display:table-cell;
                vertical-align:middle;
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>垂直居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                vertical-align:middle;
                line-height:450px;            
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                display:inline-block;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>
    <!-- 这种方法需要知道父元素和子元素的高度,父元素的line-height的值为父元素高度减去子元素高度的一半。-->
  1. 상위 요소: position:relative; 하위 요소: positon:absolute;top:50%; 변환:translate(0,-50%);
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>垂直居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                position: relative;
                top: 0;
                left: 0;          
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                position: absolute;
                top: 50%;
                left:0;
                transform: translate(0,-50%);
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>
  1. 상위 요소: position:relative; 절대;상단:50%;margin-top:-하위 요소 높이의 절반;
  1. 상위 요소: 디스플레이:flex;align-items:center;

  2. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>垂直居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                display: flex;
                align-items: center;        
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>
  3. 가로 및 세로 중앙

상위 요소: 디스플레이:table-cell;vertical-align:middle;text-align:center;

하위 요소;display:inline-block;

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>垂直居中1</title>
        <style>
            .parent {
                width: 500px;
                height: 400px;
                background: red;
                display:table-cell;
                vertical-align:middle;
                text-align:center; 
            }
            .child {
                width: 300px;
                height: 100px;
                background: blue;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p class="parent">
            <p class="child"></p>
        </p>
    </body>
    </html>


    상위 요소: 위치:상대적;
  2. 하위 요소: 위치 :순수한

위 내용은 CSS 레이아웃 기술 요약 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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