CSS高度和宽度

最新推荐文章于 2024-04-16 22:29:27 发布

F_AA

最新推荐文章于 2024-04-16 22:29:27 发布

阅读量1.7k

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/fangjuanyuyue/article/details/105052888

版权

本文详细探讨了CSS中块级元素和行内元素的高度、宽度计算，包括正常流中的块级元素水平宽度计算，百分比、负外边距的应用，以及行内元素高度的确定。此外，还介绍了如何通过`display`属性改变元素的显示方式，如`inline-block`。

摘要由CSDN通过智能技术生成

CSS假定每个元素都会生成一个或多个矩形框，这称为元素框，各元素框中心有一个内容区。内容区周围有可选的内边距、边框和外边距。如下图：

元素内容区
注：1. 元素背景显示的区域是内容区+内边距

** 2. 边框和内边距的宽度不能会负值，外边距可以为负值**

术语：

正常流：传统的HTML文档的文本布局，文本从左向右，从上向下显示。大多数元素都在正常流中，要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素
非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。大部分HTML元素都是非替换元素。
替换元素：这是指用作为其他内容占位符的一个元素。img就是一个典型的替换元素，它只是指向一个图像文件，这个文件将插入到文件流中替换img所在的位置。
块级元素：在正常流中，在其框之前和之后生成“换行”，所以在正常流中的块级元素会垂直摆放。例如p, div
行内元素：元素不会再之前或者之后生成“换行”，他们是块级元素的后代。例如: span, strong, i

块级元素的框模型

一个元素的width被定义为从左内边界到右内边界的距离，所以width影响的是内容区的宽度，而不是整个可见的元素框。

正常流中块级元素的水平部分的总和就等于父元素的width。

公式1： maring-left, border-left, padding-left, width, padding-right, border-right, margin-right 这7个属性的和加在一起是元素包含块的宽度，这往往是块元素的父元素的width

这7个元素中，width, margin-left, margin-right 可以设置为auto，其余属性必须设置为特定值，或者默认是0。

auto的使用情景以及值的计算：

如果这三个值都不为auto，那么margin-right会被强制为auto，用来弥补实际值与所需总和的差距。
如果margin-left和margin-right不为auto，width为auto，则width会按照上面的公式1计算出某个值，从而达到总宽度。
如果margin-left和margin-right为auto，width不为auto，则会将margin计算为相同的值，从而使元素居中。（元素居中的一种方法）
如果三个属性都为auto，则margin-left和margin-right都会为0，width会尽可能的宽。

在margin未负的情况下，上述公式1仍然成立，可能导致子元素超出父元素。

在上述值设为百分数时，会应用同样的基本规则。百分数的相对值是包含块的宽度

非替换块元素的所有规则同样适用于替换块元素。也就是说，上述的公式仍然适用于非替换元素。

但有一个例外，如果width 为auto，元素的宽度则是内容的固有宽度

<img src="smile.png" style="display:block;width:auto;margin:0 px">
<!-- 如果图片的实际宽度是100px，该元素的宽度也为100px -->

如果一个替换元素的width不同于其固有宽度，那么height值也会成比例变化，除非将height也设置为一个特定值。

关注