css行内框和块框
来源:互联网 发布:网络补课平台哪个好 编辑:程序博客网 时间:2024/06/11 23:23
大家都知道DOM元素在css样式的定义下分为内联元素和块元素。由于浏览器的盒模型我们可以把元素看成一个个框,所以这两种分类又叫做行内框和块框。本篇文章旨在介绍浏览器对这两种框不同的呈现模式。
块框(块元素)
除了严格遵守盒模型—-某个元素在浏览器中所占空间由元素大小,内边距,边框和外边距构成,还服从外边距叠加原则。所谓外边距叠加原则准确的来说并不是求和原则而是求最大原则。例如:
(1)上下两个紧挨着的div元素,上面的div元素设置了margin-bottom,下面的div元素设置了margin-top,加入给这两个div都加上一个border,那么这时候这两个div在浏览器中呈现出来的效果并不是两个边框之前相距margin-botton + margin-top的和,而是相距两个值中的最大的那个。
(2)不仅对于不同且相邻的块元素由margin叠加原则,对于同一个元素相邻的margin也有叠加规则。想想空元素,它的外上边距和外下边距不就是直接相邻的吗?
行内框(内联元素)
行内元素不遵守严格的盒模型。它在浏览器中垂直占据的位置只��️元素的大小决并且无法用css为行内框设置高度,且浏览器会忽视padding和margin的设置 。对于margin我们无论设置什么值都没有效果,但是对于行内框有一个padding陷进。举例来说,如果在页面写一个span,为它加上border线,然后改变padding的值,这时边界框就会变高,表面上看起来padding的值撑起了行内框的高度,整个框的高度由元素高和上下内边距组成,但是如果你在该span下面写一个div,那么问题来了。div并不会和span隔pandding那么宽,而是直接在span元素行高结束的地方另起一行。这就说明了浏览器对于span盒子的解释和块框完全不同,垂直方向的padding,margin并不会为该元素在浏览器中占据空间行内框的高度只由行内框的内容自动撑起,因为这种方式所以唯一改变行内框高度的方法就是为行内元素设置行高。**
互相转换
css的display:block/inline/none可以设置元素为行内框或者块框。
- css行内框和块框
- CSS的块元素和内联元素
- CSS内联元素和块级元素
- css内联对象和块对象 (
- css 块级元素和内联元素
- CSS块级元素和内联元素
- CSS的内联和块元素
- CSS块元素和内联元素特征
- CSS 块元素和行内元素
- css-包含块框外边距叠加
- 详解CSS布局设计块元素和内联元素
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- css中常见的块级元素和内联元素
- css块级元素和内联元素的区别
- CSS文档流与块级元素和内联元素
- CSS文档流与块级元素和内联元素
- HTML5中的Web Worker
- Simulink解析带有系数和偏移量的CAN报文信息
- IntelliJ IDEA集成svn
- 【LeetCode】26. Remove Duplicates from Sorted Array
- java学习前三天
- css行内框和块框
- 常用STL容器及算法举例
- SSD训练自己的数据集
- 【HDU1234】 开门人和关门人 (sort)
- 201409-2 画图
- 软件实施整个流程中所涉及的文档有哪些?
- Lucene&&Solr——分析器(Analyzer)
- spring-data-jpa
- python+selenium自动化测试环境搭建