学习网址:http://zh.learnlayout.com/no-layout.html
本文仅为学习笔记,内容非原创。
position
默认值:static
没有添加额外属性的relative和static表现一样。额外属性包括:top, right, bottom, left。
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative
一样, top
、 right
、 bottom
和 left
属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙(脱离文档流)。移动浏览器对 fixed 的支持很差。
absolute
是最棘手的position值。 absolute
与 fixed
的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static
的元素。
float
Float 可用于实现文字环绕图片,如下:
img {
float: right;
margin: 0 0 1em 1em;
}
clear
clear
属性被用于控制浮动。
例子:clear: left。消除float:left后面的元素的浮动。
清除浮动(clearfix hack)
overflow: auto;
使得包含浮动元素的元素的高度适应浮动元素的高度。
媒体查询
“响应式设计(Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略,这样可以让网站在任何情况下显示的很棒!
媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局,然后在浏览器变窄到无法容纳侧边栏中的菜单时,把布局显示成一列:
@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } }
@media screen and (max-width:599px) { nav li { display: inline; } }
inline-block
display: inline-block;代替float。
inline-block 布局
使用 inline-block
来布局。有一些事情需要牢记:
-
vertical-align
属性会影响到inline-block
元素,可能会把它的值设置为top
。 - 需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格,那么列与列之间会产生空隙
column
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
CSS columns是很新的标准,所以需要使用前缀,并且它不被IE9及以下和Opera Mini支持。
flexbox
新的 flexbox
布局模式被用来重新定义CSS中的布局方式。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。
css框架
因为 CSS 布局很难使用,所以催生了不少 CSS 框架来帮助开发者。