常用模式片段之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

居中

水平居中

已知元素宽度

#parent {
	position: relative;
}
#content {
	position: absolute;
	left: 50%;
	margin-left: -200px;  // 负 (width/2)
	width: 400px;
}

未知元素宽度

#parentWrapper {
    position: relative;
    overflow: hidden;
}
#parent {
    float: left;
    position: relative;
    left: 50%;
}
#content {
    float: left;
    position: relative;
    right: 50%;
}

demo效果

浮动

完备的clearfix

.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 显示’…’

单行文字

.ui-text-overflow(){
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

多行文字（仅webkit有效）

.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绘制出来，支持等比缩放。

.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上滚动条的感觉

.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;
    }
}