1、什么是 scoped
在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 vue 组件style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决，选择器。
2025年06月30日
1、什么是 scoped
在 Vue 组件中，为了使样式私有化（模块化），不对全局造成污染，可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块，局部有效。如果一个项目中的所有 vue 组件style 标签全部加上了 scoped，相当于实现了样式的私有化。如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样式，而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决，选择器。
2025年06月30日
我调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,
2025年06月30日
CSS position属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了
--------------------------------------------------------------------------------------------------------------------------------------------
2025年06月30日
在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？
我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。
网页布局
其中html部分的代码如下：
2025年06月30日
伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。
诸如 <img\>、<input\>、<iframe\>，这几个标签是不支持类似 img::before 这样使用。
究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。
2025年06月30日
点(.)属性操作
<!DOCTYPE html>
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>属性值操作</h2>
<p><input type="text" name="username" value="tom" class="orange" id="mingzi" weight='130' /></p>
<p><input type="button" value="获取" onclick="f1()" /></p>
<p><input type="button" value="设置" onclick="f2()" /></p>
</body>
</html>
<script type="text/javascript">
//设置属性值
function f2(){
var it = document.getElementById("mingzi");
it.name = "usermail";
it.value = "jim@163.com";
it.className = "apple";
it.setAttribute("weight",155);
it.type = "checkbox";
}
function f1(){
var it = document.getElementById("mingzi");
console.log(it.type);
console.log(it.name);
console.log(it.className);
console.log(it.id);
console.log(it.getAttribue("weight"));
console.log(it.getAttribute("value"));
}
</script>2025年06月30日
本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。
这种情况最简单，只需要将行内元素包括在一个display属性为block的父元素中，并且设置父元素text-align为居中即可
2025年06月30日
有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。
作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么不搞篇文章列出所有那些较少使用但既有用又有趣的 CSS 属性？
在本文中，我将介绍一些不一样的CSS属性，希望能给你带来点新鲜感，废话不多说，让我们开始吧。
2025年06月30日
提示：点击上方"蓝色字体"↑ 可以订阅噢！
摘要 51RGB官方微信position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。
postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。
2025年06月30日
一、DIV高度自适应（父div高度随子div的高度改变而改变）
1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。
代码：
<styletypestyletype="text/css">
#aa{border:#000000solid5px}
Powered By Z-BlogPHP 1.7.4