【靜態頁面架構】HTML之佈局

時間 2019-12-13

原文原文鏈接

一.佈局；

1.水平居中

第一種居中方式；

以text-align屬性設置父級元素和設置行內塊級元素佈局

<style>
        body{
            text-align: center;
        }
        #qq{
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align: center
            <!--將text-align屬性設置父級元素-->
            <!--設置文本內容水平方向居中-->
        }
        #q1,#q2{
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;
            <!--設置行內塊級元素-->
        }
        #q2{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="qq">
    <div id="q1">愛新覺羅</div>
</div>
<div id="q2">呼延覺羅</div>
</body>

第二種居中方式；

以設置塊級元素和外邊距特性來設置spa

<style>
        #qq{
            width: 100%;
            height: 200px;
            background-color: white;
        }
        #q1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*margin外邊距實現水平居中
              dispaky屬性值只能是block和table
             */
            display: block;
            /*設置塊級元素*/
            margin:0 auto;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="qq">
    <div id="q1">愛新覺羅</div>
</div>
<div id="q2">愛新覺羅</div>
</body>

第三種居中方式；

以設置絕對定位和trannsform屬性值來實現居中code

<style>
        #q1{
            width: 100%;
            height: 200px;
            background-color: white;
            position: relative;
            /*設置父級元素水平居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            /*設置絕對定位
              設置父級元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            /*設置絕對定位*/
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">愛新覺羅</div>
    <!--實現水平居中-->
</div>
<div id="q3">愛新覺羅</div>
<!--實現水平居中-->
</body>

第四種居中方式；

以設置相對定位和trannsform屬性值(translateX)orm

<style>
        #q1{
            width: 100%;
            height: 200px;
            background-color: white;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            /*設置相對定位
              設置父級元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            /*設置相對定位*/
            left: 50%;
            transform: translateX(-50%);
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">愛新覺羅</div>
    <!--實現水平居中-->
</div>
<div id="q3">愛新覺羅</div>
<!--實現水平居中-->
</body>

2.垂直居中；

第一種居中方式；

以設置父級元素爲單元格，垂直方向居中文檔

<style>
        body{
            height: 880px;
            display: table-cell;
            vertical-align: middle;
        }
        #q1{
            width: 200px;
            height: 660px;
            background-color: white;
            display: table-cell;
            /*相對於表格的單元格(<td>元素)
            單元格的內容能夠設置爲水平和垂直中對齊*/
            vertical-align: middle;
            /*垂直方向居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">愛新覺羅</div>
    <!--實現垂直居中-->
</div>
<div id="q3">愛新覺羅</div>
<!--實現垂直居中-->
</body>

第二種居中方式；

以設置子級相對定位和transform屬性值(translateY)it

<style>
        #q1{
            width: 200px;
            height: 660px;
            background-color: lightgrey;
            position: relative;
            /*子級元素垂直居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            /*設置絕對定位
              相對於父級*/
            top: 50%;
            transform: translateY(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">愛新覺羅</div>
    <!--實現垂直居中-->
</div>
<div id="q3">愛新覺羅</div>
<!--實現垂直居中-->
</body>

第三種居中方式；

以設置子級元素相對定位和transform屬性值(translateY)io

<style>
        #q1{
            width: 200px;
            height: 660px;
            background-color: lightgrey;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            /*設置相對定位*/
            top: 50%;
            transform: translateY(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">愛新覺羅</div>
    <!--實現垂直居中-->
</div>
<div id="q3">愛新覺羅</div>
<!--實現垂直居中-->
</body>

3.居中佈局；

第一種居中佈局；

以設置父級相對定位和子級絕對定位；transform屬性值translate;table

<style>
        #qian{
            width: 800px;
            height: 600px;
            background-color: lightgrey;
            position: relative;
            /*設置相對定位*/
        }
        #ying {
            width: 200px;
            height: 200px;
            background-color: red;

            position: absolute;
            /*設置絕對定位*/
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
            /*實現塊元素居中*/;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: blue;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="qian">
    <div id="ying"></div>
</div>
<div></div>
</body>

第二種居中佈局；

以設置父級單元格和外邊距特性form

<style>
        #qian{
            width: 800px;
            height: 600px;
            background-color: lightgrey;
            display: table-cell;
            /*相對於表格的單元格(<td>元素)
              單元格的內容能夠設置爲水平和垂直中對齊
             */
            vertical-align: middle;
            /*父級元素居中*/
        }
        #ying {
            width: 200px;
            height: 200px;
            background-color: blue;

            display: table;
            /*塊級表格的(table)*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="qian">
    <div id="ying"></div>
</div>
</body>

4.兩列布局；

第一種兩列布局；

設置左浮動和外左邊距class

<style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定寬 */
            width: 300px;
            background-color: lightcoral;
            float: left;
        }
        .you {
            background-color: gray;
            margin-left: 300px;
        }
        .zy {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;

            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">這是做爲左邊的定寬</div>
<div class="you">
    <div class="zy"></div>
</div>
</body>

第二種兩列布局；

以設置左浮動和開啓BFC模式來設置

<style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定寬 */
            width: 300px;
            background-color: blue;
            float: left;/*設置爲左浮動*/
            /*脫離文檔流*/

        }
        .you{
            background-color: gray;
            /* 開啓BFC模式*/
            overflow: hidden;
        }

        .zy {
            width: 100%;
            height: 200px;
            background-color: red;
            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">這是做爲左邊的定寬</div>
<div class="rc">
    <div class="you">
        <div class="zy"></div>
    </div>
</div>
</body>

第三種兩列布局；

以右浮動和外左邊距來設置

<style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定寬 */
            width: 300px;
            background-color: lightcoral;

            float: left;
            <!--設置左浮動-->
            /* 開啓定位 - 定位的層級結構高於浮動 */
            position: relative;
        }
        .rc {
            background-color: lightgray;
            /*
                脫離文檔流 - 寬度等於全部後代元素寬度之和
                * 右邊列必須是隻適應 - 不能設置定寬
                * 不設置寬度的話，默認爲 0
                解決 - width: 100%
             */
            width: 100%;/* 爲頁面寬度的100% */
            float: right;
            /*
                margin-left - 控制當前元素的位置
             */
            margin-left: -300px;
        }
        .you {
            background-color: gray;
            margin-left: 300px;
        }
        .zy {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;

            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">這是做爲左邊的定寬</div>
<!-- 爲做爲右邊自適應列，添加父級容器元素 -->
<div class="rc">
    <div class="you">
        <div class="zy"></div>
    </div>
</div>
</body>

第四種兩列布局；

以設置父級爲display屬性值(table)

<style>
        /* 1.將左右兩列元素的父級設置display值爲table */
        .pt {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .zuo, .you {
            height: 300px;
            /* 2.將左右兩列元素設置display值爲table-cell */
            display: table-cell;
        }
        .zuo {
            /* 定寬 */
            width: 300px;
            background-color: red;
        }
        .you {
            background-color: gray;
               /*
           因爲設置display值爲table-cell，默認的寬度爲全部後代元素寬度之和
                  這一列做爲自適應的一列
                 不能設置當前列的寬度爲定寬
                */
            /*width: 100%;*/
        }

    </style>
</head>
<body>
<div class="pt">
    <div class="zuo">這是做爲左邊的定寬</div>
    <div class="you"></div>
</div>
</body>