文档章节

CSS3与页面布局学习总结

 当当当当蛋糕
发布于 2016/12/07 13:48
字数 1537
阅读 15
收藏 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
CSS3 Media Queries 实现响应式设计

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

BearCatYN
2014/06/10
0
0
15 个 jQuery 和 CSS3 实现的页面切换效果

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

oschina
2013/06/03
31.2K
18
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 我居然在 osc 里追剧

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @舆情风控小组 :分享王菲的单曲《笑忘书》 《笑忘书》- 王菲 手机党少年们想听歌,请使劲儿戳(这里) @艾尔库鲁斯:如果给大家一个选择的机...

小小编辑
46分钟前
70
8
rabbitMq的客户端使用笔记

1、channel声明队列的queueDeclare方法的参数解析 durable: 是否持久化, 队列的声明默认是存放到内存中的,如果rabbitmq重启会丢失,如果想重启之后还存在就要使队列持久化,保存到Erlang自...

DemonsI
54分钟前
0
0
“全新” 编程语言 Julia开箱体验

本文共 851字,阅读大约需要 3分钟 ! 概 述 Julia 是一个 “全新”的高性能动态编程语言,前两天迎来了其 1.0 正式版的重大更新。Julia集 Python、C、R、Ruby 之所长,感觉就像一种脚本语言...

CodeSheep
今天
12
0
软件自动化测试初学者忠告

题外话 测试入门 很多受过高等教育的大学生经常问要不要去报测试培训班来入门测试。 答案是否。 高等教育的合格毕业生要具备自学能力,如果你不具备自学能力,要好好地反省一下,为什么自己受...

python测试开发人工智能安全
今天
5
0
java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部