小白必知什么是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 条评论
登录 后参与评论

相关文章

来自专栏我就是马云飞

一个精致的打钩小动画

前言 最近在看轻芒杂志的时候,看到一个动画很带感很精致; 恰好这段时间也在看【HenCoder】的自定义view教程(里面写得非常非常详细,也有相应的习题等等)...

2285
来自专栏带你撸出一手好代码

px转vw和vh的工具(对前端同学有用)

CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPho...

5898
来自专栏小狼的世界

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符...

1272
来自专栏HTML5学堂

移动端 模拟手机联系人触摸A~Z导航

HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类...

4055
来自专栏数据小魔方

图表中包含负值的双色填充技巧

今天教大家怎么在Excel里制作带负值的双色填充图表 正负值双色填充 ▼ 通常如果数据中带负值 默认的图表输出虽然能够显示负值 但是负值颜色与正值并没有任何区别...

2686
来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

2854
来自专栏斜述视角

0基础学习网页制作-Html

文章来自:4月14日早,在贵州大学北校区10栋715寝室,对物理学院同学培训的内容。

1262
来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

2653
来自专栏九彩拼盘的叨叨叨

前端文章收藏

1482
来自专栏何俊林

Android TV开发总结(五)TV上屏幕适配总结

前言:前面几篇总结一些TV上的小Sample,开源到GitHub: https://github.com/hejunlin2013/TVSample, 点击”阅...

2939

扫码关注云+社区

领取腾讯云代金券