首页手记一些前端布局小知识

一些前端布局小知识

标签：

Html/CSS JavaScript

整理了这段时间使用到的一些前端布局相关的技巧知识，写的比较杂。越发觉得基础很重要，再高大上的技术也是由基础知识组合而成的！而且深入理解一些技术的背后原理真的很有意思~

line-height

平时切页面的时候， line-height 的垂直居中性是我们使用最多的实用特性之一。但是对于该属性的一些细节问题，并不是很清楚，看了好多篇文章，基本理清了一些基础概念。所谓行高是指文本行 基线间 的垂直距离，什么是“基线”？(⊙o⊙)并不懂…那只能好好的理一理了。

定义： line-height 属性用于设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。 line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

顶线、中线、基线、底线

上图来自于这篇文章，该篇文章真是图文并茂，把行高相关的一些概念"画"的非常清楚，有兴趣的可以看一看。

下面给出行高的一些实际运用：

1. 单行文字居中

<div style="height: 100px; width: 200px; line-height: 100px; text-align: center; border: 1px solid red;">我们都是好孩子</div>

ps：张鑫旭老师的这篇文章认为撑开 div 高度的并不是文字本身，而是 line-height ，所以去掉上面代码中的 height 属性并不会产生任何影响！这篇文章把为什么 line-height 能撑起 div 高度的原理页讲解的很清楚，涉及到 inline box 模型的一些概念。

2. 多行文字居中

张老师的一个例子，针对高度固定的div，里面文字单行或多行显示，字体有大有小的情况。兼容性貌似很赞！

.mulit_line { line-height:150px; border:1px dashed #cccccc; padding-left:5px; }.mulit_line span { display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle; }.mulit_line i { width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0; }<p class="mulit_line">  
    <span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span><i> </i></p>

3. 图片居中

仅仅利用 line-height 实现图片居中，兼容性并不是很好！自己在chrome43下也测试了一下，并不能达到完美的居中：

.cover {
    position: relative; /* 用于测量img的offsetTop */

    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid red;
    line-height: 200px;}.img>img {
    vertical-align: middle;}<div class="cover">  
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.chenjunxyf.me/yi-xie-bu-ju-zhi-shi/imgs/logo.jpg" alt=""></div>

上面采用的 logo.jpg 尺寸是：90 * 45，肉眼观察貌似图片居中了，但是在控制台里面计算 img 的 offsetTop 结果却是 79px ，与真正的居中相比多了2px，So...该方法并不是很准确！

比较赞的图片居中显示方法很多，如：淘宝怿飞（圆心）的图片居中解决方案

css画三角

利用css画一些常用的图形非常方便，这篇文章介绍了纯css实现的一些图形案例。最近项目中用到了css画三角形，这里就给出一个css画三角形的例子了。

利用css画三角形，主要用到了 border 属性，该属性其实很强大哦！特别是当我们设置一的 div 标签的 width: 0; height: 0; 的时候，看如下代码和效果：

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid yellow;
    border-bottom: 50px solid blue;
    border-left: 50px solid green;}<div class="triangle"></div>

从上图的效果，你是不是已经知道如何画一个三角形了？很简单，只要保留border一个方向颜色设置，其他方向颜色都设置为透明就OK了！

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;}<div class="triangle"></div>

效果我就不贴了，地球人都能猜出来~~

满屏显示

这个效果保证了浏览器视窗正好显示一屏且恰好不出现滚动条，对于现在的单页面应用还是很常用的一个功能需求。一般利用百分比布局可以很nice的实现该效果，需要注意的是CSS属性是有继承性的，而百分比都又是相对的，那么子元素设置百分比是相当于容器父级而言的。

* { margin: 0; padding: 0; }html, body { height: 100%; }  .container { height: 100%; background-color: green; }<div class="container"></div>

给一个兼容性比较好的示例代码：

See the Pen oXaozx by chenjunxyf ( @chenjunxyf ) on CodePen .

rem布局

这是一个移动先行的时代，移动布局方面出现了不少技术，如：响应式、固定宽度、viewport缩放、rem布局、flex布局...这些技术各有优缺，具体使用哪个技术还要依据使用场景，这里主要介绍下rem布局。

rem（font size of the root element）是相对于根元素的字体大小的单位，简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算，明显rem的计算规则更简单！

rem 能等比例适配所有屏幕，那它是如何工作的呢？上面说过 rem 是通过根元素进行适配的，也就是说在网页中我们只要设置html的 font-size 值就能控制 rem 的大小。看看下面这个例子：

根元素设置10px

html {  
    font-size:10px;}.test-rem {
    width: 10rem;     /* 10 * 10px */ 
    height: 10rem;    /* 10 * 10px */ 
    back}<div class=".test-rem"></div>

效果图如下：

根元素设置20px

html {  
    font-size:20px;}.test-rem {
    width: 10rem;      /* 10 * 20px */ 
    height: 10rem;     /* 10 * 20px */ 
    back}<div class=".test-rem"></div>

效果图如下：

我们仅仅改变了一下根元素的大小，就能控制元素的尺寸，是不是很赞！那么如何计算出不同分辨率下font-size的值？请看这篇文章。实际应用中，除了使用 media 来动态改变根元素的 font-size 大小，我们还可以使用js更加灵活的适配不同尺寸的屏幕，代码如下：

(function (win, doc) {
  var docEl = doc.documentElement,
    changeRem = function () {
      docEl.style.fontSize = docEl.getBoundingClientRect().width / 16 + 'px';
    },
    timer = null;

  win.addEventListener('onorientationchange' in win ? 'orientationchange' : 'resize', 
  function (e) {
    clearTimeout(timer);
    // 预防屏幕尺寸调整的过于频繁
    timer = setTimeout(changeRem, 300);
  });
  changeRem();})(window, document);