问题描述使用@import引入外部css，作用域却是全局的<template></template><script>export default {name: "user"}; </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import "../static/css/user.css"; .user-content{background-color: #3982e5; } </style>Add "scoped" attribute to limit CSS to this component only这句话大家应该是见多了, 我也使用scoped, 但是使用@import引...
第一种方法：背景图片法这种方法适用于非动态内容，图片用于装饰的情况下。主要是设置父元素的padding的宽度为背景图片的宽度加上图片和文字的间距，然后把背景图片定位到padding里面就可以了图文混排demo1，背景图片法 //因是转载的，我又是菜鸟，下面图片乱了，正确的是图片跟文字都在一行。 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Pellentesque habitant morbi tri...
一.问题重述 嗯，这个就是坍塌的盒子了。外部盒子本应该包裹住内部的两个浮动盒子，结果却没有。二.问题出现的原因3个盒子都只设置了width，而没有规定height，内部两个盒子分别设置了左右浮动。布局就这么简单，但结果和我们想象的却大不一样。问题出现的原因是内部两个盒子都有float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹了文本节点内容，...
现在我们可以选择浏览器非常多，所以浏览器的环境也是种类繁多，同一个浏览器也是包含各种不同的版本，不同的版本之间的渲染方法也存在差异，，它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时，要面对数量庞大的浏览器种类。如果开发时按最低标准，比如 IE6不支持的特性，我们统统不用，那就没有必要写这篇文章了；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在...
<style type="text/css">.clear{background:red;width:200px;}.clear:after{content:"\200B";display:block;clear:both;height:0;}.clear{*zoom:1;}.left{float:left;background:yellow;}.right{float:right;background:blue;}</style></head><body><div class="clear"><div class="left"><p>fsdfdfdsf</p></div><div class="right"><p>fsdfdfdsf</p><p>fsdfdfdsf</p></div></div>原文：http://www.cnblogs.com/timily/p/3766515.h...
一般在将div居中显示时，使用css： divX {margin:0 auto;} 此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下： <div id="cnbruce">margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明文本居中，即 复制代码代码如下:<style> body{text-align:center} #cnbruce{width:500px; background-color: #ccc; margin: 0 auto} </style> <div id="cnbruce">ma...
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51Bugs及解决方案列表（以下实例默认运行环境都为Standard mode）：如何在IE6及更早浏览器中定义小高度的容器？方法：#test{overflow:hidden;height:1px;font-size:0;line-height:0;}IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高如何解决IE6及更早浏览器浮动时产生双倍边距的BUG？方法：#test{displ...
CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。子元素使用绝对定位子元素浮动针对第一种情况，即子元素使用绝对定位，可以使用以下方案：子元素的绝对定位改为相对定位，如果可以改的话针对第二种情况，即由子元素浮动造成父元素坍塌，可以使用以下方案：/*父级元素绝对定位*/position: absolute/*父级元素添加*/overflow: hidden;/*伪元素清...
2.1 常用的选择器1. 类型选择器 p { color: black; }2. 后代选择器 blockquote p { padding-left: 2em; }3. ID选择器 #intro { font-weight: bold; }4. 类选择器 .date-posted { color: #cccccc; }5. 伪类 a:link { color: blue; }6. 通用选择器 * { padding: 0; }7. 子选择器 #nav>li { padding-left: 20px; }8. 相邻同胞选择器 h1+p{ font-size: 1.4em; }相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素；9....
在CSS中图片进行缩放操作后变模糊的解决办法: 加入如下样式即可img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode:nearest-neighbor;}无论是直接img标签还是background:url()都可以原文：https://www.cnblogs.com/chiyanzhanfeng/p/15174269.html
IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题，而FF、Chrome原生的浏览器支持是的优雅的圆角感觉较好，如何解决这个问题呢？ 一种比较传统的方案是放弃CSS3，使用背景图，但是这种方式也会有诸多问题，对页面结构改动较大，需要对自适应大小进行控制等，成本较高。 另外一种是百度了一下，发现有个开源的插件可以解决此问题：http://css3pie.com/使用方法很简单，下载了之后直接引用.htc文件即可。 ...
最近写React一直在纠结样式的问题，今天找了篇看起来很不错的文章，认真读三遍先...原文链接：https://juejin.im/post/5b39e63ae51d4562aa017c81React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）上篇 介绍了 React 现在流行的 CSS 解决方案。本篇就直接进入主题详细讲讲我最喜欢的解决方式之一：tachyons个人认为，tachyons 适合小的、样式不是重点的项目以及写 Demo， 但这不代表不能用 tachyons 完成大项目和漂亮的...
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overflow:hidden属性就会失效。我们在IE 6 7内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。解决这个bug很简单，在父元素中使用position:relative;即可解决该bug。 父元素设置relative属性，子元素设置absolute属性即可避免！ 原文：http://www.cnblogs.com/mmlvj/p/4585234.html
细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新 方法一 生成随机数字 代码如下:<script type=”text/javascript“ src=”/js/test.js?+Math.random()“></script> 缺点，浏览器缓存失去意义，每次都动态加载。 方法二 版本号控制,设置全局变量，每次发布前版本号加1 代码如下:<script type=”text/javascript“ src=”/js/test.js?v=<%=v%>“></sc...
细节决定成败！浏览器缓存的意义在于提高了执行效率，但是也随之而来带来了一些问题，导致服务端修改了js、css，客户端不能更新 方法一 生成随机数字 代码如下: 缺点，浏览器缓存失去意义，每次都动态加载。 方法二 版本号控制,设置全局变量，每次发布前版本号加1 代码如下: “> 推荐这种做法，这种做法比较简单。缺点是HTML页面不能使用，但是这种页面应该不太多 更多方法：采用读取文件大小、文件修改时间生成MD5的方式自动...