前端大总结

块元素：

 行内元素：

行内块元素：

 

 实验总结：

<block if=”变量名”></block>

在js里对变量名控制true或者false来控制页面的显示和隐藏

<list>和<list-item>标签

<list-item>不能有多个子内容，必须用一个<div>标签包裹起来

点击切换功能：

在点击文本里添加一个@click=’选择名称’

再用block标签，把想实现切换功能对应的非点击显示东西隐藏起来，在再给block 设置一个变量名（if=”{{var}}”）

在js中加上：

选择名称（e）//e作为变量名进行判断

If(e.target.id==’对应id’){

 This.var=ture;//var为对应id的block标签判断名

This.elsevar=false;

},

同理有几个面板写几个判断句。

列表&引入文本数据：

 

多个div下划线的添加：

把三个盒子的高度设为一样

再添加相同的border-bottom属性

 

object-fit: 属性

CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。

请看下面来自上海鲜花港的郁金香图片，它是 300x300 像素：

 但是，如果我们把上面的图像设置为 200x300 像素，则它会看起来像这样：

我们看到图像被压缩以适合 200x300 像素的容器，并且原始宽高比被破坏了。

如果我们使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间，如下所示：

 

 

水平居中：justify-content: center
垂直居中： align-items:center

当你在父盒子中使用 flex-direction: column; 让子元素 竖着排列时 这个时候想水平居中就是用 这个 align-items:center; 。垂直（纵向）居中就是用justify-content: center; 当父盒子 flex-direction: row;（默认的）则反之。
使用这两个属性还有一个前提那就是父盒子的宽度和高度得有，这个时候或许有人会有疑惑，我以前没指定过为什么也能用，原因是子盒子指定了把父盒子的给撑开了，但是如果是垂直方向上可能就会有问题，比如你想让一个盒子在一个页面的正中间，这个时候你就需要把父盒子的高度设为100%才可以。
 

背景点击样式：

在点击文本里添加一个@click=’选择名称’

再用block标签，把想实现切换功能对应的非点击显示东西隐藏起来，在再给block 设置一个变量名（if=”{{var}}”）

在js中加上：

选择名称（e）//e作为变量名进行判断

If(e.target.id==’对应id’){

 This.var=‘color’;//var为对应id的block标签判断名

This.elsevar=‘othercolor’;

},

同理有几个面板写几个判断句。

图片路径src="./....."引入

style样式等等