青少年编程与数学 01-006 设计网页的外观 10课题、尺寸-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/140393510

青少年编程与数学 01-006 设计网页的外观 10课题、尺寸

课题摘要
课题要求
一、尺寸
二、尺寸单位
三、高度和宽度
四、max-width
五、练习
课题作业
附录一、人物介绍：克里斯·拉特纳

本文介绍在编写网页时如何设置元素的尺寸。

“精确度是科学的语言。”
Precision is the language of science.
—— 艾萨克·牛顿 (Isaac Newton) | 英国物理学家和数学家 | 1643 ~ 1727

“在艺术中，细节是关键；在科学中，精确度是关键。”
In art, details are key; in science, precision is key.
—— 路易·阿加西 (Louis Agassiz) | 瑞士-美国生物学家和地质学家 | 1807 ~ 1873

“完美的设计不仅仅是关于形式和功能，也是关于精确度和细节。”
Perfect design is not just about form and function, but also about precision and detail.
—— 迪特·拉姆斯 (Dieter Rams) | 德国工业设计师 | 1932 ~

“在网页设计中，每一个像素都很重要。”
In web design, every pixel counts.
—— 埃里克·迈尔 (Erik Meyer) | 美国网页设计师和作家 | 1960 ~

课题摘要

本文介绍在编写网页时如何设置元素的尺寸。

课题要求

理解编写网页中元素尺寸的重要性。
掌握编写网页过程如何设置元素的尺寸。

一、尺寸

CSS3提供了多种尺寸相关的属性，这些属性帮助开发者更精细地控制页面布局和元素的大小。以下是一些主要的尺寸属性：

width 和 height
- 设置元素的宽度和高度。这些可以是固定的像素值、百分比、em、rem 或者视口单位（vw, vh）等。
min-width 和 min-height
- 设置元素的最小宽度和最小高度。当元素的尺寸被压缩时，不会小于这个设定的最小值。
max-width 和 max-height
- 设置元素的最大宽度和最大高度。当元素尺寸被拉伸时，不会超过这个设定的最大值。
padding
- 设置元素内部边距，即内容区域与边框之间的空间。
margin
- 设置元素周围的外边距，即元素边框与相邻元素之间的空间。
border
- 设置元素边框的样式、宽度和颜色。
box-sizing
- 控制元素的宽度和高度是否包含内边距和边框。取值可以是content-box（默认值）或border-box。
flex-grow, flex-shrink, flex-basis
- 在Flexbox布局中，用于控制元素如何分配空间。
grid-row, grid-column, grid-auto-flow, grid-template-columns, grid-template-rows
- 在Grid布局中，用于控制元素的放置和大小。
align-self, align-items, justify-content, justify-items, justify-self
- 用于Flexbox和Grid布局中，控制元素的对齐方式。
transform
- 能够改变元素的位置、尺寸和形状，例如缩放(scale)、旋转(rotate)、倾斜(skew)。
aspect-ratio
- CSS中的新属性，用于设置元素的宽高比例，即使宽度或高度被改变，也能保持比例不变。
object-fit 和 object-position
- 当图片或视频插入到一个容器中时，用于控制其填充容器的方式以及在容器中的位置。
resize
- 控制用户是否可以调整元素（如textarea）的大小。
overflow
- 控制元素溢出的内容如何处理，可以是visible、hidden、scroll或auto。
line-height
- 控制行间距，影响文本的垂直排列。
letter-spacing 和 word-spacing
- 分别控制字符间和单词间的水平间距。
box-shadow
- 为元素添加阴影效果，可以控制阴影的大小、位置和模糊程度。
text-shadow
- 为文本添加阴影效果，可以单独控制每个文本的阴影。

这些属性可以组合使用，以创建复杂的响应式布局和动态的视觉效果。在实际应用中，确保测试各种设备和浏览器上的布局表现，以保证良好的用户体验。

二、尺寸单位

在CSS3中，尺寸单位是用来表示长度、宽度、高度、边距、内边距、字体大小等属性值的计量单位。CSS3引入了新的单位类型，并且支持旧版CSS中的单位。以下是一些常用的尺寸单位：

绝对单位

绝对单位是指那些与设备相关的固定单位，它们在不同设备上可能代表不同的物理尺寸。

px (pixels) - 像素，最常用的尺寸单位，通常与屏幕分辨率有关。
pt (points) - 打印和排版行业常用的单位，1点等于1/72英寸。
pc (picas) - 另一种打印和排版单位，1皮卡等于12点或1/6英寸。
in (inches) - 英寸。
cm (centimeters) - 厘米。
mm (millimeters) - 毫米。

相对单位

相对单位基于其他尺寸的值，这使得它们在响应式设计中非常有用。

