|
|
51CTO旗下网站
|
|
移动端

3.2 盒模型

《前端程序员面试笔试宝典》第3章CSS基础,本章介绍的是CSS的基础知识,包括CSS的定义、目标和标准化等。本节为大家介绍盒模型。

作者:平文来源:机械工业出版社|2018-11-09 16:39

3.2   盒模型

每个HTML元素都可看成是一个矩形的盒子(box,也称为框),每个盒子都会包含外边距、边框、内边距以及内容,下面会将这个元素盒子比作现实生活中的纸盒,具体如下所列。

(1)外边距(margin)相当于盒子与盒子之间的间隙。

(2)边框(border)也就是盒子纸板的厚度。

(3)内边距(padding)相当于盒子中装的东西与盒子之间的间隙。

(4)内容(content)可理解为盒子里装的东西。

页面的布局就是一个个盒子按一定的方式来摆放,一般有两种摆放方式:

(1)在正常流(normal flow,也称为常规流或文档流)中,元素会按照其在HTML文档中的位置从左向右,从上向下,按顺序排布。

(2)脱离正常流,也就是不按顺序来排布,常用的实现方法有浮动(float)和绝对定位(absolute positioning)。


喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书会第9群:808517103

【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

218人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

83人订阅学习

Mysql DBA修炼之路

Mysql DBA修炼之路

MySQL入门到高阶
共24章 | 武凤涛

471人订阅学习

读 书 +更多

网管员必读——网络基础(第2版)

本书是在《网管员必读—网络基础》(第1版)基础上修改而成的。全书共分9章,分别介绍计算机网络概述(修改)、数制(新增)、网络通信基础...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客