在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
盒子模型尺寸设置及代码书写格式介绍,子模型就是把HTML页面的元素看作一个矩形盒子,矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成,需要掌握盒子模型中的各个属性设置。
盒子模型学习目标:
能够知道盒子模型中的各个属性的设置。
1、盒子模型是什么?
盒子模型即把HTML页面的元素看作一个矩形盒子,矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。盒子模型示意图如下:
2、盒子模型相关样式属性
•盒子的内容宽度(width),注意:不是盒子的宽度
•盒子的内容高度(height),注意:不是盒子的高度
•盒子的边框(border)
•盒子内的内容和边框之间的间距(padding)
•盒子与盒子之间的间距(margin)
设置宽高:
设置盒子的宽高,此宽高是指盒子内容的宽高,不是盒子整体宽高
设置边框:
设置一边的边框,比如顶部边框,可以按如下设置:
说明:
其中10px表示线框的粗细;solid表示线性;red表示边框的颜色
设置其它三个边的方法和上面一样,把上面的'top'换成'left'就是设置左边,换成'right'就是设置右边,换成'bottom'就是设置底边。
四个边如果设置一样,可以将四个边的设置合并成一句:
设置内间距padding
设置盒子四边的内间距,可设置如下:
上面的设置可以简写如下:
四个方向的内边距值。 */
padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下:
设置外间距margin
外边距的设置方法和padding的设置方法相同,将上面设置项中的'padding'换成'margin'就是外边距设置方法。
盒子的真实尺寸
盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:
•盒子宽度 = width + padding左右 + border左右
•盒子高度 = height + padding上下 + border上下
盒子模型总结:
•盒子模型的5个主要样式属性◦width:内容的宽度(不是盒子的宽度)
◦height:内容的高度(不是盒子的高度)
◦padding:内边距。
◦border:边框。
◦margin:外边距
•盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响,不会受到外边距属性的影响。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
为什么Python编程语言应用如此广泛?
很多人都知道Python是一门简单易学、应用广泛的编程语言。但是大家是否真的明白为什么它能够简单易学?为什么能够应用广泛吗?同为编程语言,为什么Python更适合实现自动化运维?为什么Python能够实现科学计算?为什么Python是人工智能的首选语言?带着这些疑问,小编为大家揭秘Python为什么应用如此广泛?
5525
2019-11-12 17:27:00
学Python为什么大家都推荐去培训
在Python的广泛应用于人才市场大量需求的背景下,越来越多的同学开始学习Python编程语言。作为高级编程语言Python简单易学可读性强,有利于学习者快速入门。一般来说如果零基础自学Python的话,大概学习周期在6-12个月,然而自学的同学大部分都被推荐过去参加培训。在这里小编与大家交流一下为什么学习Python推荐去参加培训!
4205
2019-11-22 18:31:00
Python的特性与搭建环境
Python是用 C语言开发的,但 Python不再具有 C中的指针这样的复杂数据类型。Python具有强大的 OOP特性,并且简化了 OOP的实现。该方法消除了面向对象的元素,如保护类型、抽象类和接口。
3327
2020-07-06 14:37:17
Python基础学完了再学什么?
基础阶段学完Python 基础语法、python 容器、函数和文件操作、面向对象、 python编程和web基础、Linux 操作系统多任务编程、Python 网络编程、静态 web 服务器、HTML、CSS、JavaScript、数据库 MySQL、正则表达式、Python 进阶、mini-web 框架后,需要在进行实操积累项目实战经验。
3072
2021-04-08 16:18:17
CSS 选择器的种类有哪些?怎么用?
CSS 选择器的种类有标签选择器、类选择器、层级选择器(后代选择器)、id选择器、组选择器、伪类选择器,作为程序员应该具备根据不同的场景选择适合的CSS选择器。
1976
2021-12-09 15:39:55