盒模型要点知识

务必注意看,这可是前端面试 必定会遇到 的问题。

  • box-sizing

    盒模型的主要CSS属性,除继承外有两个值:

    1. content-box

      这里不再细说历史原因,只说其作用。

      content-box将一个标签元素所占的 物理像素区域 的计算方法表达为:宽高 + 内边距 + 边框 + 外边距

    2. border-box

      border-box将一个标签元素所占的 物理像素区域 的计算方法表达为:宽高、内边距、边框的最大值 + 外边距

      这里说的宽高就是CSS属性的width与height,或者是子标签所撑起来的大小。

      下面介绍其他三个相关属性

  • 内边距(padding)

    首先,你想想一个立方体包装盒,其内部有一个小一点的盒子,那么里面盒子与外面这个盒子相隔的区域就是内边距,换做HTML标签具象化如下:

    其中红色区域就是内边距

  • 边框(border)

    边框就是字面意思,其HTML具象化如下:

    其中黑色就是边框

  • 外边距(margin)

    外边距就是标签间的间距或便签与父标签边线的距离。 严格来说与标签大小无关,但是影响视觉上的位置。HTML具象化需调试指出,如下:

    其中的最外圈的黄色区域就是margin了。

    注意一下:margin可以负值;inline标签的上下margin无效。


如果你确实明白了上述概念后,有如下图示与解说,详细说了具体的标签大小计算方式,这里注意,标签大小是指 物理像素大小,而不是上文说的 物理像素区域

所占大小就是实际的像素值,而所占区域是包含了margin外边距的。

注意计算时候,padding和border可都是有四边的。
官方定义border-box是指把padding与border都算作宽高,理解上有歧义,所以你直接取值当做wh与padding与border最大值即可。


小建议

强烈推荐使用border-box来在实际中使用,实际工作或项目中,定制好padding与border后再去修改这两个值的可能性远远低于不改的可能性,所以能用border-box就用border-box吧,* {box-sizing: border-box;}可能是个好习惯。

否则UI丢你个80*80像素大小的样式,你自己就去拆分吧。


源码相关

CodePen

如果文章对你有一点帮助,我就非常开心了。
喜欢文章的话,请关注下我,定期发布技术相关文章,满满都是干货。


CSS入门之盒模型(六分之四)的更多相关文章

  1. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  2. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  3. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  4. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  5. 一分钟让你明白CSS中的盒模型

    想必初学者对CSS盒模型总是很困惑吧.下面一分钟让你彻底明白盒模型: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...

  6. CSS学习笔记——盒模型,块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  7. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  8. CSS中的盒模型

    CSS的盒模型描述了一些长方形盒子,这些长方形盒子被用来表示文档树中的元素,并根据视觉格式化模型进行定位. 1. 盒子的尺寸 每个盒子都有一个content区域(比如文本.图片等)和可选的包围cont ...

  9. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

随机推荐

  1. [CSP-S模拟测试]:String Master(暴力)

    题目描述 所谓最长公共子串,比如串$A:"abcde"$,串$B:"jcdkl"$,则它们的最长公共子串为串$"cd"$,即长度最长的字符串 ...

  2. Golang操作MySQL的正确姿势

    封装原因: 查看了很多网上提供的ORM类型的数据库操作,觉得比较麻烦,需要提前配置很多的表结构体,然后才能使用,对于数据表很多的项目就配置起来就比较麻烦,所以对golang的mysql包进行了外层包装 ...

  3. KMP算法中next数组的构建

    记得初学$kmp$的时候 老师让大家把它直接背下来 然而不理解的话 不仅调试起来比较慢 很多题目也难往$kmp$上想 ----------------------------------------- ...

  4. 使用SSH方式实现Git远程连接GitHub/gitlab

    参照: https://blog.csdn.net/wuli_smbug/article/details/81480162

  5. HttpCanary——最强Android抓包工具!

    迎使用HttpCanary——最强Android抓包工具! HttpCanary是一款功能强大的HTTP/HTTPS/HTTP2网络包抓取和分析工具,你可以把他看成是移动端的Fiddler或者Char ...

  6. CENTER OS7关闭防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,之前版本是使用iptables. 所以在CentOS 7执行下面命令是无法查看防火墙状态的. [root@localhost ~]# ser ...

  7. HDU 1028 Ignatius and the Princess III (动态规划)

    题目链接:HDU 1028 Problem Description "Well, it seems the first problem is too easy. I will let you ...

  8. python 装饰器 第十一步:多层装饰器的嵌套

    #第十一步:多层装饰器的嵌套 #装饰器1 def kuozhan1(func): #定义装饰之后的函数 def neweat1(): # 扩展功能1 print('1-----饭前洗手') # 调用基 ...

  9. Mybatis简介与原理

    经常面试别人或者被面试,对Mybatis简介与原理这个问题的回答千差万别,为了更好的服务与以后,来个原理介绍. 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 20 ...

  10. Codeforces 1132G(dfs序+线段树)

    题面 传送门 分析 对于每一个数a[i],找到它后面第一个大于它的数a[p],由p向i连边,最终我们就会得到一个森林,且p是i的父亲.为了方便操作,我们再增加一个虚拟节点n+1,把森林变成树. 由于序 ...