- 博客(5)
- 收藏
- 关注
原创 居中问题
不同的情形下居中有很多不同的方法,以下探讨了不同情况下的居中解决办法。 1.水平居中 1>行内元素 要使一个拥有块级容器的行内元素居中,可以使用:text-align: center;适用:inline、inline-block等重点内容重点内容2>块级元素 通过设置其margin-left和margin-right分别为auto可以实现居中margin: 0 auto;3>多个块级元素的居
2016-04-14 16:09:54 246
转载 Flex 布局教程:实例篇
作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局
2016-04-14 13:56:29 364
转载 Flex 布局教程:语法篇
作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现
2016-04-14 13:55:03 244
原创 如何实现三栏式布局
在分辨率不同的情况下,使用流动性布局是一个很好地选择,本文介绍常见的几种实现自适应的外部架构: 1.绝对定位 左右两边采用绝对定位的方式固定在两侧,中间部分利用margin来实现自适应宽度。<body> <div id="left"> </div> <div id="middle"> </div> <div id="right"> </div> </body>#left{ height:1000
2016-04-14 13:27:29 329
原创 清除浮动
在我们对元素使用浮动的时候经常会遇到一些问题,比如如下代码:<body> <div> <img src="images/thumbnail_bigben.jpg"> <p>你好</p> </div> </body>div{ width:200px; border:1px #00FFFF solid; } img{ display:block; float:right; } 浮
2016-04-14 11:15:44 183
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人