博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
学习CSS布局 - position例子
阅读量:4703 次
发布时间:2019-06-10

本文共 1706 字,大约阅读时间需要 5 分钟。

position例子

通过具体的例子可以帮助我们更好地理解“position”。下面是一个真正的页面布局。

结果:

 

代码如下:

    
position例子
section 的 margin-left 样式确保了有足够的空间容纳 nav 元素。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
注意观察当你调整浏览器窗口时发生了什么。效果很赞!
这个例子在容器比nav元素高的时候可以正常工作。 如果容器比nav元素低,那么nav会溢出到容器的外面。 之后我们会讨论下其他布局技术,它们都各有优劣。

 

这个例子在容器比nav元素高的时候可以正常工作。

如果容器比nav元素低,那么nav会溢出到容器的外面。

之后我们会讨论下其他布局技术,它们都各有优劣。

 

 

原文地址: 

转载于:https://www.cnblogs.com/sorrowx/p/6801996.html

你可能感兴趣的文章
SYS_CONTEXT 详细用法
查看>>
Pycharm配置autopep8让Python代码更符合pep8规范
查看>>
我的第一篇博客
查看>>
【C++算法与数据结构学习笔记------单链表实现多项式】
查看>>
C#垃圾回收机制
查看>>
31、任务三十一——表单联动
查看>>
python之hasattr、getattr和setattr函数
查看>>
maven使用阿里镜像配置文件
查看>>
Copy code from eclipse to word, save syntax.
查看>>
arguments.callee的作用及替换方案
查看>>
P2709 小B的询问
查看>>
PHP echo 和 print 语句
查看>>
第一讲 一个简单的Qt程序分析
查看>>
Centos 6.5下的OPENJDK卸载和SUN的JDK安装、环境变量配置
查看>>
poj 1979 Red and Black(dfs)
查看>>
【.Net基础03】HttpWebRequest模拟浏览器登陆
查看>>
zTree async 动态参数处理
查看>>
Oracle学习之常见错误整理
查看>>
数据库插入数据乱码问题
查看>>
altium annotate 选项设置 complete existing packages
查看>>