“学习CSS布局” 笔记

时间:2022-11-11 10:29:36

学习网址: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 框架来帮助开发者。

“学习CSS布局” 笔记  “学习CSS布局” 笔记 “学习CSS布局” 笔记  “学习CSS布局” 笔记 “学习CSS布局” 笔记  “学习CSS布局” 笔记 “学习CSS布局” 笔记  “学习CSS布局” 笔记 “学习CSS布局” 笔记  “学习CSS布局” 笔记