em - 相对于当前元素的字体大小。如果应用于字体大小，则相对于父元素的字体大小。
rem - 相对于根元素（通常是<html>）的字体大小，提供全局相对大小。
ex - 相对于当前元素字体的x高度。
ch - 相对于当前字体下数字“0”的宽度。
% (percentages) - 百分比单位，通常相对于父元素的尺寸。

视口单位

这些单位基于视口（浏览器窗口）的大小，适用于响应式设计。

vw (viewport width) - 视口宽度的百分比。
vh (viewport height) - 视口高度的百分比。
vmin - 较小的视口尺寸（宽度和高度中的较小者）的百分比。
vmax - 较大的视口尺寸（宽度和高度中的较大者）的百分比。

使用示例

/* 使用绝对单位 */
div {
  width: 200px; /* 200 pixels */
}

/* 使用相对单位 */
body {
  font-size: 16px;
}
h1 {
  font-size: 2em; /* 相对于body的字体大小，这里是32px */
}

/* 使用视口单位 */
section {
  padding: 10vh; /* 视口高度的10% */
}

在使用这些单位时，开发者可以根据具体的设计需求和目标平台选择最适合的单位类型，以达到最佳的布局效果。

三、高度和宽度

height 和 width 属性用于设置元素的高度和宽度。height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

height 和 width 属性可设置如下值：
auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

此元素的高度为 200 像素，宽度为 50％

设置 <div> 元素的高度和宽度：
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

此元素的高度为 100 像素，宽度为 500 像素。

设置另一个 <div> 元素的高度和宽度：
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

四、max-width

max-width 属性用于设置元素的最大宽度。可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。当浏览器窗口小于元素的宽度（500px）时，会发生之前那个

的问题。然后，浏览器会将水平滚动条添加到页面。在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。
提示：将浏览器窗口拖动到小于500px的宽度，以查看两个 div 之间的区别！
注释：max-width 属性的值将覆盖 width（宽度）。

这个 <div> 元素的高度为 100 像素，最大宽度为 500 像素：
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

五、练习

<!DOCTYPE html>
<html lang="zh-cn">
   <title>CSS尺寸</title>
   <meta charset="utf-8" />
   <style>
      body {
         display: block;
         color: cyan;
         background-color: teal;
         margin: 0;
         text-align: center;
      }
      img.imga {
         width: 600;
         height: 380;
      }
      img.imgb {
         width: 30%;
         height: 30%;
      }
      .container {
         max-height: 1200px;
         min-height: 800px;
         max-height: 2000px;
         min-height: 600px;
         margin: 0 auto; /* 将左右边距设置为自动 */
         text-align: center;
      }
   </style>
   <body>
      <div class="container">
         <p>width: 600; height: 380;</p>
         <img class="imga" src="images/029-1.png" alt="" />
      </div>
      <div class="container">
         <p>width: 30%; height: 30%;</p>
         <img class="imgb" src="images/029-1.png" alt="" />
      </div>
   </body>
</html>

块的尺寸不是设置了宽度和高度就被确定了的，还受dispaly布局等属性及实际内容的影响。

课题作业

完成文档中代码的练习。
测试尺寸相关的属性的使用方法。

附录一、人物介绍：克里斯·拉特纳

克里斯·拉特纳（Chris Lattner）是一位著名的计算机科学家和软件工程师，以其在编程语言和编译器领域的贡献而闻名。以下是关于他的一些重要信息：

教育背景：克里斯·拉特纳于2000年从奥勒冈州波特兰大学计算机科学系毕业，之后进入伊利诺伊大学厄巴纳香槟分校继续深造。
职业生涯：
- 他是LLVM（Low Level Virtual Machine，低层次虚拟机）项目的主要发起人与作者之一，该项目于2003年对外发布。
- 2005年，拉特纳发起了Clang编译器项目，该项目以LLVM为后端。
- 他在苹果公司担任编译器开发团队的首席架构师，并在2010年设计出了新的编程语言“Swift”，该语言以其高性能和易用性获得开发者的广泛认可。
Swift语言：Swift是苹果公司开发的一种强大且直观的编程语言，用于搭建基于苹果平台的应用程序。Swift语言不仅支持与Objective-C共同运行于Mac OS和iOS平台，还具备Objective-C所不具备的高级语言特性，如闭包、命名空间、泛型等。
职业发展：2017年初，克里斯·拉特纳离开苹果公司，加入特斯拉汽车公司。然而，他在特斯拉供职6个月后选择跳槽到谷歌，这一决定可能与谷歌对Swift语言的兴趣有关。
个人特点：拉特纳认为编程应该更加平民化和有趣，这也是他设计Swift语言时的初衷。