侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

CSS高级技巧:网页布局

前端  /  管理员 发布于 7年前   158


上一篇CSS教程 文章:CSS高级技巧:文字环绕图片布局
CSS至关重要的作用, CSS的设计初衷.
CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签!
CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法.居中
在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石.
1. 自动外补丁水平居中
一般情况下水平居中比较容易实现, 只需要给要居中的容器设定宽度, 以及自动水平外补丁就可以了.
比如HTML如下:


<body>
<div class="wrapper">
</div>
</body>

CSS如下:

body{}
.wrapper{width:760px;margin:0 auto;}

很简单不是吗? 但是有点小问题... 我们亲爱的IE家族里, IE5.x和IE 6不支持自动外补丁, 但是同样幸运的是, IE将 text-align:center 理解为所有东西居中, 而不只是文本. 哈哈, 可以利用这个Bug.
将CSS改为:

body{text-align:center;}
.wrapper{width:760px;margin:0 auto;text-align:left;}

这里就用到了一种Hack,不过不会影响其他浏览器的Hack就是好Hack,呵呵, 就先这么用着吧~
等等, 好像Netscape那边也出问题了, 用Netscape 6将窗口缩小到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 而且还不会有滚动条...万恶的浏览器大战啊...
再来改改我们的CSS:

body{min-width:760px;text-align:center;}
.wrapper{width:760px;margin:0 auto;text-align:left;}

这样就基本上ok了.
2. 定位法水平居中
我们也可以稍稍复杂的用定位法来完成这个工作. 所谓的定位法是用 position 属性来定义容器位置.
同样用上面一例的HTML代码,
我们用定位法的CSS如下:

body{margin:0;padding:0;}
.wrapper{position:relative;left:50%;width:760px;margin-left:-380px;}

为什么用相对定位( relative )呢? 能用绝对定位(absolute )吗?
绝对定位当然也可以, 但是绝对定位会将容器提出文档流, 让后面的文档流到定位容器的位置去了, 稍不注意就会被定为的容器遮盖住后面的内容, 而relative不会将容器提出文档流, 后面的文档流会给定位的容器留下它应有的空间.
3. 垂直居中
CSS中比较大的问题出现了, CSS较难使用简单的方法来完成垂直居中.
在容器中要使文字垂直居中, 那可以将容器的line-height设置的和height一样来完成这个工作,
但是要使容器垂直居中的话, 那就比较复杂了.
HTML如下:

<body>
<div class="wrapper">
<div id="box">123</div>
</div>
</body>

CSS如下:

body{margin:0;padding:0;height:100%;}
.wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}
#box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}

按理说这样就可以了呀, 但是IE下面一点效果都没有...那是因为IE的display属性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就头痛了呀.
唔, 其实思路有很多, 我提供其中一种:
CSS如下:

body{margin:0;padding:0;height:100%;}
.wrapper{width:600px;height:400px;border:solid 1px red;}
#box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;}

局限性非常大, 必须要已知高度...
更可以对IE浏览器进行filter之后hack它. 使用ie独有的expression, 虽然在大型脚本上expression表现的相当差, 但是简单的计算offsetHeight还是不太会影响性能, 再怎么说M$也针对expression进行过优化.
所以垂直居中还是要看场合自行挑选合适的方案来解决.

浮动布局
现在大家都熟知浮动布局了, 不多说, 这个是CSS布局的基础...主要是float和margin的合理应用.
Faux Columns:
伟大的Dan的另一项发明, 呵呵, 其实很简单, 用垂直平铺背景图来做出视觉上多栏布局等高的效果. 但是很实用, 不是吗?
Equal height boxes with CSS:
在标准推行过程中比较有名的文章之一, 介绍像table一样进行CSS布局, 但是不适用于IE...唉弹性布局
很不错的理念, 原理其实也不难, 就是用em来标注尺寸, 这样就可以让浏览器自行放大或缩小任何的容器或是元素了.
下一篇CSS教程 文章:CSS高级技巧:阴影效果


  • 上一条:
    CSS高级技巧:文字环绕图片
    下一条:
    css网页设计非常有用的解决办法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客