自学——一个月入门前端⑤

最新推荐文章于 2024-06-05 17:17:23 发布

sher_chang

最新推荐文章于 2024-06-05 17:17:23 发布

阅读量57

点赞数

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/sher_chang/article/details/132796176

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天继续css的学习

补充一下一些常见没有学习到的内容。

溢出的内容

当盒子的边界宽度和height不足的时候，content可能会溢出。这个时候需要对overflow进行处理。

overflow：hidden，超出就会隐藏

scroll：超出进行滑动

overflow-y：scroll只有y方向进行滑动，x就是只有在x轴防线滑动。

auto：如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用overflow: auto。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。

图像媒体与表单

加图像

<div class="box"><img src="star.png" alt="star"></div>

如何处理图片溢出的问题。

可以直接加上一个限制，max-width:100%,让这个图片的最大的宽度小于这个盒子的宽度。但是可以比例上还是有问题，是强行的将宽度适应。

使用object-fit，替换元素可以以多种方式被调整到合乎盒子的大小。

object-fit:cover表示的就是保持原有的比例，然后裁掉一部分。

object-fit: contain表示的是会缩放到足以完整的放进盒子的大小。

做强制拉升充满这个区域直接设置其width和height。

form元素

很多空间表单使用过input元素加入到网页上的。

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;
}

<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>

技能测试：

技能测试：图片和表格元素 - 学习 Web 开发 | MDN (mozilla.org)

任务1：

让这个照片进行裁切铺满屏幕

这个首先需要让他铺满屏幕之后才能使用这个object-fit：cover

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

object-fit: cover;
}

任务2：

他这个描述似乎不是很准确，表单字段按钮设置10px的内边距。

下面这个应该差不多，但是颜色有点不一样。

.myform {
  border: 2px solid #000;
  padding: 5px;
}
input[value="Search"] {
   background-color: purple;
   color: white;
   border:none;
   border-radius: 5px;
   font-size: 100%;
   padding: 10px;
}
input[type="search"] {
  padding:10px;
}