您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

什么是盒子模型?盒子模型有哪些属性

时间:2019-11-07 09:08:41  来源:  作者:

在body中的每一个html标签实际上都被包围在一个看不见的矩形中,这个矩形就叫做"盒"。

Web前端开发,什么是盒子模型?盒子模型有哪些属性

盒模式

首先介绍下HTML中标签的分类

一、HTML的标签分为两种:块标签和内敛标签

1、块标签:占据了容器的整个宽度,容器指的是 body 标签,每个块标签所在的盒都尽可能的占据页面的整个宽度,就是要占用浏览器一整行的位置。

块标签:包含p、div、ul、ol、li、h1~h6等;块标签独自占据一行、自带换行的效果;除了div以外,一般块级标签都会有内外边距,宽度和高度。

2、内联标签:不会占据容器的一整行,它会和它周围的内容在一起,在一行内自然的从左到右依次显示,内容的多少决定了内联标签的宽度。

内联标签:包含 span,a,img,input,label等

浏览器怎么会知道盒子与盒子之间的距离应该是多少?就会用到盒模式

二、盒模式

盒模式是描述标签的边框和间距的一种方式

1、盒模式由4部分组成

1)内容区域 content area

内容区域中包含的是盒子中真正的内容(文本,图片等)

2)补白或内边距 padding

padding包围在内容区域的边缘,分为上,右,下,左四个区域

3)边框 border

border包围在padding的边缘,也分为上,右,下,左四个区域

4)边距 margin

margin包围在border的上、右、下、左四个边缘

Web前端开发,什么是盒子模型?盒子模型有哪些属性

盒子模型

2、如何设置盒模式的属性?

