一个满屏品字布局怎么设计？

来源：互联网发布：软件代理加盟编辑：程序博客网时间：2024/04/28 14:47

需要用到技术

1. 元素水平居中对齐

1) 使用margin对齐(推荐)

2) 使用left：50%

3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center
2. 元素对相对窗口定位

1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位

2) 使用absolute定位

3) 使用html和body的width和height填?这个窗口
3. 元素左右定位

1) 使用float左右浮动

2) 使用绝对定位进行左右定位（推荐）
第一种方式：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>满屏品字布局</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        html,body{            height: 100%;/*此设置非常关键，因为默认的body，HTML高度为0，所以后面设置的div的高度无法用百分比显示*/        }               .header{            height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/            width: 50%;                 background: #ccc;                       margin:0 auto;        }        .main{            width: 100%;            height: 50%;            background: #ddd;        }        .main .left,.main .right{            float: left;/*采用float方式，对元素进行左右定位*/            width:50%;/*此步解决元素相对窗口的定位问题*/            height:100%;/*此步解决元素相对窗口的定位问题*/            background: yellow;        }        .main .right{            background: green;        }    </style></head><body><div class="header"></div><div class="main">    <div class="left"></div>    <div class="right"></div></div></body></html>

效果如下：
这里写图片描述
第二种方式：

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>满屏品字布局</title>    <style type="text/css">        body{            height: 1200px;        }        .main {            position: fixed;  /*此步解决元素相对窗口的定位问题*/          left: 0;            top: 0;            height: 100%;            width: 100%;        }        .wrapper-up {            height: 50%;        }        .wrapper-down {            height: 50%;            position: relative;        }        .div-square-up {            width: 50%;            margin: 0 auto;            border: 2px solid red;            height: 96%;            box-sizing: border-box;        }        .div-square-left {            position: absolute;  /*此步解决元素左右定位问题*/          left: 0;            width: 48%;            height: 100%;            box-sizing: border-box;            border: 2px solid red;        }        .div-square-right {            position: absolute;   /*此步解决元素左右定位问题*/          right: 0;            width: 48%;            height: 100%;            border: 2px solid red;            box-sizing: border-box;        }      </style></head><body>    <div class="main">           <div class="wrapper-up">             <div class="div-square-up"></div>           </div>           <div class="wrapper-down">             <div class="div-square-left"></div>             <div class="div-square-right"></div>           </div>      </div> </body></html>

这里写图片描述

0 0