CSS3与页面布局学习总结（四）——页面布局的多种方法

时间：2016-12-01 21:48:24 阅读：393 评论：0 收藏：0 [点我收藏+]

标签：宽度 pad news targe ora css3 1.3 row abs

一、负边距与浮动布局

1.1、负边距

所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下：

1.1.1、向上移动

当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                height: 100px;
                background: lightblue;
                width: 100%;
                float: left;
            }
            
            #div2 {
                height: 100px;
                background: lightgreen;
                width: 30%;
                float: left;
                margin-left: -100%;
            }
        </style>
    </head>

    <body>
        <div id="div1">div1
        </div>
        <div id="div2">div2
        </div>
    </body>

</html>

运行效果：

技术分享

1.1.2、去除列表右边框

开发中常需要在页面中展示一些列表，如商品展示列表等，如果我们要实现如下布局：

技术分享

实现代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>负边距</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 780px;
            height: 380px;
            margin: 0 auto;
            border: 3px solid dodgerblue;
            overflow: hidden;
            margin-top: 10px;
        }
        .box {
            width: 180px;
            height: 180px;
            margin: 0 20px 20px 0;
            background: orangered;
            float: left;
        }
        #div2{
            margin-right: -20px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</div>
</body>
</html>

技术分享

1.1.3、负边距+定位，实现水平垂直居中

1.1.4、去除列表最后一个li元素的border-bottom

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>负边距</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #news {
            width: 200px;
            border: 2px solid lightblue;
            margin: 20px 0 0 20px;
            font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘;
            color: brown;
        }

        #news li{
            height: 26px;
            line-height: 26px;
            border-bottom: 1px dashed   lightblue;
        }
        .lastLi{
            margin-bottom:-1px ;/*意思是向上移回1px 跟框框重合了*/
        }
    </style>
</head>
<body>
<div id="news">
    <ul>
        <li>Item A</li>
        <li>Item B</li>
        <li>Item C</li>
        <li>Item D</li>
        <li class="lastLi">Item E</li>
    </ul>
</div>
</body>
</html>

运行效果：

技术分享

方法二：

使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不确定时更加方便。

如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。

练习：

要求效果：

技术分享

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>负边距</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 780px;
            margin: 0 auto;
            border: 3px solid dodgerblue;
            overflow: hidden;
            margin-top: 10px;
        }
        .box {
            width: 180px;
            height: 180px;
            margin: 0 20px 30px 0;
            float: left;
            position: relative;
            background: url(img/2.jpg) no-repeat;
            overflow: hidden;
            position: relative;
        }
        #div2{
            margin-right: -20px;
        }

        .footer
        {
            position: absolute;
            bottom: 0;
            height: 40px;
            line-height: 40px;
            transition: height 0.5s;
            font-family: ‘Heiti SC‘, ‘Microsoft YaHei‘;
            font-size: 14px;
            color: white;
        }
        
        .footer:hover{
            transition: height 0.5s;
            height: 60px;
            cursor: pointer;
        }
        
        .span1{
            width: 110px;
            height: 100%;  
            background: #3c3c3c;
            opacity: 0.8;
            float: left;        
        }
        .span2{
            width: 70px;
            height: 100%;  
            float: left;
            background: deeppink;
            text-align: center;
            opacity: 0.8;
        }     
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div class="box" >
            <div class="footer">
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
         
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>
        
        <div class="box" >
            <div class="footer">   
                    <div class="span1">安踏体育运动</div>
                    <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏体育运动</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏体育运动</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏体育运动</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏体育运动</div>
                <div class="span2">$139元</div>
            </div>
        </div>

        <div class="box" >
            <div class="footer">
                <div class="span1">安踏体育运动</div>
                <div class="span2">$139元</div>
            </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

1.2、双飞翼布局

