CSS3与页面布局学习总结
CSS3与页面布局学习总结
当当当当蛋糕 发表于11个月前
CSS3与页面布局学习总结
  • 发表于 11个月前
  • 阅读 10
  • 收藏 0
  • 点赞 0
  • 评论 0

一、负边距与浮动布局
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>
复制代码
margin-left:-29%时运行效果:

margin-left:-30%时运行效果:

margin-left:-100%时运行效果:

1.1.2、去除列表右边框
开发中常需要在页面中展示一些列表,如商品展示列表等,如果我们要实现如下布局:

 

示例代码:

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>负边距</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #div1 {
                width: 800px;
                margin: 0 auto;
                border: 3px solid lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <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>
    </body>

</html>
复制代码
运行后的结果:

但是上面的效果中右边多出了20px的距离,底下多出20px空白,解决方法如下:

复制代码
<!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 lightblue;
                overflow: hidden;
                margin-top: 10px;
            }
            .box {
                width: 180px;
                height: 180px;
                margin: 0 20px 20px 0;
                background: lightgreen;
                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、负边距+定位,实现水平垂直居中
具体请参考《CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法》

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


方法一:

 View Code


方法二:

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

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

练习:

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>

    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }
            
            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            
            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }
            
            #main {
                height: 75%;
            }
            
            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }
            
            #center {
                width: 100%;
                background: lightgreen;
            }
            
            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }
            
            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }
            
            #main-inner {
                padding-left: 20%;
            }
        </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>

例如:

<div id="cui_nav">
  <div class="base_nav">
    <ul id="cui_nav_ul" class="cui_nav cui_content">
      <li id="cui_c_ph_hp">首页</li>
      <li class="divider "></li>
      <li id="cui_nav_hotel">酒店<div class="cui_subnav_wrap">
          <ul id="ul_nav_hotel" class="cui_sub_nav">
            <li id="ul_c_ph_hotel_h">国内酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hoteli_h">海外酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_apartment_h">海外民宿+短租</li>
            <li class="divider "></li>
            <li id="ul_c_ph_tuan_h">团购</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hotsale_h">特价酒店</li>
            <li class="divider "></li>
            <li id="ul_c_ph_tujia_h">途家公寓</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocanj_h">酒店+景点</li>
            <li class="divider "></li>
            <li id="ul_c_ph_inn_h">客栈民宿</li>
            <li class="divider "></li>
            <li id="ul_c_ph_meeting_h">会场+团队房</li>
          </ul>酒店订单 &gt;</div>
      </li>
      <li class="divider "></li>
      <li id="cui_nav_vac">旅游<span class="label-en" id="ACT_Label_31" style="display:none"><em>12-12</em><i class="triangle"></i></span><i class="cui_ico_triangle"></i><span class="point"></span><div class="cui_subnav_wrap">
          <ul id="ul_nav_vac" class="cui_sub_nav">
            <li id="ul_c_ph_vacations_v">旅游首页<span class="label-cn" id="ACT_Label_30" style="display:none"><em>5折起</em><i class="triangle"></i></span></li>
            <li class="divider "></li>
            <li id="ul_c_ph_around_v">周末游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_vacationsd_v">跟团游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocan_v">自由行</li>
            <li class="divider "></li>
            <li id="ul_c_ph_cruise_v">邮轮</li>
            <li class="divider "></li>
            <li id="ul_c_ph_taocanj_v">酒店+景点</li>
            <li class="divider "></li>
            <li id="ul_c_ph_huodong_v">当地玩乐</li>
            <li class="divider "></li>
            <li id="ul_c_ph_zhutiyou_v">主题游<span class="label-en" id="ACT_Label_21" style="display:none"><em>HOT</em><i class="triangle"></i></span></li>
            <li class="divider "></li>
            <li id="ul_c_ph_baotuan_v">定制旅行</li>
            <li class="divider "></li>
            <li id="ul_c_ph_youxue_v">游学</li>
            <li class="divider "></li>
            <li id="ul_c_ph_visa_v">签证</li>
            <li class="divider "></li>
            <li id="ul_c_ph_mice_v">企业会奖</li>
            <li class="divider "></li>
            <li id="ul_c_ph_hh_v">顶级游</li>
            <li class="divider "></li>
            <li id="ul_c_ph_golf_v">爱玩户外</li>
            <li class="divider "></li>
            <li id="ul_c_ph_insurance_v">保险</li>
            <li class="divider "></li>
            <li id="ul_c_ph_deals_v">特卖汇</li>
          </ul></i><a href="http://jiaxing.changtu.com/">嘉兴客运中心官网</a></div>
      </li>
           </li>

共有 人打赏支持
粉丝 0
博文 38
码字总数 13194
×
当当当当蛋糕
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: