css知多少(7)——盒子模型
1. 引言
从这一节开始,我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类:文字、块。
第一类——文字。这部分相对比较简单一些,例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值,这些东西在《css知多少(4)——解读浏览器默认样式》那一节已经说过了。另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参见《请用fontAwesome代替网页icon小图标》,这里就不再重复去讲了。
第二类——块。这部分的知识点非常多,重要的有:盒子模型,float,position,display。本文章讲盒子模型,后面的文章会依次介绍其他的内容。
2. 什么是“盒子”
说道“盒子”我还记得好几年之前,我还在上大学的时候,被人问道过“盒子模型”,我当时都不知道什么意思。回到宿舍急忙上网去查,原来就是我早就知道的margin,padding和border,但是我竟然不知道“盒子”这个词。——所以,不要只满足于网上查来的代码段、小技巧,要全面的了解一些知识体系。当然,后来我又知道,盒子模型不仅仅是margin,padding和border,还有其他的知识。
在此插一句题外话,也是我这几天思考的一点东西。我在思考:web前端的这么知识应该是怎样的一个知识体系架构?之前我以为可以以W3C为纲要,把W3C的东西学会了就够了。后来发现我错了,W3C还不全面。
真正全面的覆盖了web前端知识体系的东西是——浏览器内核——这并不是说让你去详细了解浏览器内核、做出一个浏览器。浏览器是web前端代码运行的一个平台,浏览器内核里有哪些模块,我们就需要去学习哪些东西。详细的先不说,以后有机会再分享。
这里照顾一下初学者。初学css的朋友,一开始学css基础知识的时候一定学过padding,border和margin,即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一个小小的iphone,收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层(内边距),iphone白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。
如上图,真正的内容就是这些文字,文字外围有10px的内边距,5px的border,10px的外边距。看到盒子了吧?
3. 盒子的宽度
3.1. 设置了固定宽度的情况下
遇到这种问题,我建议在查询各种资料之前,不如先自己动手做一个实验:
如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是300px,就是我们设置的宽度。
因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。
没关系,这个东西不友好早就有人发现了,而且已经解决,下文再说。
3.2. 充满父容器的情况下
默认情况下,div的display:block,宽度会充满整个父容器。如下图:
但是别忘记,这个div是个盒子模型,它的整个宽度包括(内容宽度 + border宽度 + padding宽度 + margin宽度),整个的宽度充满父容器。
问题就在这里。如果父容器宽度不变,我们手动增大margin、border或padding其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。
3.3. 包裹内容的情况下
这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding宽度 + border宽度 + margin宽度)之和。
4. 再看盒子的宽度
前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box
如上图,div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。
建议大家在为系统写css时候,第一个样式是:
大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢?
5. 纵向margin的重叠
这里提到margin,不得不提一下margin的这一特性——纵向重叠。如下图,<p>的纵向margin是16px,那么两个<p>之间纵向的距离是多少?
按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px。因为纵向的margin是会重叠的,大的会把小的“吃掉”(可以自己去实验)。
6. 用div画“三角”
“三角”在日常的网页中是很常见的,例如百度首页:
以及我的开源项目wangEditor(http://www.cnblogs.com/wangfupeng1988/p/4198428.html)中的页面效果:
你当然可以使用背景图片、fontAwesome来实现这一效果,但是你也可以用div来实现这一效果,很简单,而且可以封装通用:
7. 总结
这一节我们用不小的篇幅讲解了盒子模型的相关知识,比较适合初学者,但是更加适合那些没有系统学习过css的有经验的开发人员,还是那句话:建议大家系统的学习知识体系。
下面我们将继续这一部分,再说一说float。
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程:《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
也欢迎关注我的开源项目——wangEditor,简洁易用的web富文本编辑器
-------------------------------------------------------------------------------------------------------------
css知多少(7)——盒子模型相关推荐
- CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
- CSS基本知识之盒子模型
CSS基本知识之盒子模型 首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
- CSS布局:CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的 优先级 公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
- CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动 一.选择器 选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
- html盒子模型多个盒子,css如何使用不同盒子模型
css如何使用不同盒子模型 css使用不同盒子模型可以通过css属性box-sizing来设置,当它的值为content-box时,是标准的盒子模型:当它的值为border-box时,是IE盒子模型: ...
- html如何设置浮动的盒子,CSS的浮动以及盒子模型
原标题:CSS的浮动以及盒子模型 "没错,就是他." 今天我们来了解一下浮动 我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动 这 ...
- CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...
- CSS大小设置实例——盒子模型
一.浏览器效果和Dreamweaver设计视图: 二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
最新文章
- qlabel可以选中吗_QLabel-标签控件的应用
- asp.net ajax学习系列功能强大的UpdatePanel控件
- SecureCRT图形界面(通过设置调用Xmanager - Passive程序)
- mysql的索引类型以及优缺点
- 【树型DP】BZOJ1564 二叉查找树(noi2009)
- 如何用CSS实现图像替换链接文本显示并保证链接可点击
- Python之functools.reduce使用
- 【chrome插件】web版微信接入图灵机器人API实现自动回复
- 职称计算机初级考试题,初级职称计算机考试题库
- IDM 扩展安装版本冲突解决(Chrome尝试对扩展程序进行降级处理)
- 【建模教程】你还不知道的游戏模型规范要求知识点,汇总赶紧收藏!
- 国美易卡使用HTTP连接方式,国美易卡保证客户端状态
- Unity导入模型和材质丢失问题处理(大批量操作)
- Android:从源码剖析Hander机制
- cocos2dx 植物大战僵尸 18 土豆雷
- 世界上第一代电子计算机每秒运算次数,计算机基础知识讲稿一
- 第一个ASP.net的CRED(创建读取编辑删除)页面
- 【基础算法】铲雪车问题(BZOJ1190)
- 服务器自检后显示scsi,SCSI RAID卡常见故障分析及BIOS升级指导
- 安卓手游内存脚本开发!30岁以后搞Android已经没有前途?Android岗
热门文章
- Android Studio support 26.0.0-alpha1 Failed to resolve: com.android.support:appcompat-v7:27.+ 报错解决方法
- springboot在启动jar由于配置hibernate的映射文件上classpath导致的!BOOT-INF/classes/!路径出现!号问题解决方法
- 微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
- SQLServer IP不能登录问题解决
- 算法设计与分析--01背包问题(动态规划法解决)
- 微信小程序访问豆瓣电影api400错误解决方法
- 对于HTTP过程中POST内容加密的解决方案
- 在GitHub存储库中创建标记
- Menu菜单资源Android
- SpringBoot解决jpa,NoSession问题