1.CSS调整大小

一个空的<div>是没有尺寸的。如果在 HTML 文件中添加一个空<div> 并给予其边框，则会在页面上看到一条线。

<div class="box">

</div>

.box {
  border: 5px solid darkblue;
}

当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为外部尺寸。我们可以给它一个具体的 width 和 height 值，然后不论我们放什么内容进去它都是该尺寸。由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。

把百分数作为内外边距：

例如，我们给了里面的盒子 10% 的margin以及 10% 的padding。盒子底部和顶部的内外边距，和左右外边距有同样的大小。

<div class="box">
  I have margin and padding set to 10% on all sides.
</div>

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
}

使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。

min-和 max-尺寸：

除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果想让盒子至少有个确定的高度，应该给它设置一个min-height属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

<div class="wrapper">
  <div class="box"></div>
  <div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
</div>

.box {
  border: 5px solid darkblue;
  min-height: 150px;
  width: 200px;
}

这在避免溢出的同时并处理变化容量的内容的时候是很有用的。
max-width的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。这个技术是用来让图片可响应的，所以在更小的设备上浏览的时候，它们会合适地缩放。

视口单位：

在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的vw单位，以及意为视口高度的 vh单位。

1vh等于视口高度的 1%，1vw则为视口宽度的 1%.font-size属性是控制文字大小的视口单位。

2.图片、媒体和表单元素

2.1替换元素

图像和视频被描述为替换元素。这意味着 CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其它元素的位置。

某些替换元素（例如图像和视频）也具有宽高比。这意味着它在水平（x）和垂直（y）方向上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

处理图像溢出问题的一个常用方法是将一张图片的 max-width 设为 100%。这将会使图片的尺寸小于等于盒子。这个技术也会对其他替换元素（例如 <video>，或者 <iframe> 起作用。

当使用 object-fit 时，替换元素可以以多种方式被调整到合乎盒子的大小。使用值 cover 可以用来缩小图像，同时维持图像的原始比例。这样图像就可以充满盒子。但由于比例保持不变，图像多余的一部分将会被盒子裁切掉。

<div class="wrapper">
  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>

.box {
  width: 200px;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}

如果我们使用值 contain，图像就会被缩放到足以完整地放到盒子里面的大小。如果它和盒子的比例不同，将会出现“开天窗”的结果。

如果使用 fill 值，它可以让图像充满盒子，但是不会维持比例。

2.2 form元素

很多表单控件是通过 <input> 元素添加到网页上的。该元素定义了简单的表单区域，例如文字输入。更进一步还有 HTML5 新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的 <textarea>，以及那些用来包含和标记表单特定部分的元素，例如 <fieldset> 和 <legend> 。

HTML5 还包含了允许 Web 开发者指定必填区域的特性，甚至还能检验填入内容的类型。如果用户输入了一些不符合要求的内容，或者未填写必填区域，浏览器会显示错误提示。不同的浏览器在给此类元素样式化和自定义方面不尽相同。

允许文本输入的元素有很多，例如 <input type="text">，及其指定特定类型的元素，如 <input type="email"> 以及 <textarea> 元素，这些都是相当容易样式化的，它们和页面上其他盒子的表现相同。只不过在不同的操作系统和浏览器上访问时这些元素默认的样式化方式可能不同。

2.3 举个实例

在下面的示例中，我们已经将一些文本输入元素用 CSS 样式化了。可以看到，边框、内外边距之类的东西都如期生效了。现在，我们使用属性选择器来指向不同的输入类型，尝试通过改变边框、添加输入区域背景色、改变字体和内边距的方式来改变表单的外观。

<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: #333;
}

在一些浏览器中，表单元素默认不会继承字体样式，因此如果想要表单填入区域使用 body 中或者一个父元素中定义的字体，需要向CSS 中加入这条规则：

button,
input,
select,
textarea {
  font-family : inherit;
  font-size : 100%;
}

在样式化表单时候，你可以使用box-sizing 属性，确保在给 form 元素设定宽度和高度时可以有统一的体验。

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

也应该在 <textarea> 上设置 overflow: auto 以避免 IE 在不需要滚动条的时候显示滚动条：

textarea {
  overflow: auto;
}