CSS 虽然初衷是用来美化 HTML 文档的，但实际上随着 float、position 等属性的出现，它已经可以起到调整文档渲染结构的作用了，而随着弹性盒子以及网格布局的推出，CSS 将承担越来越重要的布局功能。渐渐地我们发现 HTML 标签决定了页面的逻辑结构，而 CSS 决定了页面的视觉结构。

这一课时我们先来分析常见的布局效果有哪些，然后再通过代码来实现这些效果，从而帮助你彻底掌握 CSS 布局。

我们通常提到的布局，有两个共同点：

大多数用于 PC 端，因为 PC 端屏幕像素宽度够大，可布局的空间也大；

CSS3的样式

语法：box-sizing: content-box | border-box | inherit;

前两篇文章我们把「Web前端开发进阶篇」CSS样式讲解完了，接着我们来讲解下一篇文章，关于CSS框模型的内容知识，小伙伴们跟上我的节奏，动起来，Let's go！

【引言】

CSS框模型（也就是常说的盒子模型）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。css中的框模型是css的基础，框模型的理解可以帮助我们很好的掌握页面中的布局，进行对样式进行修改。话不多说，那就开始吧。

Border strip是目前最流行的前端框架，他是基于html、CSS 、js的，一个简洁灵活的开源框架

官网的下载地址:Http://getbootstrap.Com

中文网地址:Htto://v3.bootcss.com

解压后，你将会看到Border Strip的三大核心元素；CSS（样式）；js(脚本)；Fonts（字体），但是我们需要将，BootStrap.min.css文件；Bootstrap.min.js文件；jquery.min.js文件引入页面。（注:如果没有引入这三个文件，你的Border strip将没有任何效果）

前面我学习了Flex布局之后感觉是真的爽啊，比之前用浮动，定位方便太多了，之前几十行代码才能写完的布局，用了Flex10行左右就搞定了，今天学了Grid发现比Flex更爽，代码写的还要少，真是太厉害了，现在我把学习的相关知识梳理了一下，给大家分享一下，同时也可以作为我日后复习的笔记。

一、认识Grid属性

这是一个非常简单而实用的纯CSS实现的 Loading 特效。它由两个圆圈横向排列，交替渐隐切换。这种动画效果很适合用于页面加载过程中，为用户提供一个愉悦的等待体验。

在这个特效的设计中，使用了CSS的animation属性来实现圆圈的渐隐切换效果。这个特效的实现并没有用到任何JavaScript，这意味着它可以帮助提升网站的性能，同时也减少了代码的复杂性。

这个特效的视觉效果非常出色，它为用户提供了一个简单而美观的等待界面。如果您正在寻找一个简单而实用的加载动画，那么这个纯CSS实现的2圆渐隐切换的Loading特效一定会是一个不错的选择。

大家好，今天给大家介绍一款， 图片随机切换特效，切换时改变图片色彩和背景色html页面源码，（图1）。送给大家哦，获取方式在本文末尾。

支持鼠标拖动和点击切换两种方式，切换时改变图片色彩为彩色，同时改变背景色（图2）