weixin_39357177的博客

前言 当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。 使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。 原理 在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】...

传统方法正方形用固定的形式写 直接长＝宽写固定的值如下 .box{ width: 200px; height: 200px; background: pink; color: #666; } 但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。 下面介绍两种比较简单的实现方法： 方法一：CSS3 vw 单...

前面我们讲了怎么做一个自适应宽高1:1的正方形 https://blog.youkuaiyun.com/weixin_39357177/article/details/81183743 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 &lt;style&gt; ...

正常情况下做一个自适应的导航条 &lt;style&gt; a{ width: 20%; text-align: center; background: #C00; text-decoration: none; color: #fff; display: inline-block; } &lt;/style&gt; &lt;body&gt; ...

题目：请写一个简单的幻灯效果页面（如果不使用JS来完成，可以加分） 幻灯片效果其实就是实现图片的点击切换，一般情况下我们都会想到用js来做，但是用css方法要怎么实现呢 可以利用CSS3的单选按钮radio和label标签的for属性来实现图片的切换 label里面的for属性对应的是要显示的图片的id名字 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;h...

方法一： 1. 对父元素设置display:table属性 2. 对文本设置display:table-cell和vertical-align:middle属性　 &lt;style&gt; .box{ width: 500px; height: 500px; display: table; border: 1px solid #333; } .box ...