【css-01】九宫格的布局你能够想到哪些办法实现？它们各自的优缺点是什么？

1.背景介绍

        要做九宫格，首先得明白什么是盒子模型。盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版。 我们可以把所有HTML元素都可以看作盒子，里面包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

2.知识剖析

        盒子的基本要素

            content-内容

            padding-内边距(填充)

            border-边框

            margin-外边距

       一个盒子实际所占有的宽度（或高度）是由”内容+内边距+边框+外边距“组成的.

       图中最内部的框content是元素的实际内容，也就是元素框。当元素为块级元素或内联块级元素时， 可以设置width，height属性来设定内容区的宽高。而内联非替换元素设置width,height属性无效，其宽度随元素的内容而变化。 当默认情况下，块级元素宽度自动填满其父元素宽度。

       Padding属性定义了元素边框与元素内容之间的空间。其值不可为负值，背景图与背景色可以显示在padding上。 当在内联非替换元素上设置padding时，不会影响行高计算，但背景色可以显示。       

       border指盒模型的边框，边框的相关的属性:宽度(border-width)、样式(border-style)、颜色(border-color)。 在默认情况下，背景会延伸到边框所在的区域下面。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设置为background-clip;padding-box.

       margin是外边距,与padding不同的是，margin可以为负。两个上下方向相邻的元素框垂直相遇时，外边距会合并.

       在本次小课堂，将展示如何用2种不同的html样式，4种CSS样式来制作出九宫格。分别是

       HTML的2种表示形式

       1.使用div+css布局。

            使用9个div,将div标签inline-block化，使div能够水平排列。然后对div标签设置背景色，使用padding内边距来撑开div标签宽高，控制好外边距，使得div标签之间间距相等。

            它的优点是:

                1.网页载入比较快，由于DIV+CSS中的CSS富含丰富的样式，表现更加灵活.

                2.页面内容与样式分离可以是网页代码减少，使页面的样式的调整变得更加方便.

                3.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

                它的缺点是：浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。

           2.使用ul,li布局。ul,li布局和div布局很像，同样使用9个li，将li标签inline-block化。然后对li标签设置背景色，使用padding内边距来撑开li标签宽高，控制好外边距，使得li标签之间的间距相等。

               这种方法的优点是层次分明，不易混乱；缺点是ul,li标签是有默认的margin和padding.

           CSS的4种表示形式

           CSS中要实现自适应，就需要使用尺寸单位，比如%，rem，vw;,百分比单位是相对于父元素。rem单位相对于html根元素,vw单位相对于屏幕宽度.

           使用flex布局来完成9宫格的制作.

3.常见问题

       1.不同的浏览器对ul,li标签有默认边距，该如何解决？

       2.为什么九宫格布局不能定高？

4.解决方案

      1.对于第一个问题，一般情况下通过对ul设置margin:0;padding:0;就能清除ul的默认间距。要去除去除li的默认间距至少有2种方法：

          1）.将li标签之间的间隙去除。

          2）.在body元素中添加font-size:0;。

      2.对于第二个问题。因为要实现自适应。自适应是在通常情况下宽度充满屏幕的基础上进行的，通常不会对高度进行控制，如果高度固定，就不能起到自适应的效果。

5.编码实战

        https://github.com/ptteng/PPT/tree/master/demo/css-01-how%20to%20creat%20a%20Sudoku

6.扩展思考

       还有哪些方法可以去除li的默认间距

       首先得了解不同浏览器所对应的letter-spacing与字体大小/字体关系，详细的请看

                                  http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80  

letter-spacing与字体大小/字体关系的数据表

7.参考文献

            http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D

        去除inline-block的N种方法.

8.更多讨论

           你还能想到几种办法来实现九宫格布局？

今天完成的事情：对less的语法、使用进一步了解，感觉less真正的功能和bootstrap差不多，也是做成组件来调用的。

昨天讲的小课堂不知道怎么回事没有保存下来，今天重新讲了一遍。微信跟新也是这样，感觉今天挺背的。。。

明天计划的事情：完成任务十一十二。

遇到的困难：主要还是对微信小程序步骤流程不熟，导致在微信上上传了2次才传好。。。

今天的收获：1.学会小课堂上传流程。先上传视频到腾讯课堂，上传ppt文件到github，经过审核之后，然后再指定时间登录微信，编辑小课堂的标题、内容。修改完之后然后再在wiki上添加小课堂的链接和ppt的链接。然后完成。

2.学会如何使用koala软件将less编译成css。之前一直以为是将css编译成less。。。后来才发现原来是自己写less文件，然后通过koala软件编译成css。通过用less写任务十一的时候发现。less中的算法不适用于rem单位的计算。