1)每次设置padding属性的一个值

 h1 {

 padding-top: 6px;

 padding-right: 3px;

 padding-bottom: 0;

 padding-left: 0;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

padding属性

或者按照顺时针方向一次性设置:上,右,下,左

 h1 {

 padding: 6px 3px 0 0;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

padding属性

2)设置三个关于border的属性

 h1 {

 border-width: 6px;

 border-style: solid;

 border-color: #ffff00;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

border属性

或者使用简写的形式

 h1 {

 border: 6px solid #ffff00;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

border属性

也可以只设置其中一侧的边框

 h1 {

 border-bottom: 6px solid #ffff00;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

border属性

4)添加margin的方式和padding是一样的,如:

 h1 {

 margin-top: 6px;

 margin-right: 0;

 margin-bottom: 6px;

 margin-left: 0;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

margin属性

或者按顺时针方向一次性设置

 h1 {

 margin: 6px 0 6px 0;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

margin属性

当上下和左右参数一致的时候,也可以这样设置,如下:

 h1 {

 margin: 6px 0;

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

margin属性

3、计算盒子的尺寸

在所有标签中都有padding,border,margin一层层的包围在内容区域的外面,四个部分被设置后,整个盒子的尺寸计算方法如下:

整个盒子的宽度=内容区域的宽度+左padding+右padding+左border+右border+左margin+右margin

整个盒子的高度=内容区域的高度+上padding+下padding+上border+下border+上margin+下margin

4、默认浏览器的样式

当你没有为网页定义样式的时候,浏览器会使用默认的样式,把下面的这段代码加入到你的css开始部分覆盖浏览器的默认样式,代码包含我们前面介绍过的标签,这样我们就可以根据自己需求自由控制网页了,这个过程称之为CSS的初始化,在实际的项目中,初始化是必不可少的部分。

 html, body, h1, h2, h3, p, ol, ul, li, a {

 padding: 0;

 border: 0;

 margin: 0

 }
Web前端开发,什么是盒子模型?盒子模型有哪些属性

设置默认浏览器样式

总结:

  • 每个标签都填充在一个看不见的盒子中
  • 块标签所在的盒会占据浏览器一整行的位置
  • 使用padding可以设置边框到内容区域的距离
  • 使用margin可以设置边框之外的距离


Tags:盒子模型   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
在body中的每一个HTML标签实际上都被包围在一个看不见的矩形中,这个矩形就叫做"盒"。盒模式首先介绍下HTML中标签的分类一、HTML的标签分为两种:块标签和内敛标签1、块标签:占...【详细内容】
2019-11-07  Tags: 盒子模型  点击:(449)  评论:(0)  加入收藏
▌简易百科推荐
一、Aliyun Java Initializr阿里中间件发布的定制版Spring Initializr。是集文档、erminal、编辑器三个窗口为一体的。 二、Cloud Toolkit简单来说就是可以快速部署远程服务...【详细内容】
2021-07-15  传智教育官方账号    Tags:在线工具   点击:(4)  评论:(0)  加入收藏
本文介绍PacketQueue,相对于FrameQueue来说比较简单,可以类比Android中的MessageQueue。PacketQueue总体介绍 单向链表结构。first_pkt、last_pkt,是链表的起点和终点结点;recyc...【详细内容】
2021-07-13  程序员老z    Tags:源码   点击:(3)  评论:(0)  加入收藏
TCP客户端:1.建立连接套接字,设置Ip和端口监听,socket()2.建立连接 connect3.write() 获取网络流量对象 发送数据4.read()获取网络流量对象 接收数据5.关闭套接字 TCP服务器端1...【详细内容】
2021-07-08  树朦胧    Tags:socket编程   点击:(8)  评论:(0)  加入收藏
Rust的异步功能很强大,但也以晦涩难懂著称。在本文中,我将总结之前提过的一些想法,并给出一些新的点子,看看这些想法放在一起能产生什么效果。...【详细内容】
2021-07-07  弯月  CSDN  Tags:Rust   点击:(6)  评论:(0)  加入收藏
1.进程 2.线程 3.主线程主线程就是java 中main方法 如果是单线程的话,有p1,p2两个对象,他们中间有一条语句。若是单线程,若这条语句出错,则p2不执行了。若是多线程则p2还可以执...【详细内容】
2021-07-04  程序猿凯撒    Tags:线程   点击:(14)  评论:(0)  加入收藏
作者 | edmz译者 | 王强策划 | 万佳多年来,我已经为很多 API 实现了客户端。为此,我整理了一份清单,列出了一些可以改善开发体验的小技巧。这些想法大都与 API 设计或架构无关...【详细内容】
2021-06-29  技术联盟总坛    Tags:API   点击:(16)  评论:(0)  加入收藏
本系列会讲述微信机器人技术的实现,第一讲主要了解微信网页版给我们提供的http接口,这一步是做一个基于微信网页版机器人的基础和难点。本讲将微信网页版的主要接口罗列出,并给...【详细内容】
2021-06-29  闪客sun  博客园  Tags:微信   点击:(12)  评论:(0)  加入收藏
我们看到很多关于在浏览器里使用js-ipfs的问题。这篇文章展示了用js-ipfs搭建最小化的聊天应用的例子,这个应用可以在浏览器中运行。它使用WebRTC去实现浏览器对浏览器的连...【详细内容】
2021-06-25  IPFSFilecoinFIL    Tags:IPFS连接   点击:(14)  评论:(0)  加入收藏
先举例子来理解这2个概念的区别。老师让两个同学去办公室谈话。如果这两同学(进程)是并列跨过办公室门(CPU)的,那么就是并行。如果同学A先进同学B后进入(或者先B后A),或者两人...【详细内容】
2021-06-24  linux技术栈    Tags:并发   点击:(18)  评论:(0)  加入收藏
这些年前端发生了天翻地覆的变化,几乎每隔几个月就有新的框架和技术诞生,有些技术可能你还没来得及学习,它就已经成为过去时了。2021年前端会有哪些变化,哪些技术会脱颖而出呢?Ja...【详细内容】
2021-06-23  梦回故里归来  今日头条  Tags:前端编程   点击:(18)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条