文档章节

CSS3与页面布局学习总结

 当当当当蛋糕
发布于 2016/12/07 13:48
字数 1537
阅读 17
收藏 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
作品 0
南京
私信 提问
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
01/04
0
0
关于position和float的初级理解和对未来的一些想法

在现在传统的网页布局里一般都离不开float和position,因为这段时间用纯html和css编写代码,对一些页面布局也有了自己的一些理解,并且也看了一些大神对于float和position的一些观点,所以写...

德拉费尔
2013/06/13
0
4
15 个 jQuery 和 CSS3 实现的页面切换效果

带页面切换效果的全屏布局 Tutorial || Demo 页面切换效果集合 Tutorial || Demo Pesudo-Elements 动画和转换 Tutorial || Demo CSS夹叠加效应效应转换 Tutorial || Demo 全屏 PageFlip 布局...

oschina
2013/06/03
31.9K
18
CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN
2014/06/10
0
0
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oh-my-zsh 自定义

GitHub 地址 基于 oh-my-zsh 的自定义配置,增加了一些个人常用插件与皮肤。 采用的是 git submodule 来维护,包括 oh-my-zsh,之所以这么搞,主要是手头有多台 linux 需要维护, 每台机器、...

郁也风
今天
4
0
Docker安装踩坑:E_FAIL 0x80004005的解决

参考 菜鸟教程--Windows Docker 安装 http://www.runoob.com/docker/windows-docker-install.html 官方文档-Install Docker Toolbox on Windows https://docs.docker.com/toolbox/toolbox_in......

karma123
今天
5
0
js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
17
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
27
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部