CSS篇2——有关布局的那些事

前言

本文理一下 CSS 布局的一些事。CSS 布局要注意哪些点。其实 CSS 布局是有技巧的，不同人布局页面，最后出来的效果可能差不多，但是一些布局细节可能差很多。本文不讲 stiky footer 布局，圣杯双飞翼等等的布局方式，就说一下一些常用的布局技巧。

一、少用定死宽度

布局的时候，少用定死的宽度，假如真的用宽度，外层用就可以，尽量让宽度和影响宽度的 paddingborder(有时候也包含 margin), 分开来布局。

1、避免用定死宽度布局

布局的时候，不要用定死宽度和 float 布局。可以采用左侧固定，右侧自适应，或者 flex 布局方式进行。

2、宽度分离
确实要用宽度的时候，在外层用，避免宽度和 paddingborder 一起使用，推荐如下：

.father{width:1280px}
.son{margin:0 20px;padding:16px;border:1px solid}

二、优先级最高的 width

max-width 和 min-width 优先级是最高的，即使宽度设置了！important，最大宽度和最小宽度的优先级也是最高的。

例如如下：

img{max-width:300px;}

图片就会展示 300px

利用这一点，我们可以做高度展开收起的动画效果。

例如如下：

.element{
max-height:0;
overflow:hidden;
transtion:max-height .25s;
}
.element.show{max-height:500px}

就可以出现展开收起的动画，假如 max-height，设置为 height, 就不会出现动画。

三，辅助元素生成 content

content 的作用很多，我之前也有文章专门介绍过，请看：https://www.haorooms.com/post/content_attr

四、多列等高布局

请看之前文章：https://www.haorooms.com/post/css_skill2

五、无依赖 absolute 绝对定位

类似如下：

布局一个 top1

我们仅仅需要一句就可以

HTML：

CSS：

.top1 {position: absolute;}

因此，我们可以借助这个特性，来布局 hot,new 等导航栏的标识

通过 absolute 和 margin 配合

例如 hot 标签

.icon-hot{
position:absolute;
margin:-6px 0 0 2px;
width:12px;height:11px;
background:url(hot.gif);
}

除此之外，input 必填输入框的 *；tips 标识，都可以用这个特性来布局

.icon-warn{
position:absolute;
margin-left:-20px;
width:20px;height:20px;
background:url(haorooms-warn.gif) no-repeat center;
}

六、releative 最小化原则

经常看到有朋友在 body 等上面加 position:releative 这样其实会限制很多，出现一些意想不到的问题。

最小化原则如下：
假如我们要在如下结构右上角定位一个图标

haorooms 测试内容 
haorooms 测试内容 
haorooms 测试内容 

要这么写：

 

   
 

haorooms 测试内容 
haorooms 测试内容 
haorooms 测试内容 

这样污染最小，而不是在外层增加 position:relative