手写一个banner、实现高度相等、单位、边框图像 | 青训营笔记

今天一定不拖延
126 阅读2分钟

哈喽哈喽，这是小菜不拖延博主

打卡day10~

以下内容基于阅读：W3School TIY Editor

  • 如何手写一个banner
  • 盒子并排，当他们内容不一样多，如何实现高度相等
  • 单位
  • 边框图像

手写banner

flex

最初的写法：flex、grid等布局 要实现这样的布局，我们的第一个反应是运用现成的布局方案

ul {
  display:flex;
  flex-direction:row
}

grid

ul {
  display:grid;
  grid-auto-flow:column
}

效果：

image.png

float实现

属性

float 属性可以设置以下值之一：

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
  • inherit - 元素继承其父级的 float 值

实现

这里我们对每一个li使用float:left，

没有使用float:

image.png

盒子并排，当他们内容不一样多，如何实现高度相等

display:flex;

清除浮动

clear 属性可设置以下值之一：

  • none - 允许两侧都有浮动元素。默认值
  • left - 左侧不允许浮动元素
  • right- 右侧不允许浮动元素
  • both - 左侧或右侧均不允许浮动元素
  • inherit - 元素继承其父级的 clear 值

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方。

单位

分为绝对长度和相对长度

相对长度

em 和 rem 单元可用于创建完美的可扩展布局！

单位描述
em相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex相对于当前字体的 x-height(极少使用)
ch相对于 "0"（零）的宽度
rem相对于根元素的字体大小（font-size）
vw相相对于视口*宽度的 1%
vh相对于视口*高度的 1%
vmin相对于视口*较小尺寸的 1％
vmax相对于视口*较大尺寸的 1％

边框图像

CSS border-image 属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

  • 用作边框的图像
  • 在哪里裁切图像
  • 定义中间部分应重复还是拉伸

注意：为了使 border-image 起作用，该元素还需要设置 border 属性！

提示：border-image 属性实际上是以下属性的简写属性：

avatar
文章
阅读
粉丝