html盒子模型的实例,html盒模型的示例分析
html盒模型的示例分析
发布时间:2021-06-04 12:04:12
来源:亿速云
阅读:61
作者:小新
小编给大家分享一下html盒模型的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
1.1. 盒的内容区的尺寸— content width和content height —取决于几个因素:
--生成该盒的元素是否设置了'width'或'height'属性。
--该盒是否包含文本以及其它盒。
--该盒是不是表格等等。
1.2. 盒的背景色
--内边距和边框区域的背景样式由生成(该盒的)元素的'background'属性来指定。外边距背景总是透明的
2. 外边距属性: 'margin-top','margin-right','margin-bottom','margin-left'和'margin'
2.1. 外边距属性指定了盒的外边距区的宽度--'margin'简写属性一次性设置四周的外边距,而其它外边距属性只设置它们各侧的。这些属性适用于所有元素,但非替换的行内元素上的垂直margin将不会产生任何效果
2.2. 值类型,可以取下列值之一:--
指定一个固定宽度
--
百分比根据生成盒的包含块的width来计算。注意,这一点对于'margin-top'和'margin-bottom'也适用。如果包含块的宽度取决于该元素,那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值,但可能存在具体实现限制
2.3. 'margin-top', 'margin-bottom''margin-top', 'margin-bottom'
Value: | inherit
Initial: 0
Applies to: 除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption, table, inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited: no
Percentages: 参照包含块的宽度
Media: visual
Computed value: 指定的百分比或者绝对长度
这两个属性对非替换的行内元素无效
2.4. 'margin-right', 'margin-left''margin-right', 'margin-left'
Value: | inherit
Initial: 0
Applies to: 除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption, table, inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited: no
Percentages: 参照包含块的宽度
Media: visual
Computed value: 指定的百分比或者绝对长度
2.5. 'margin''margin'
Value: {1,4} | inherit
Initial: 见单独的各个属性
Applies to: 除display类型为table系列中除了table-caption,table和inline-table以外的所有元素(译注:也就是说,table系列display值中,margin-只适用于table-caption, table, inline-table,其余的都不适用,但margin-对非table系列都适用)
Inherited: no
Percentages: 参照包含块的宽度
Media: visual
Computed value: 见单独的各个属性
3. 合并外边距
相邻的垂直外边距会合并,除了:
----根元素盒的margin不合并
----如果一个带有间隙(clearance 译注:是指clear属性导致元素位置移动形成的间隙)的元素的上外边距与下外边距相邻,它的外边距会和紧挨着的兄弟(元素)的相邻外边距合并,但合并后不会再和父级块的下外边距合并
以上是“html盒模型的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
html盒子模型的实例,html盒模型的示例分析相关推荐
- 【盒模型】什么是盒模型
盒模型在前端的作用及概念: 在前端中盒模型可谓是十分重要的,它是CSS进行页面加载的基石,在页面CSS布局中盒模型规定了网页元素如何排列显示以及元素之间的相互关系.在H5中CSS样式定义所有元素都可以 ...
- TensorFlow Lite 开发手册(5)——TensorFlow Lite模型使用实例(分类模型)
TensorFlow Lite 开发手册(5)--TensorFlow Lite模型使用实例(分类模型) (一)新建CLion工程 (二)编写Cmakelist (三)编写main.cpp (四)下载 ...
- html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型 盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
- css3盒子模型微课_css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- html盒模型向上浮动,HTML5盒模型、浮动和定位
在此之前我们先了解一下块级元素和行内元素的区别 一.块级元素 1.总是从新的一行开始 2.高度.宽度都是可控的 3.宽度没有设置时,默认为100% 4.块级元素中可以包含块级元素和行内元素 二.行内元 ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- html盒子模型图片居中,CSS盒模型和图片水平居中和垂直居中
盒子水平居中,使用margin:0 auto .haha{ width: 500px; height: 500px; border: 1px solid #ccc; margin: 0 auto; } ...
- html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念 什么是盒模型,我们可以先直观的看一个东西 打开Chrome浏览器,F1 ...
- css3盒子模型微课_css3之盒模型
什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性有: content .padding .m ...
最新文章
- Dosbox+Masm汇编语言
- batch normalization
- 深度讲解:web前端性能优化
- SSD情何以堪!微软:扔掉你的旧PC换台新的
- 修改手机屏幕刷新率_到底高刷新率屏幕为智能手机带来什么?
- Installation error: INSTALL_FAILED_CONTAINER_ERROR
- mysql的date函数可以干啥,MySql的Date函数
- 【OS学习笔记】二十四 保护模式七:调用门与依从的代码段----特权级保护
- Zabbix监控解决方案
- java jdk使用教程_java初学者实践教程2-jdk的使用
- Redis的安装和使用之二------phpredis与phpRedisAdmin
- C语言程序设计实验报告——实验二
- matlab prn文件,PRN格式文件 如何打开PRN文件 PRN是什么格式的文件 用什么打开 - The X 在线工具...
- java 最大子段和问题,最大连续子数组和(最大子段和)
- 面试被问到你的优点和缺点时,该如何完美的回答
- gerrit常见错误与处理
- Python销售订单分析。
- 控制 Egress 流量
- 基于OpenGL的雷达P显的系统设计与仿真 PPI_雷达仿真_雷达模拟器_雷达目标_雷达ppi_PPI显示器_源码
- 关爱老年人·守住养老钱