常用模式片段之CSS布局篇

去年在杭州实习的三个多月收获颇多,不管是代码层面还是思考层面,发现了自己很多一知半解的缺点,正应了墨菲法则,会出错的事总会出错。现在重新整理那时的学习笔记,以备今后之需。

注:此为初稿笔记,未二次提炼。

position 拉伸

撑满整个未知宽高容器

1
2
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;

撑满整个屏幕

1
2
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;

注:是元素撑满,如果只是背景撑满,只需对根节点设background

居中

水平居中

已知元素宽度

1
2
3
4
5
6
7
8
9
#parent {
position: relative;
}
#content {
position: absolute;
left: 50%;
margin-left: -200px; // 负 (width/2)
width: 400px;
}

未知元素宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#parentWrapper {
position: relative;
overflow: hidden;
}
#parent {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
right: 50%;
}

demo效果

浮动

完备的clearfix

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.clearfix() {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}

左侧菜单 右侧主体

左侧定宽,右侧元素自适应铺满

  • 左侧元素定宽,并浮动
  • 右侧元素设oerflow: hidden
  • 父容器可定宽,也可100%铺满

BFC (Block Formatting Context)

页面上任何一个元素都可以看成 box,box 种类有:Block-level,Inline-level 和匿名box

BFC (Block Formatting Context) 是一个独立的渲染区域,只有 Block-level box 参与, 它规定了内部的 Block-level box 如何布局,并且与这个区域外部毫不相干。

BFC布局规则

  • 内部的 Box 会在垂直方向,一个接一个地放置
  • Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠(margin callapse)
    • 即使是子元素和父元素的关系,如果它们在同一个 BFC Box 下,也会发生 margin callapse
  • 每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)
    • 即使存在浮动元素也是如此,即在一个 BFC Box 内部,浮动流和文档流会发生重叠
  • BFC 的区域不会与浮动元素重叠(利用它重新构造个 BFC 区域,就可以清除浮动)
  • 计算 BFC 区域的高度时,浮动元素也参与计算
  • 总结 BFC,就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

如何触发BFC

  • float 属性不为 none (即脱离文档流,到浮动流)
  • position 为 absolute 或 fixed (即脱离文档流,到定位流)
  • overflow 不为 visible (IE6/7 无效时,可以设 zoom: 1 触发 hasLayout)
  • display 为 inline-block, table-cell, table-caption, flex, inline-flex

参考资料

行排列

inline-block 间隙

  • inline-block之间是会有一个默认间隙的,跟父元素font-size有关,设为0就可以了

  • 老safari下还需设letter-spacing、word-spacing一个负值(0.25em左右),子元素设为normal

  • block之间没有间隙

inline-block 行高

  • 父元素block,子元素inline-block时,子元素会有一定行高,导致父元素的高度与子元素实际内容的高度不一致

  • 父元素设font-size: 0,同时IE下再设line-height: 0

子元素横向排列边距

  • 子元素都设 margin-right,而最边上的元素需要修正,用 nth-child 会有兼容性问题

  • 父元素设个 margin-right 负值,可将一行的子元素全包进去

文字排列

文字竖排

  • 文本元素设width: 1.5em
  • 再对父容器设文本居中

最小字体

实现10px的文字大小,而部分浏览器比如chrome只支持最小12px的文字。

1
2
transform-origin: 0 50%;
transform: scale(10/12);

注:元素占据的位置不会缩小,仅仅是看上去缩小了

文字overflow 显示’…’

单行文字

1
2
3
4
5
.ui-text-overflow(){
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行文字(仅webkit有效)

1
2
3
4
5
6
7
8
.ui-text-overflow-lines(@line: 2, @lineHeight: 1.5){
display: -webkit-box;
-webkit-line-clamp: @line;
-webkit-box-orient: vertical;
overflow: hidden;
@height: @lineHeight * @line;
max-height: ~'@{height}em';
}

注:该元素本身不要设上下padding,要垂直居中请在父元素上控制

背景

背景图固定不跟随滚动

1
background-attachment: fixed

其他

手绘icon

这是一个类似符号的icon,css绘制出来,支持等比缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.icon-get{
background-color: #59b726;
border-radius: 50%;
color: #fff;
display: block;
height: 18px;
width: 18px;
position: absolute;
top: -10px;
left: -10px;
transform: rotate(-45deg);
&::before,
&::after{
content: ' ';
display: block;
position: absolute;
}
&::before{
border-top: 1px solid #fff;
width: percentage(11/18);
top: percentage(11/18);
left: percentage(5/18);
}
&::after{
border-left: 1px solid #fff;
height: percentage(7/18);
top: percentage(4/18);; //before.top - after.height
left: percentage(5/18);
}
}

自定义滚动条样式

类似mac上滚动条的感觉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.mac-scroll {
&::-webkit-scrollbar {
width: 8px;
}
/*定义滑条*/
&::-webkit-scrollbar-thumb {
background-color: $gray-lightest;
background-clip: content-box;
border-top: 5px solid rgba(255,255,255,0);
border-bottom: 5px solid rgba(255,255,255,0);
border-right: 4px solid rgba(255,255,255,0);
}
/*定义滚动条轨道*/
&::-webkit-scrollbar-track {
background-color: #fbfbfb;
}
}