【静态页面架构】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>