继续学习布局咯：
这部分还木有进行到footer，但content部分内容太多了，所以就将课程提问部分也放在这篇文章啦。这几天虽然有点点疲惫，但还是挺开心的，收获还是挺多的呢~
先看一下课程提问的效果图吧：
这个模块分为两个大的模块，一个是提问框和按钮，一个是已提问题的回答。
课程提问效果图
整个提问模块中，代码如下：
课程提问模块代码示意图
第一个div是提问框和按钮，第二个div就是相关问题的回答了。
提问框和按钮：
这个模块的亮点是，巧妙的使用行内元素与块级元素的关系来进行布局。比如，input的输入框为行内元素，div的button为块元素，开发没有使用float来让div浮动，而是使用了 display为inline-block。这样，就可以使button与输入框在同一行啦。这里的提问button 定义了 width 、height、line-height、display为inline-block。知识活学活用，太奇妙了。我也才更多明白，行内元素和块元素的区别。这篇文章总结了行内元素与块级元素的区别。
提问框和按钮代码示意图
答案框：
答案框这里，开始重视常见的一个布局习惯，不给height，但给padding。整个的答案框是一个div，但其中是ul li的列表。每一个li里面又有三个小部分，左侧的点赞按钮，中间的内容，右侧的时间。
答案框的代码示意图
整个答案的div中，规定了width，然后又用padding 规定了上下为24，左右为0，保证内容不会顶着边框太丑就好了。在ul中，就只是定义了超过范围隐藏。在li里面，定义了float为left。width为整个li的实际宽度。也用margin-top控制了每一个li的上边距。但也用padding控制了上下的空白。但它始终没有说出这个li有多高。 这一点，小伙伴们都惊呆😮了。每一个li的里面，有三个div，具体示意代码如下。
Li 中的左侧点赞小按钮：
Li 中的左侧点赞小按钮代码示意图
左侧的点赞小按钮，包括了小图标和点赞人数，它们是在同一个div中，后来也没有再用div单独包装。而是使用了br来换行。具体解释是 ： 左侧 点赞 小图标 及 点赞数目，在同一个div中，数字用span控制，与小图标之间使用br来换行。在left-hand中，只控制了一个margin-right 为 16px.使得小图标与段落文字不会太近。而且，这个开发很熟悉流动布局，他不定义高度，因为他知道，div这个块级元素在float后会怎样排列。
开发的命名很规范，thumb点赞小图标。而hand-block里，定义了width 和 height，给出border-radius 和 border，从而出现了一个带边框的圆形。不得不说，这个height没有考虑span里这个数字，是单独一行文字的高度。哇，这个真的很奇妙，因为span是被br后强制换行的，但并不影响这个div的高度，还好没有设置overflow为hidden。哈哈。这个开发太牛🐂了。
但后来又对这个span，定义为display为block，然后定义了marginTop，而且让line-height,height相同。
Li 中的中间内容：
Li 中的中间内容代码示意图
这个模块中，比较精彩的是它的超过规定长度时出现省略号。单行超过规定长度省略号 和 多行超过省略号最后一行省略号是不同的。
question-title定义了 超出这一行就以省略号表示。overflow: hidden; _zoom: 1; white-space: nowrap; （拒绝换行） text-overflow: ellipsis; word-break: break-word; 因鼠标滑过，会有变色，但友好变化，就会在这个时候，为原h3定义transition color 0.2s ease-out。【小小总结：拒绝换行、超过隐藏、再以点点点出现 就是单行省略号啦。】
答案内容部分 p ，也同样定义了超过范围就是省略号；还有就是，终于定义了答案的height，还有margin-bottom. 对啦，一般来说，line-height超过font-size时，比如两倍，行与行之间就不那么紧凑了。 word-break: break-all; word-wrap: break-word; display: -webkit-box;（貌似没有最后这个display就出不来省略号。。。-webkit-box-orient: vertical； -webkit-line-clamp: 3; 这个clamp貌似是说省略号出现在这个段落的第几行的。因为段落是以一个个单词说的，所以每一行都可能达不到100%的占满该段落。）
Li 中的右侧时间：
Li的右侧时间代码示意图
看到这里，会觉得前辈的代码真的很精彩。他巧妙使用行内元素与块级元素、float流动布局等。而我总是div泛滥，还有就是float泛滥。。。
网友评论