草庐IT

css-calc

全部标签

CSS:根据图像尺寸自动调整图像大小,并用相似的 div 填充空白

我有一个关于CSS和HTML的问题。我目前正在构建一个文章模板,但在一个方面有点难过。我打算一侧放图片,另一侧放一个等高的文本框。两者都被div标签包围,如以下源代码所示。TitlegoeshereTextGoeshere还有CSS...#article{border:1pxsolidgold;margin-bottom:20px;}#article_header{padding:5px;font-family:arial;font-size:36px;font-style:bold;color:white;background:url('orangegradiant.png');}#

CSS:根据图像尺寸自动调整图像大小,并用相似的 div 填充空白

我有一个关于CSS和HTML的问题。我目前正在构建一个文章模板,但在一个方面有点难过。我打算一侧放图片,另一侧放一个等高的文本框。两者都被div标签包围,如以下源代码所示。TitlegoeshereTextGoeshere还有CSS...#article{border:1pxsolidgold;margin-bottom:20px;}#article_header{padding:5px;font-family:arial;font-size:36px;font-style:bold;color:white;background:url('orangegradiant.png');}#

html - 如果你将 CSS font-size 应用于 body 元素,你如何处理嵌套标签和继承?

我正在重新设计一个包含大量旧内容的网站。主要的设计更改是使站点具有flex以填充各种屏幕尺寸。我使用body元素中的字体大小作为执行此操作的机制,并将所有测量值设置为ems。这按预期工作,但当我找到一个也指定了字体大小的嵌套元素时,我遇到了麻烦。在下面的示例中,我展示了如何在p标记内插入一个span标记,该标记具有分配给它的字体大小的类会导致字体大小被继承并基本上应用两次。我知道这是它的工作原理,但我该如何处理呢?我经常遇到这种情况,包括链接、列表和粗体文本样式。body设置为1em的原因是我可以检测屏幕分辨率并更改font-size的值以使整个设计按比例缩小或增大。所有设计元素都已从

html - 如果你将 CSS font-size 应用于 body 元素,你如何处理嵌套标签和继承?

我正在重新设计一个包含大量旧内容的网站。主要的设计更改是使站点具有flex以填充各种屏幕尺寸。我使用body元素中的字体大小作为执行此操作的机制,并将所有测量值设置为ems。这按预期工作,但当我找到一个也指定了字体大小的嵌套元素时,我遇到了麻烦。在下面的示例中,我展示了如何在p标记内插入一个span标记,该标记具有分配给它的字体大小的类会导致字体大小被继承并基本上应用两次。我知道这是它的工作原理,但我该如何处理呢?我经常遇到这种情况,包括链接、列表和粗体文本样式。body设置为1em的原因是我可以检测屏幕分辨率并更改font-size的值以使整个设计按比例缩小或增大。所有设计元素都已从

html - 文本区域 CSS {高度 : 100%} in table-cell div (IE)

注意:这只是IE中的一个问题。如何强制文本区域垂直填充表格单元格div?我已将height:100%应用于所有父元素,但textarea仍保持其默认高度。截图:我的问题示例:JSFiddle示例代码:HTMLThumbnailTextareaCSS*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.table{display:table;width:100%;height:100%;}.row{display:table-row;height:100%;}.col{disp

html - 文本区域 CSS {高度 : 100%} in table-cell div (IE)

注意:这只是IE中的一个问题。如何强制文本区域垂直填充表格单元格div?我已将height:100%应用于所有父元素,但textarea仍保持其默认高度。截图:我的问题示例:JSFiddle示例代码:HTMLThumbnailTextareaCSS*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.table{display:table;width:100%;height:100%;}.row{display:table-row;height:100%;}.col{disp

javascript - 为什么不能使用 JavaScript 改变 CSS 动画的速度

我制作了一个CSS动画和一些JavaScript代码来更新动画速度。看来我的JavaScript代码是有效的,但是一旦在CSS中设置了速度,它就不能再更新了。如果我不在CSS中设置速度,则JavaScript可以正常工作。#circle1{width:200px;height:200px;background:blue;-webkit-animation:upDown5sinfinite;/*SafariandChrome*/animation:upDown5sinfinite;}如果删除上面css中的最后两行,则以下javascript有效document.getElementByI

javascript - 为什么不能使用 JavaScript 改变 CSS 动画的速度

我制作了一个CSS动画和一些JavaScript代码来更新动画速度。看来我的JavaScript代码是有效的,但是一旦在CSS中设置了速度,它就不能再更新了。如果我不在CSS中设置速度,则JavaScript可以正常工作。#circle1{width:200px;height:200px;background:blue;-webkit-animation:upDown5sinfinite;/*SafariandChrome*/animation:upDown5sinfinite;}如果删除上面css中的最后两行,则以下javascript有效document.getElementByI

jquery - CSS - 设置高度页眉/页脚,动态内容..不适用于 osXsafari/iOSsafari? (jsBin)

Ihavethisgreatsolutionfrom@RokoC.Buljan,但它只适用于chrome和firefox..在safari上,内容部分不滚动,页脚似乎粘在内容的底部,使其无法访问..对于Safari/iOSsafari有什么办法可以解决这个问题吗?..或跨浏览器兼容的替代解决方案?http://jsbin.com/negin/9/editHTML:ContentthatappearsHeaderContentLoremipsum...FooterCSS(使用calcfordynamicseemssupported,但也许这就是问题所在?):#view{overflow:

jquery - CSS - 设置高度页眉/页脚,动态内容..不适用于 osXsafari/iOSsafari? (jsBin)

Ihavethisgreatsolutionfrom@RokoC.Buljan,但它只适用于chrome和firefox..在safari上,内容部分不滚动,页脚似乎粘在内容的底部,使其无法访问..对于Safari/iOSsafari有什么办法可以解决这个问题吗?..或跨浏览器兼容的替代解决方案?http://jsbin.com/negin/9/editHTML:ContentthatappearsHeaderContentLoremipsum...FooterCSS(使用calcfordynamicseemssupported,但也许这就是问题所在?):#view{overflow: