Questions tagged «css»

CSS(层叠样式表)是一种表示样式表语言,用于描述HTML(超文本标记语言),XML(可扩展标记语言)文档和SVG元素的外观和格式,包括(但不限于)颜色,布局,字体,和动画。它还描述了如何在屏幕,纸张,语音或其他媒体上呈现元素。


5
iOS 9 Safari:在滚动时将元素更改为固定位置直到滚动停止才会绘制
我一直在开发网站,并从相当不错的jQuery Sticky Kit插件中受益。通过在适当的时候在position属性之间fixed来回切换来进行操作。在桌面上运行非常流畅,在移动设备上也可以接受。 或至少它曾经如此。iOS 9具有新的行为:如果position元素的元素从static/ relative/absolute变为fixed滚动动画进行中,则元素将不可见,直到滚动停止为止。奇怪的是,执行相反的更改(从fixed其他更改)没有问题。 一个有效的示例可以在插件的主页上找到。黑色导航栏(“示例参考”)应该是粘性的。最初它static位于页面中间。向下滚动时,它变成fixed和(在iOS 9中)消失,直到滚动停止。在桌面浏览器和iOS 8中的行为是正确的。 我有点希望采用典型的CSS解决方法:强制进行3D转换,禁用背面可见性等,使专有属性晦涩难懂,但是似乎没有任何效果。 既然它正在起作用,我们是否会完全忘记“可粘”元素?

