返回顶部

OutOfMemory.CN技术专栏-> html-> 一些前端布局小知识

一些前端布局小知识

更多

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

line-height

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

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

顶线、中线、基线、底线

line-height

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

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

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 src="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>  

triangle

从上图的效果,你是不是已经知道如何画一个三角形了?很简单,只要保留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>  

效果图如下:

rem-10px

根元素设置20px

html {  
    font-size:20px;
}
.test-rem {
    width: 10rem;      /* 10 * 20px */ 
    height: 10rem;     /* 10 * 20px */ 
    back
}

<div class=".test-rem"></div>  

效果图如下:

rem-20px

我们仅仅改变了一下根元素的大小,就能控制元素的尺寸,是不是很赞!那么如何计算出不同分辨率下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);

结语

暂时就写这么多啦,继续保持积累沉淀的耐心,不断进步!如果发现错误,欢迎留言指正~

参考

推荐阅读:
支持

1

反对

0

chenjun:Thoughts, stories and ideas.

您可以通过下面的社交媒体联系/了解作者的更多信息:

发表评论