CSS 实现内容高度不够的时候底部(footer)自动贴底

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。

方案 1:Flex-Box

头部使用 position: sticky; 吸顶,再使用盒子(main)来包住内容(container > content)和底部(footer),这个盒子设置最小高度为除头部外的剩余屏幕高度:min-height: calc(100vh - 50px);,盒子里面使用弹性布局(flex: 1 1 auto;)让内容区域自动撑开,而底部保持不变(flex: 0 0 auto;),这样就有了内容不够时底部自动吸底,内容足够时底部自动下移的效果。

"CSS 实现内容高度不够的时候底部(footer)自动贴底"继续阅读

设置 box-sizing 为 border-box 后外边距(margin)会合并吗

border-box 告诉浏览器去理解你设置的边框内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

设置 box-sizing: border-box; 后,简言之:

  • 盒子的宽度 = border + padding + width
  • 盒子的高度 = border + padding + height

"设置 box-sizing 为 border-box 后外边距(margin)会合并吗"继续阅读

Bootstrap实战 - 瀑布流布局

讲 Bootstrap 基础的教程网上已经很多了,实际上 Bootstrap 中文网(bootcss.com)里的文档已经写的很详细了,但实战的案例却不多。这里用一些当前流行的网页布局为导向,使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点,边学边练,加强理解。练习本案例需有 HTML/CSS 基础。

一、案例介绍

瀑布流是近几年流行起来的一种网页布局,视觉表现为参差不齐的多栏布局,本案例便是使用 Bootstrap 实现一个瀑布流布局。

"Bootstrap实战 - 瀑布流布局"继续阅读