必要性

1 .使用这三个规则可以使css布局模块化
2 .增强扩展性

无浮动

1 .浮动布局的副作用，授信是浮动本身的代码成本，其次是清除浮动所需要的成本
2 .浮动布局对浏览器的压力有没有
3 .BAT网站竟然都是用了大量的浮动布局...
4 .果然还是新网站厉害，抖音的网站用的是全都是flex布局，而且还会分操作系统，mac的都有特殊
5 .阅文的竟然也全都是float,最骚的是所有排列的都是ui>li（里面h1,div一堆乱排）

无图片

1 .可以css实现的效果不要使用图片

1 .减少http请求
2 .降低请求资源大小
3 .大大提升维护性
4 .扩展性与重用性增强

2 .css图形生成:box-shadow，border-radius，gradient渐变等CSS3的新属性生成图形

1 .最常见的就是一些按钮的背景资源.这种我感觉游戏ui界面贼需要

3 .无图片是意识，遇到需求首先想下没有图片可不可以做
4 .我们需要有“无图片”的意识，但是对于“无图片”的实践要试情况而定，需量力而行
5 .比如这种的:https://www.zhangxinxu.com/wordpress/2010/03/%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E5%90%84%E7%B1%BB%E6%B0%94%E7%90%83%E6%B3%A1%E6%B3%A1%E5%AF%B9%E8%AF%9D%E6%A1%86%E6%95%88%E6%9E%9C/ 纯CSS实现各类气球泡泡对话框效果

无宽度

1 .以前的做法：精确测量、计算每个元素的宽度，计算的时候还考虑到margin，padding以及border，总是精确到像素级，然后使用浮动进行无缝拼接，哇咔咔，当时的我还是很沾沾自喜的，因为页面上的宽度啊什么的都是精确到每一像素，每块元素都进行准确的计算，是多么的认真、工作多么的努力啊
2 .缺点

1 .开发效率低下
2 .结构的可重用性和扩展性没有。日后的维护也是一团糟

3 .宽度计算拼接的页面好像用坚固的砖头搭房子，一块一块摞起来。最后页面看似坚固，但是一旦一个地方有问题，整个就崩溃了
4 .Google的页面所有元素会随着文字的大小改变而发生相应的改变，包括按钮
5 .这里好像是针对整体宏观布局的：页面主体部分最外框的宽度不变，但是里面的元素水平自适应于外框宽度。简言之即主体固定内部自适应
6 .“无宽度”具体指的是没有固定的宽度值（尤其是以px为单位的宽度值，em需看具体情况，%百分值不在其中