CSS百分比值详解：字体与布局应用

97 浏览量更新于2024-09-01 收藏 69KB PDF 举报

在深入理解CSS中的百分比百分比值的使用时，我们首先要明白百分比是一种相对单位，其核心概念是基于父元素的属性进行尺寸计算。在CSS中，当应用于字体大小（如`font-size`属性）时，100%表示与父元素的默认字体大小相等。例如，在大多数浏览器中，`<html>`和`<body>`标签的默认字体大小为100%，这意味着设置它们的`font-size`为100%时，它们的字体将保持一致的大小。当你使用百分比来设置元素的宽度（`width`）和高度（`height`）时，这些值会根据具有相同属性的父元素的实际尺寸动态调整。例如，在下面的代码片段中： ```css div.parent { margin: 150px; width: 200px; height: 200px; border: 1px solid blue; } div.child { width: 50%; height: 50%; border: 1px dashed black; } ``` `div.child`的宽度和高度各占其父元素`div.parent`的50%，这意味着`div.child`的宽度和高度会根据`div.parent`的实际宽度和高度进行计算。接下来，我们讨论定位方式中的父元素概念。在CSS定位中，有几种定位模式： 1. 相对定位（`position: relative;`）：元素的位置相对于其正常文档流的位置进行调整，其父元素必须存在且有正常的文档流。例如，上面的`div.child`就是相对其父元素`div.parent`定位的。 2. 绝对定位（`position: absolute;`）：元素完全脱离文档流，其位置相对于最近的已定位祖先元素（包括相对定位、绝对定位和固定定位，但不包括浮动）或者视口（当没有定位祖先时）。这里的“最近”指的是包含关系，而不是物理距离。 3. 浮动（`float`）：用于文本环绕，使元素脱离文档流，但仍然作为普通元素参与渲染。浮动的父元素必须有足够的空间容纳浮动子元素。 4. 固定定位（`position: fixed;`）：元素相对于视口定位，不随页面滚动而变化，通常用于创建侧边栏或头部导航。理解父元素对于确定元素的定位至关重要，因为定位的计算和行为依赖于它们之间的关系。记住，元素的定位并非孤立存在，而是与父级元素以及整个文档结构紧密相关。通过灵活运用百分比和各种定位模式，可以实现网页布局的高效设计。

彻底掌握彻底掌握CSS中的中的percentage百分比值使用百分比值使用

百分比旨在相对于父元素的相同属性的大小。

如果用来设置字体，则相对的就是父元素的字体大小。

大多数浏览器中<html> 和<body> 标签中的默认字体尺寸是100%.

CSS Code复制内容到剪贴板

html {font-size: 100%;}

body {font-size: 100%;}

100% = 1em = 16px = 12pt

如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

CSS Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

div.parent {

margin:150px;

width: 200px;

height: 200px;

border: 1px solid blue;

}

div.child {

width: 50%;

height: 50%;

border: 1px dashed black;

}

</style>

</head>

<body>

</div>

</body>

</html>

再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中

如何找寻父元素？

由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。

XML/HTML Code复制内容到剪贴板

</div>

1.相对定位元素相对定位元素，它的父元素符合标签嵌套。

2.绝对定位元素绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定

位元素时）。

3.浮动元素浮动元素，它的父元素也符合标签嵌套。

4.固定元素固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。

注意一下绝对定位就行了，其他的相对简单。

CSS Code复制内容到剪贴板

<!DOCTYPE html>

<html>

<head>

html {

width:1000px;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38666114

粉丝: 7
资源: 971

CSS百分比值详解：字体与布局应用

百分比显示效果css代码

Jquery+css实现动态显示百分比的进展条

CSS3彩色进度条加载动画_CSS3_动画特效_

css中怎么比较百分比和像素大小

css width percentage

css percentage

Css js实现动态圆环百分比图案

thymeleaf百分比

HTML 数字转化百分号

html标签宽度的百分比怎样设置

最新资源