Tag: CSS
为什么Flex项目的宽度和高度会影响Flex项目的渲染方式？
Flexbox中具有max-height样式的图像呈现不同的呈现方式，具体取决于是否设置了height和width属性。 具有设置为图像的真实宽度/高度的属性的属性将保留其宽高比，但没有属性的属性会尊重max-height并显示压扁。 .flex-parent { display: flex; max-height: 10vh; } <div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div> 这就是Chrome 58中出现的情况（在Firefox 54中也是如此）。 为什么他们呈现不同？ pipe理这种行为的规则是什么？ 我的（显然是不正确的）理解是，高度和宽度属性覆盖图像加载时发现的内在高度和宽度，如果高度和宽度属性等于图像的尺寸，则一旦图像渲染应该没有区别已加载。 上下文正在制作一个响应式图像的页面，其中每个图像 可以有独特的原始尺寸 在加载时不会导致回stream，即在初始渲染时保留正确的空间（因此使用高度和宽度属性） 可以一次适合所有的屏幕（因此我搞乱在CSS中） 青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg
Sass与CSS模块和Webpack
我一直在使用Webpack，Sass和CSS模块构build一个项目。 通常在我的.scss文件中，我定义了一个类如下： :local(.button) { color: white; } 在我的React组件中，在render方法中，我需要样式： render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> } 和世界都好。 一切都按预期工作。 现在我正在阅读CSS模块页面 ，注意到没有一个select器被:local()包含在内，而且他们导入的样式如下： import styles from './MyStyles.scss'; 我认为“哇，看起来更好，更容易看到它的import等，而我不想使用:local() ，只是本地默认情况下。 所以我试了一下，立即遇到了几个问题。 1）`从./MyStyles.scss'导入样式; 因为我在我的React文件上使用了ESLint，所以我马上得到一个错误： MyStyles.scss没有默认的导出，这通常是有意义的，但CSS模块页面声明： 从JS模块导入CSS模块时，它会导出一个包含从本地名称到全局名称的所有映射的对象。 所以我自然希望样式表的默认导出也是他们所指的对象。 2）我试着import { button } from './MyStyles.scss'; 这通过linting，但button日志为未定义。 3）如果我恢复到导入我的样式的require方法，任何未指定的:local是未定义的。 作为参考，我的webpack加载器（我也包括Node-Neat和Node-Bourbon ，两个很棒的库）： { test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + […]
资源解释为文档，但是以MIMEtypestext / css传输
资源解释为文档，但是以MIMEtypestext / css传输 这是Google Chrome Inspector中显示的错误。 该文件是： http : //www.doanddare.org/css/style.css 它正在由一个PHP处理器呈现。 我该如何解决这个错误？ 被返回的头是： 请求头 Accept:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Cache-Control:max-age=0 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3 响应头 HTTP/1.1 200 OK Date: Sun, 10 Oct 2010 07:35:04 GMT Server: Apache content-style-type: text/css Expires: Thu, 10 Oct 2030 03:50:23 GMT Cache-Control: max-age=631138519, public Content-Encoding: […]
100％与inheritance
我的理解是， width: '100%'可以让对象的宽度与父对象的宽度相同，而width: inherit只有在明确指定父宽度时才会这样做。 这种理解是否正确？ 如果是这样的话，在我看来，当width: inherit工作， width: '100%'将始终工作，所以你可以随时使用后者。 那么，写width: inherit的目的是什么width: inherit ？ 它什么时候变得有用？ 如果我的理解错了，那么两者有什么区别呢？ 与height相似。
应该将CSS属性列表样式应用于<ul> / <ol>还是<li>？
大多数站点显示的语法是将list-style应用于<li>但我已经看到了一些将list-style应用于<ul>或<ol>教程站点（如本例 ）。 哪一种是“正确的”方式？
使用CSS可以在图像地图上设置鼠标hover吗？
我有一个网页上的图像，也需要链接。 我正在使用一个图像映射来创build链接，我想知道是否有一种方式来鼠标hover的区域形状的风格，只是一点点的交互性。 这可能吗？ 我试过这个没成功： HTML <img src="{main_photo}" alt="locations map" usemap="#location-map" /> <map name="location-map"> <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" /> <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" /> <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" /> </map> CSS area { border: 1px solid #d5d5d5; } 有什么build议么？
CSS3翻译弧
当前的CSS3是否可以将一个对象（特别是DIV）沿弧线或曲线转换？ 这是一个图像来帮助说明。
LESS CSS在媒体查询中设置variables？
我正在研究一个特定于iPad的网站。 为了使我的网站在iPad和旧版本的iPad上都可以工作，我想在LESS CSS中设置一个variables，如下所示： @media all and (max-width: 768px) { @ratio: 1; } @media all and (min-width: 769px) { @ratio: 2; } 所以当你设置像素的东西，你可以做 width: 100px * @ratio; 但是我收到了一个编译错误，说没有定义@ratio。 有没有可能有一个解决方法，使其工作？ 谢谢。
jQuery元素变得可见
基本上，我想知道是否有一种方法来自动运行一个function，当一个元素变得隐藏或可见，而不是在用户点击，但自动在另一个脚本。 我不希望这只是运行一次，因为元素（如滑块）不断从可见变为隐藏。 这是jQuery可以绑定的东西吗？ 比如将元素的可见性绑定到一个函数（我不知道该怎么写） 如果你需要我详细说明我想要做什么，请告诉我。 谢谢 伪代码： $('#element').bind('display:none', function); function(){ //do something when element is display:none } $('#element').bind('display:block', function2); function2(){ //do opposite of function }
为什么不能使用更大的值覆盖父项的不透明度？
我们知道，子元素不能从现在开始覆盖父元素的opacity属性。 父项的opacity属性始终生效。 这是有意义的，当孩子试图underride（覆盖较小的价值）父母的不透明度。 但是，如果孩子试图用更大的价值来覆盖它呢？ 这不应该被允许吗？ 为什么半透明的父母不能拥有一个不透明的孩子？ 任何人都可以分享为什么这样的限制是CSSdevise的一部分决定的想法？ 真的很感激，如果有人能够阐明这个理论的理由。 我基本上试图找出为什么 – 不能成为这个的一部分（不是解决方法;因为已经被讨论了很多次）。 我相信这是很多新手，像我这样的人会想知道的。
