• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何使整个页面内容居中使高度适应内容自动伸缩

如何使整个页面内容居中使高度适应内容自动伸缩

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含页面内容居中,高度适应内容等相关知识,佚名 希望在学习及工作中可以帮助到您
如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。

首先先按这里看实际运行效果,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码:

主要的层定义完毕,这个布局就ok了。补充一点:你看到我还定义了一个.text{margin:0px;padding:20px;},这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢,因为mozilla和IE对css盒模型的解释不一致,直接定义margin/padding会造成mozilla里布局变形。我一般采用内部再套一层的做法来解决

您可能想查找下面的文章:

  • 如何使整个页面内容居中使高度适应内容自动伸缩

相关文章

  • 2018-08-23高手经验:如何训练你的眼睛,提升设计审美?
  • 2018-08-23你的文案太平了?四个窍门让文案“活”起来!
  • 2018-08-23我明明就设计的很好看啊,但为什么上线还是被骂了?
  • 2018-08-23专业的交互输出文档应该怎么写?高级设计师来教你!
  • 2018-08-23扁平风格的问题在哪?来看这个分析!
  • 2018-08-23如何顺利开一场交互评审会?这儿有网易设计师的总结!
  • 2017-08-06网页设计中的tab应用的两种类型
  • 2018-08-23平面高手课堂!系统梳理 LOGO 里的正负形知识
  • 2018-08-23学会这4个心理学小知识,你的设计会更有说服力!
  • 2017-08-06浅谈H标签定义和注意事项

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 不是中国才有的特色:文化差异下的网页开发
    • 耐看好用!专业平面设计师常用的那些中文字体
    • 作品落地效果不行?你要好好学习印刷基础知识和技巧了!
    • 网易实战案例:教你五步打造APP节日主题设计
    • 用腾讯高手的交互自查表,快速搞定设计中的分支流程和异常情况
    • 福利干货!搞定电商标题设计的6个奥秘都在这里了!
    • 大开眼界!视觉误差对UI设计的影响和解决方案(附案例)
    • 这5个牢不可破的设计规则,是你打造优秀动效的标准
    • 用实战经验告诉你,如何快速成为Behance 的设计网红?
    • UX专家如何做设计评审?来看这份深度总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有