经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；
5、要求用最简单的CSS、最少的HACK语句；

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼页面布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
            font: 20px/40px"microsoft yahei";
            color: black;
        }
        #container{
            width: 100%;
            margin: 0 auto;
            height: 100%;
        }

        #header,#footer{
            height: 12.5%;
            width: 100%;
            background: deeppink;
        }
        #main{
            height: 75%;
        }
        #center,#left,#right{
            height: 100%;
            float: left;
        }
        #center{
            width: 100%;/*这里center已经占满了中间这一栏 left right都是在它的上面*/
            background: #1fc195;
        }
        #left{
            background: lightgrey;
            width: 15%;
            margin-left: -100%;/*向左偏移自己的100% 回到上一行的开头*/
        }
        #right{
            background: #2e6da4;
            width: 15%;
            margin-left: -15%;/*向左偏移自己本身的长度   回到了上一行的末尾*/
        }
        #main-inner{
            padding-left: 15%;/*回到自己的开头*/
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            header
        </div>
        <div id="main">
            <div id="center">
                <div id="main-inner">
                    center
                </div>
            </div>
            <div id="left">
                left
            </div>
            <div id="right">
                right
            </div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>
</html>

运行效果：

技术分享

1.3、多栏布局

1.3.1、栅格系统

栏栅格系统就是利用浮动实现的多栏布局，在bootstrap中用的非常多，这里以一个980像素的宽实现4列的栅格系统，示例代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        #container {
            width: 980px;
            margin: 0 auto;
            height: 10%;
        }

        #container div {
            height: 100%;
        }

        .col25 {
            width: 25%;
            background: lightgreen;
            float: left;
        }

        .col50 {
            width: 50%;
            background: lightblue;
            float: left;
        }

        .col75 {
            width: 75%;
            background: lightcoral;
            float: left;
        }
    </style>
</head>

<body>
<div id="container">
    <div class="col25">
        A
    </div>
    <div class="col50">
        B
    </div>

    <div class="col25">
        D
    </div>
</div>
</body>

</html>

运行效果：

技术分享

1.3.2、多列布局

栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块，如果需要实现多列布局模块先看看这几个CSS3属性：

column-count：<integer> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<integer>：用整数值来定义列数。不允许负值
auto：根据 <‘ column-width ‘> 自定分配宽度

column-gap：<length> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal

column-rule：<‘ column-rule-width ‘> || <‘ column-rule-style ‘> || <‘ column-rule-color ‘>
功能：设置或检索对象的列与列之间的边框。与border属性类似。
适用于：定义了多列的元素

columns：<‘ column-width ‘> || <‘ column-count ‘>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<‘ column-width ‘>：设置或检索对象每列的宽度
<‘ column-count ‘>：设置或检索对象的列数

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多列布局</title>
        <style type="text/css">
            #div1{
                column-count: 3;  /*分3栏*/
                column-gap: 40px;  /*栏间距*/
                column-rule: 2px solid lightgreen;  /*栏间分隔线，与border设置类似*/
                line-height: 26px;
                font-size: 14px;
                height: 500px;
                background: lightcyan;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
        </div>
    </body>
</html>

运行效果：

技术分享

二、弹性布局（Flexbox）

假设在项目中有一个这样的需求：同一行有3个菜单，每个菜单占1/3的宽度，怎么实现？

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>flex</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            html,
            body {
                height: 100%;
            }
            
            #menu {
                width: 980px;
                margin: 0 auto;
                display: flex;  /*当前块为弹性盒*/
            }
            #menu li{
                flex: auto;  /*弹性盒中的单项*/
                float: left;
            }
            #menu li a{
                display:block;
                height: 26px;
                line-height: 26px;
                border:1px solid cornflowerblue;
                margin-right: 2px;
                text-decoration: none;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <ul id="menu">
            <li><a href="#" class="item">公司简介</a></li>
            <li><a href="#" class="item">商品展示</a></li>
            <li><a href="#" class="item">后台管理</a></li>
            <li><a href="#" class="item">企业文化</a></li>
            <li><a href="#" class="item">在线咨询</a></li>
        </ul>
    </body>

</html>

运行效果：

技术分享

CSS3与页面布局学习总结（四）——页面布局的多种方法

标签：宽度 pad news targe ora css3 1.3 row abs

原文地址：http://www.cnblogs.com/zhangyongl/p/6123522.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行