小白必知什么是css和盒模型

CSS盒模型概念

CSS 盒模型也叫框模型 (Box Model) ，包含了元素内容（content）、内边距（padding，也叫填充）、边框（border）、外边距（margin,也叫边界）几个属性。

橘色content是元素的内容，绿色padding是元素的内填充，黑线border是元素的边框线，蓝色margin是元素的外边距。

我们在开发过程中经常会用到浏览器的调试工具，也能清楚的看到盒模型。按下F12打开调试界面，

注意：我们设置的元素背景是应用在内容，填充和边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{

margin:0;

padding:0;

}

计算一个元素实际的宽高，

宽度=width+padding+border；

高度 =height+padding+border；

举个栗子，下面的一个div元素：

给它设置宽度50px，高度50px，内边距5px,边框线为1px黑色，外边距10px:

在浏览器中查看：

浏览器中显示的元素

F12打开调试界面,按左边的箭头，鼠标移到元素可以看到他的宽高，如下图元素下边的黑色区域62x62分别是元素的宽度和高度。

那么他是怎么计算的呢，我们可以点击元素看一下它的盒模型：

宽度=50px(width)+5px(左填充)+5px（右填充）+1px(左边框线)+1px(右边框线)

高度=50px(height)+5px(上填充)+5px（下填充）+1px(上边框线)+1px(下边框线)

大家会疑惑，为啥margin没有计算进去呢？margin是一个元素和它相邻元素之间的距离。如果宽度或者高度加上margin则是元素的总占用宽度或者高度。所以margin不计算在元素的实际宽度或者高度中。

童鞋们明白了吗，不理解的话一定把文章多看几遍。

爱学习的孩子运气都不会太差哦~

接下来给大家整理出了20款css工具

1.Radiobox

小型CSS3动画集合适用于表现无线电输入内容。

2.SpinThatShit

面向单一元素加载器与运行器的SCSS集合。

3.Tootik

一套纯CSS/SCSS/LESS工具提示库，易于使用且无需JavaScript。

4.Family

包含26种出色的Sass mixins，以简单而优雅的方式对nth-child式元素进行样式管理。

5.Sprite Spirit

SCSS Mixin，具备出色的图像处理能力。

6.Flex Layout Attribute

基于CSS flexbox规格的布局助手，利用两项定制化html属性——layout与self——快速实现flexbox效果。

7.tipograf

轻量化印刷库。其适用于纯CSS或者LESS。受到Medium的启发，其能够实现良好的垂直排版效果。

8.Auroral

一组动画型背景梯度集合，几乎适用于一切环境。

9.iconoo

有了它，您将不再需要外部图标资源。

10.text-spinners

纯文本、纯CSS、独立字体、内联加载指示器。

11.Cutestrap

如果大家需要介于normalize.css与完整成熟框架之间的过渡性方案，那么体积仅为8kb CSS的Cutestrap绝对值得一试。

12.universal.css

一旦拥有，别无所求的CSS。

13.Kickoff

这是一套强大的CSS框架，提供大量合理的默认设置以帮助大家在最短时间内完成项目设计与运行。

14.Stylecow

适用于所有浏览器的现代CSS。

15.SourceJS

SourceJS是一套动态样式指导平台，允许用户基于任意技术将多种项目UI组件加以结合。

16.CSSTree

对CSS语法有效性进行快速详尽解析。

17.Emmet

利用Emmet，您能够输入可动态解析的CSS类表达式，并根据所输入的缩写生成输出结果。Emmet面向大量使用HTML/XML与CSS的Web开发工作流进行开发与优化，但也可配合其它编程语言使用。

18.Easing Functions Cheat Sheet

简单的备忘单，帮助开发者选择正确功能。

19.Browserdiet

终极前端性能指南。

20.Awesome search

此网站能够让您更快获取各类优秀资源。

CSS Reference

一份免费视效指南，助您轻松掌握流行CSS属性。