专栏首页编程小白必知什么是css和盒模型

小白必知什么是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属性。

本文来自企鹅号 - 壹念视觉媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入CSS,让网页开发少点“坑”

    问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

    企鹅号小编
  • 2017年最佳的20款css工具

    1.Radiobox ? 小型CSS3动画集合,适用于表现无线电输入内容。 2.SpinThatShit ? 面向单一元素加载器与运行器的SCSS集合。 3.T...

    企鹅号小编
  • 胡泳:如果总想着和机器人竞争,你就已经输了

    你能像《终结者》里的机器人T-800那样强壮和生猛,完成保护别人的任务吗?你能像《机器人总动员》里的WALL·E那样长期机械重复并有效率地进行垃圾清理和回收吗?...

    企鹅号小编
  • 【融职培训】Web前端学习 第2章 网页重构4 css选择器和常用属性

    CSS(层叠样式表)控制着网页的样式,例如我们之前编写的HTML文件,文字的颜色都是默认的黑色,如果希望将文字设置成其他颜色,就需要CSS了,可以在HTML文件...

    学习猿地
  • Web前端学习 第2章 网页重构4 css选择器和常用属性

    CSS(层叠样式表)控制着网页的样式,例如我们之前编写的HTML文件,文字的颜色都是默认的黑色,如果希望将文字设置成其他颜色,就需要CSS了,可以在HTML文件...

    学习猿地
  • 机制和原理——语法基础

    CSS的基本目标是让浏览器以指定的特性去绘制页面元素,这些是由属性和属性值的定义来实现的。

    Html5知典
  • 胡泳:如果总想着和机器人竞争,你就已经输了

    你能像《终结者》里的机器人T-800那样强壮和生猛,完成保护别人的任务吗?你能像《机器人总动员》里的WALL·E那样长期机械重复并有效率地进行垃圾清理和回收吗?...

    企鹅号小编
  • CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

    柴小智
  • JavaScript中的过滤器(filter)

    filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为fa...

    刘亦枫
  • (47) 堆和PriorityQueue的应用 / 计算机程序的思维逻辑

    45节介绍了堆的概念和算法,上节介绍了Java中堆的实现类PriorityQueue,PriorityQueue除了用作优先级队列,还可以用来解决一些别的问题,...

    swiftma

扫码关注云+社区

领取腾讯云代金券