百度ife项目之html

发表于   |   分类于   |     |   阅读次数

历时两天半的断断续续，我做完了本次百度ife的第七个任务（这里），是一个html的布局任务，我做好的demo（这里）。

尽管已经有过很多html布局的经验了，但不得不说很多东西我还都不太熟悉，下面就来总结一下做完这个任务的一些收获吧。

我大概总结了这些收获吧：

  1. html5的新标签的应用，这个我专门总结了一下（这里）
  2. 等宽多栏布局的实现
  3. 父元素与子元素的margin-top
  4. border-width
  5. 超过行数限制显示……
  6. letter-spacing
  7. 伪类标签

等宽多栏布局

其中有一个部分是这样的：

这个是四栏布局，每个栏等宽且宽度应该随着屏幕宽度变化，要求有一个最小的宽度。

我大概想到了这么几种布局的方案：使用inline-block布局、使用flex布局、使用float布局、使用框架的栅格布局。

首先来说一下我最后选用的布局方案，我采用的是float布局，我给每一栏定了25%的宽，然后定了一个最小宽度min-width，然后让他向左浮动。

1
2
3
4
5
6

text-align: center;
float: left;
height: inherit;
width: 25%;
min-width: 320px;

为什么选择这种方案？如果使用inline-block布局两栏之间会有一个间隙，还得去处理这个间隙；使用flex布局的话移动端是很好的，但是如果是pc端的话会有兼容方面的问题；栅格布局肯定是可以的，但是在这上使用一个框架的话显得有些大材小用了。所以浮动我认为是一个比较好的方法。

简单来说一下每一种布局方案：

  1. 使用inline-block布局，这种布局方案会有一个小问题，就是在每个栏之间会有间隙，这个问题的具体解决与描述我找到了一篇文章（这里）。这里详细的说明了这个问题的解决办法，所以如果是本来每栏之间就有间距的话，用inline-block布局是最好的了，他还可以配合text-align把多栏居中，用起来真的不错。
  2. 使用flex布局，使用dispaly: flex，flex : 1 这样就保证了每栏等宽了，不过他有浏览器的兼容问题这个必须要注意，在ie10以上的浏览器中。
  3. 栅格布局，他会把整个屏幕平均分成12列，根据自己的宽度来定义占用几列，这个大家得看具体的框架了，我就不详细描述了（因为我自己的实践也不是很多 - -）
  4. float布局，这个主要注意的就是如果你的父容器如果没有定高的话记得清除浮动。不然父容器会没有高。。。。

父元素与子元素的margin-top

这个就是如果你给父容器的第一个子元素设定了margin-top的话，页面的效果不是子元素向下移动，而是父元素向下移动，而父元素和子元素的边距是没有变化的。这里我查找到的答案（这里），我简单描述一下，在盒子模型中规定：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套(父子之间)的盒元素，并且它们之间没有非空内容、Padding或Border分隔。所以父元素和子元素会共享这个边距。解决办法其实理解了上述的那篇文章自然就可以解决了。解决办法如下：

  1. 修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
  2. 为父元素添加overflow：hidden；样式即可（完美）
  3. 为父元素或者子元素声明浮动（float：left；可用）
  4. 为父元素添加border（border:1px solid transparent可用）
  5. 为父元素或者子元素声明绝对定位

border-width

通常我们写border时就会直接写成这样：border: 1px solid #000;类似这样，那这个border-width有什么用呢？这个可以定义四条边是不同宽度的，他的顺序和margin之类的是一样的上右下左这个顺序。

还有这个用处，而且我这次写页面的时候就用到了：

这个向下小箭头这么实现呢？当然我们可以用图标字体也可以用图片，但是用css我们也可以实现，这可能算是一个hack的方法吧，但是我觉得挺有趣的，我也是review别人代码是学习的。具体css如下：

1
2
3
4
5
6
7
8

display: block;
width: 6px;
height: 6px;
border: solid #867e7a;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

哈哈，真的很聪明，这样用border-width属性隐藏掉两边，再旋转一下就可以了！

超过行数限制显示……

这个也是学习的啦，张鑫旭的博客，下面贴出css：

1
2
3
4
5
6
7
8

    .box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

letter-spacing

遇到这样的样式不知道大家是怎么解决的？

大家是不是在两个字之间加很多的空格（ ）呢？还是怎么样？可以用一下这个css属性letter-spacing他可以改变字之间的间距，但是他有一个问题就是他会在搜索两个字的后面都加间距字不是居中的，所以配合padding-left加一个和间距相同的左内边距，这样就可以保证字是居中的了。

伪类标签

像图中对勾和横线这样的无意义的标签，我们最好是用before和after伪类来代替。