草庐IT

css-calc

全部标签

html - 关于继承的 CSS 性能

我知道ID规则比类规则快,类规则比标签规则快,标签规则比通用规则快,如MDN所述.我的问题与继承方面的CSS性能有关。例如,以下哪个更有效?body{font-family:Helvetica,Arial,sans-serif;font-size:16px;}h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}或h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}.article-text{font-family:Helvetica,Arial,s

html - 关于继承的 CSS 性能

我知道ID规则比类规则快,类规则比标签规则快,标签规则比通用规则快,如MDN所述.我的问题与继承方面的CSS性能有关。例如,以下哪个更有效?body{font-family:Helvetica,Arial,sans-serif;font-size:16px;}h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}或h1{font-family:Georgia,serif;font-size:36px;font-weight:700;}.article-text{font-family:Helvetica,Arial,s

css - CSS 绝对定位之谜

考虑下面的网页。绝对相对于其父级定位,当我在Safari或Firefox上加载此页面时,正如预期的那样出现在右上角(见第一张图片)。但是,当边框从中移除时,例如,通过设置border-width:0,绝对相对于定位自己标记,它的兄弟!参见图片#2。为什么是这样?边界应该有什么区别?body{margin:0;}div{position:relative;left:0;top:0;border:1pxsolidred;}img{position:absolute;right:0;top:0;}p{margin:20px;}Thisisatest 最佳答案

css - CSS 绝对定位之谜

考虑下面的网页。绝对相对于其父级定位,当我在Safari或Firefox上加载此页面时,正如预期的那样出现在右上角(见第一张图片)。但是,当边框从中移除时,例如,通过设置border-width:0,绝对相对于定位自己标记,它的兄弟!参见图片#2。为什么是这样?边界应该有什么区别?body{margin:0;}div{position:relative;left:0;top:0;border:1pxsolidred;}img{position:absolute;right:0;top:0;}p{margin:20px;}Thisisatest 最佳答案

html - 将水平制表符转换为垂直制表符(仅限 HTML 和 CSS,无 js)

我正在尝试创建一个基本门户,其选项卡位于左侧,而不是顶部。理想情况下,我想在没有任何javascript的情况下完成此操作;仅使用HTML5和CSS3。我一直在使用以下水平制表符代码:http://jsfiddle.net/Juggler/9Ue9j/2/TabOneStuffforTabOneTabTwoStuffforTabTwoTabThreeStuffforTabThree和*{margin:0;padding:0;}body{background:#999;}#page-wrap{width:1024px;height:768px;}.tabs{position:relati

html - 将水平制表符转换为垂直制表符(仅限 HTML 和 CSS,无 js)

我正在尝试创建一个基本门户,其选项卡位于左侧,而不是顶部。理想情况下,我想在没有任何javascript的情况下完成此操作;仅使用HTML5和CSS3。我一直在使用以下水平制表符代码:http://jsfiddle.net/Juggler/9Ue9j/2/TabOneStuffforTabOneTabTwoStuffforTabTwoTabThreeStuffforTabThree和*{margin:0;padding:0;}body{background:#999;}#page-wrap{width:1024px;height:768px;}.tabs{position:relati

html - 选择框中选项的直通 css 样式在 Google Chrome 上不起作用,但在 Firefox 上运行良好

关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭9年前。Improvethisquestion我将!important标记添加到GoogleChrome的直通样式中,但它似乎不起作用。是否有可以解决此问题的解决方案或变通办法?

html - 选择框中选项的直通 css 样式在 Google Chrome 上不起作用,但在 Firefox 上运行良好

关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭9年前。Improvethisquestion我将!important标记添加到GoogleChrome的直通样式中,但它似乎不起作用。是否有可以解决此问题的解决方案或变通办法?

html - 使用 SVG HTML CSS 的高效连续滚动图

我创建了一个实时图表,其中不断输入和绘制新数据点。目前我正在使用requestAnimationFame(),我每秒渲染元素的更新位置30次。对于许多SVG元素,这可能会有点慢。用SVG动画、CSS动画或CSS过渡实现像这样的连续滚动图形的最有效方法是什么。(没有第3方库)。提前致谢。 最佳答案 Fiddle中有一个很好的解决方案.来自MikeBostock和他关于使用D3的精彩教程.在那个教程中;Mike解释了如何从头开始完成Fiddle,但对您来说重要的部分是redraw函数:functionredraw(){varrect=c

html - 使用 SVG HTML CSS 的高效连续滚动图

我创建了一个实时图表,其中不断输入和绘制新数据点。目前我正在使用requestAnimationFame(),我每秒渲染元素的更新位置30次。对于许多SVG元素,这可能会有点慢。用SVG动画、CSS动画或CSS过渡实现像这样的连续滚动图形的最有效方法是什么。(没有第3方库)。提前致谢。 最佳答案 Fiddle中有一个很好的解决方案.来自MikeBostock和他关于使用D3的精彩教程.在那个教程中;Mike解释了如何从头开始完成Fiddle,但对您来说重要的部分是redraw函数:functionredraw(){varrect=c