[关闭]
@guoxs 2015-06-06T15:19:48.000000Z 字数 2651 阅读 1473

CSS布局

CSS


布局:页面元素的摆放模式

1、display

  1. display:block
  2. 默认宽度为父级元素宽度
  3. 可设置宽高
  4. 换行显示
  5. 默认display:-div p h1-h6 ul form...
  6. display:inline
  7. 默认宽度为内容宽度
  8. 不可设置宽高
  9. 同行显示,在元素内部可以换行
  10. 默认inline:span a lable cite em

block vs inline

dispaly 默认宽高 可设置宽高 起始位置
block 父元素宽度 换行
inline 内容宽度 同行
  1. display:inline-block
  2. 默认宽度为内容宽度
  3. 可设置宽高
  4. 同行显示
  5. 整块换行
  6. 默认inline-blockinput textarea select button...
  7. display:none
  8. 设置元素不显示

display:none vs visibility:hidden
前者隐藏不占空间,后者占有空间

text-align只对行级元素起作用

如何实现浏览器兼容版的inline-block显示
解决IE6、IE7兼容性的方法:
  1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。
  2、直接设置display:inline,使用zoom:1触发layout。

  1. {
  2. display:inline-block;
  3. *display:inline;
  4. *zoom:1;
  5. }

2、position

  1. positionstatic | relative | absolute |fixed
  2. position-设置定位方式
  3. toprightbottomleftz-index - 设置位置
  4. 元素边缘参照物边缘距离

z-index
元素在Z轴上的排序
z-index栈:父级元素的z-index影响子元素的z-index。

  1. position:relative
  2. 仍在文档流中
  3. 参照物为元素本身
  4. 使用场景:绝对定位的参照物
  1. position:absolute
  2. 默认宽度为内容宽度
  3. 脱离文档流
  4. 参照物为第一个定为祖先/根目录
  1. position:fixed
  2. 默认宽度为内容宽度
  3. 脱离文档流
  4. 参照物为视窗

布局案例:轮播头图、固定顶栏、遮罩、三行自适应布局

position:fixed 在ie6及以下不支持

3、float

  1. float:left|right|none|inherit
  2. 默认宽度为内容宽度
  3. 脱离文档流
  4. 向指定的方向一直移动,直到被挡住
  5. float元素在同一个文档流中
  6. float元素半脱离文档流(对元素脱离文档流,对内容在文档流中)

clear清除浮动

  1. clear:both|left|right|none|inherit
  2. 应用于块级元素、后续元素
  1. 1、增加空白元素清除浮动
  2. <div class="cb"></div>
  3. .cb{
  4. clear:both;
  5. height:0;
  6. overflow:hiddden;
  7. visibility:hidden;}
  1. 2、利用clearfix
  2. <div class="body clearfix">
  3. <div></div>
  4. <div></div>
  5. </div>
  6. .clearfix:after{
  7. content:',';
  8. display:block;
  9. clear:both;
  10. height:0;
  11. overflow:hiddden;
  12. visibility:hidden;
  13. }
  14. IE下:clearfix{zoom:1;}

案例:两列布局

4、flex弹性布局

flex container

flex item 排列方向为main axis, 与主轴垂直的方向为cross axis(辅轴)。

flex container

  1. display:flex;

flex item
在文档中的子元素(不能是孙元素,不能脱离文档流元素)
方向

  1. flex-direction
  2. flex-directionrow(行,从左向右)|row-reverse|column(列)|column-reverse
  1. flex-wrap
  2. flex-wrapnowrap(不换行)|wrap|wrap-reverse(反向换行)
  1. flex-flow
  2. flex-flow:<'flex-direction'>(default:row)||<'flex-wrap'>(default:nowrap)
  1. order
  2. order:<interger>
  3. initial:0

弹性

  1. flex-basis
  2. flex-basis:main-size|<width>
  3. 设置flex item的初始宽/高
  1. flex-grow
  2. flex-grow:<number>
  3. initial:0
  4. 设置元素所能分配到的空余空间的比例
  5. width = flex-basis + flow-grow/sum(flow-grow)*remain
  1. flex-shrink
  2. flex-shrink:<number>
  3. initial:1
  4. 设置当容器空间不足时如何压缩子元素。
  5. width = flex-basis + flow-shrink/sum(flow-shrink)*remain(负值)
  1. flex
  2. flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>
  3. initial:0 1 main-size

对齐

  1. justify-content(like text-align把剩余的空间分配)
  2. justify-content:flex-start(0对齐)|flex-end(+→对齐)|center(居中)|space-between(将间隔平均分配首尾不分配)|space-around(首尾也分配)
  3. 设置main-axis方向上的对齐方式
  1. align-items(like vertical-align
  2. align-itemsflex-start(0对齐)|flex-end(+→对齐)|center(居中)|baseline(基线对齐)|stretch(拉伸充满)
  3. 设置cross-axis方向上的对齐方式
  1. align-self
  2. align-selfauto|flex-start|flex-end|center|baseline|stretch
  3. 设置单个flex item cross-axis方向上的对齐方式
  1. align-content
  2. align-contentflex-start|flex-end|center|space-between|space-around|stretch
  3. 设置cross-axis方向上行的对齐方式

flex ie9及以下不支持,目前主要用于移动web页面中

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注