9
返回元素的计算样式以伪克隆该元素的jQuery CSS插件吗?
我正在寻找一种使用jQuery返回第一个匹配元素的计算样式的对象的方法。然后,我可以将此对象传递给jQuery的CSS方法的另一个调用。 例如,使用width,我可以执行以下操作以使2个div具有相同的宽度: $('#div2').width($('#div1').width()); 如果我可以使文本输入看起来像现有的span,那将是很好的: $('#input1').css($('#span1').css()); 其中不带参数的.css()返回可以传递给.css(obj)的对象。 (我找不到为此的jQuery插件,但似乎应该存在。如果不存在,我将在下面将我的插件变成一个插件,并将其与我使用的所有属性一起发布。) 基本上,我想伪克隆某些元素,但使用不同的tag。例如,我有一个li元素要隐藏,并在其上放置一个看起来相同的输入元素。用户键入时,看起来他们正在编辑inline元素。 对于此伪克隆问题,我也开放其他方法进行编辑。有什么建议? 这是我目前拥有的。唯一的问题就是获取所有可能的样式。这可能是一堆荒谬的清单。 jQuery.fn.css2 = jQuery.fn.css; jQuery.fn.css = function() { if (arguments.length) return jQuery.fn.css2.apply(this, arguments); var attr = ['font-family','font-size','font-weight','font-style','color', 'text-transform','text-decoration','letter-spacing','word-spacing', 'line-height','text-align','vertical-align','direction','background-color', 'background-image','background-repeat','background-position', 'background-attachment','opacity','width','height','top','right','bottom', 'left','margin-top','margin-right','margin-bottom','margin-left', 'padding-top','padding-right','padding-bottom','padding-left', 'border-top-width','border-right-width','border-bottom-width', 'border-left-width','border-top-color','border-right-color', 'border-bottom-color','border-left-color','border-top-style', 'border-right-style','border-bottom-style','border-left-style','position', 'display','visibility','z-index','overflow-x','overflow-y','white-space', 'clip','float','clear','cursor','list-style-image','list-style-position', 'list-style-type','marker-offset']; var len = attr.length, obj = {}; for (var i = …

5
3列布局HTML / CSS
我有以下HTML布局: <div class="container"> <div class="column-center">Column center</div> <div class="column-left">Column left</div> <div class="column-right">Column right</div> </div> 是否有机会仅在不使用CSS更改HTML的情况下在下面的示例网格上排列列? ---------------------------------------------------- | | | | | Column left | Column center | Column right | | | | | ----------------------------------------------------
68 html  css 

5
如何找到png图像中像素的alpha通道透明度值?[关闭]
关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗?更新问题,使其成为Stack Overflow的主题。 4年前关闭。 改善这个问题 我有一幅具有Alpha通道透明度的图像。 我想用CSS中的RGBA值重新创建相同的背景色,但是我找不到背景像素的真实颜色及其alpha通道值。如果我使用任何一种颜色选择器,它将给我与背景色相关的像素颜色的绝对值。 您知道找出像素的真实Alpha通道值的任何技巧吗?

11
如何强制一个浮动DIV匹配另一个浮动DIV的高度?
我的HTML代码只是将页面分为两列,分别为65%,35%。 <div style="float : left; width :65%; height:auto;background-color:#FDD017;"> <div id="response"> </div> </div> <div style="float : left; width :35%;height:auto; background-color:#FDD017;"> <div id="note"> </div> </div> 在中response div,我有可变数据;在中note div,我有固定数据。即使两个div具有两个不同的数据集,我仍需要它们以相同的高度显示,以便背景色看起来好像填充了包含两者的框。当然,问题出在response div,因为其高度取决于当前显示在其中的数据量。 如何确保两列的高度始终相等?
68 html  css  height 

3
CSS供应商前缀列表?
除了下面的列表,还有其他CSS供应商前缀对于Web开发很重要吗?我的定义正确吗?我是否应该更具体地介绍移动浏览器(例如移动Webkit) -khtml-(Konqueror,非常古老的Safari) -moz- (Firefox) -o- (歌剧) -ms- (IE浏览器) -webkit- (Safari,Chrome) 请问这个名单(其中还包含mso-,-wap-和-atsc-)的附加价值什么?


11
如何使div占据剩余高度?
我有这个问题,我有两个股利: <div style="width:100%; height:50px;" id="div1"></div> <div style="width:100%;" id="div2"></div> 如何使div2占据页面的剩余高度?
68 html  css  xhtml 

5
Twitter Bootstrap按钮单击以切换按钮上方的展开/折叠文本部分
我最近遇到了引导程序,并且正在研究扩展英雄示例。我想在页面上添加以下行为: 当单击按钮(即带有选择器'.row .btn'的元素)时,我希望能够在扩展/折叠按钮上方的文本部分之间进行切换。 HTML如下所示: <html> <head> <title>Test Page</title> <!-- Le styles --> <link href="../assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css"> body { padding-top: 60px; padding-bottom: 40px; } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> </head> <body> <div class="navbar navbar-fixed-top"> </div> <div class="container"> <div class="hero-unit"> <h1>Hello, world!</h1> <p>Blah, blah.</p> <p><a class="btn btn-primary btn-large">Learn more »</a></p> </div> <!-- …

7
如何使Facebook Like Box响应?
通过将Facebook代码粘贴到文本小部件中,我在侧边栏中使用了类似Facebook的框代码。我的主题是响应式的,我希望获得一个喜欢的框来正确调整其大小。我找到了本教程,但是他说他做的方式并不“完全响应”,所以我不知道是否有更好的方法来做。

5
如何将Bootstrap div与“ spanX”类居中?
我使用引导程序,并试图像这样将div(span7)居中: <div class="row-fluid"> <div id="main" class="span7"> Lorem ipsum dolor sit amet </div> </div> 我的CSS代码是: #main{ margin:0px auto; } 但这并不是中心。如何设置中心? 编辑 span7现在col-7位于Bootstrap 4中,不建议使用行流体(请使用container-fluid和代替row)。

5
Bootstrap表溢出长文本
我正在使用Bootstrap,并且我有一个带有几列的表,其中的最后一列有时会有很长的文本,没有空格。我注意到在某些屏幕尺寸下,该表将溢出其父div,并与其兄弟表产生难看的重叠。 我玩过它,我认为问题与文本没有间距有关。我创建了一个jsfiddle来演示我的意思。 如您所见,最左上方的表格行为良好,只是垂直增长即可容纳更多文本。但是,由于较长的无间距文本,左下方的表会导致右侧的溢出,并且左下方的表的右列在其同级的下面。 有人对我如何解决此问题有任何提示,以使很长的文本被剪切或部分分割成新行吗?

9
为什么Firefox和Opera会忽略display:table-cell内部的最大宽度?
以下代码在Chrome或IE中正确显示(图像为200px宽)。在Firefox和Opera中,max-width样式被完全忽略。为什么会发生这种情况,并且周围有很好的解决方法?另外,最符合标准的方法是什么? 注意 针对这种特殊情况的一种可能的解决方法是将设置max-width为200px。但是,这是一个非常人为的示例。我正在寻找可变宽度容器的策略。 <!doctype html> <html> <head> <style> div { display: table-cell; padding: 15px; width: 200px; } div img { max-width: 100%; } </style> </head> <body> <div> <img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula …
67 html  css  css-tables 

15
如何在div中垂直居中放置图像
我有这样的标记: <div> <img /> </div> div高于img: div { height: 100px; } img { height: dynamic-value-smaller-than-100px; } 我需要将图像放置在div的中间(在其上下具有相同的空白)。 我试过了,它不起作用: div { vertical-align: middle; }
67 css 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.