草庐IT

BOX_MARGIN

全部标签

html - 将 box-shadow 添加到转换后的 div

我正致力于仅使用CSS制作一本3D外观的书。我正处于最后一步,即向其添加box-shadow。如何向其中添加box-shadow:10px10px30pxrgba(0,0,0,0.3)?我想我需要调整div设置。参见jsFiddle用于视觉效果。.book-image-wrap{margin:25pxauto;height:346px;width:230px;position:relative;-webkit-perspective:1200px;-moz-perspective:1200px;perspective:1200px;}.book-image{background:#00

jquery - 说 "Anchorlink"Target Element 有动态 margin-top

我有一个小“大”问题,不知道如何解决。如果我有一个带有跳转到带有margin-top元素的anchor的链接,则边距将被“忽略”,如下例所示:http://jsfiddle.net/T38uk/如果我有一个margin-top="0"的div,并且会动态添加一些margin-top,anchor会跳转到“旧”位置,如下例所示:http://jsfiddle.net/eG2Gd/是否可以告诉anchor目标元素上有一个动态变化的边距?这是单个代码片段:HTMLTestanchorHiermussderAnkerhinspringen​CSSbody{height:8000px;}.lin

html - CSS3 3D Transitions 在使用 box-shadow 时在 firefox 中闪烁

我有一个像苹果一样的coverflow元素,使用CSS3过渡和3D变换构建。http://jsfiddle.net/7eDkb/1/(带阴影的过渡)在chrome上运行流畅,但在firefox上,封面在设置动画时会在可见和不可见之间闪烁。经过消除过程后,我发现从元素中删除“box-shadow”css属性会导致在firefox中平滑过渡。http://jsfiddle.net/7eDkb/2/(没有框阴影的过渡)我已经在firefoxv15和chromev21中测试过了。是否有解决方案可以在元素上同时使用3d过渡和框阴影而不在Firefox上闪烁?编辑:在fiddle中,单击灰色图像以

html - Chrome 与 box-sizing :border-box in a display:table

我正在使用display:table进行小型2Pane布局。对于间距(也来自背景图像),我使用padding。因为我需要child从可用空间中获得一个精确的width:50%(考虑到父级div的填充),我使用box-尺寸:边框框。这在Opera中运行良好,但在Chrome中box-sizing:border-box甚至-webkit-box-sizing:border-box都被默默地忽略了。我制作了一个展示问题的演示。两个红色框应该是正方形,蓝色框的宽度和高度应该是200px:http://jsfiddle.net/fabb/JKECK/这是html源代码:Somethingonth

html - Safari 上带有 margin-right negative 的布局差异

我偶然发现了Safari和Chrome/Firefox之间的布局渲染差异,我不知道哪个是“正确的”。你可以查看jsfiddlehere在Firefox/Chrome上,布局符合预期,黄色的div在红色的之后。但在Safari上,黄色的div位于红色的下方。在调查我做错了什么之后,我发现错误来自CSS类E谁的属性(property)margin-right(值:-11px)大于width我的div的属性(值:10px)。我想我理解为什么Safari会以这种方式呈现它。B类的div宽度计算为其子项的宽度之和,因为它们具有属性float:left;.这是widthB=widthB2*2+wi

html - margin 属性不适用于 css 中的选择元素

我有这个代码:blablabl;blablabl;在CSS中.fooselect{margin-bottom:50px;}输出是2个彼此相邻且没有50px分隔的选择元素。我在这里缺少什么? 最佳答案 select元素是display:inline默认情况下(通常)并且不会尊重边距。将它们更改为display:block如果你想让每个人都在自己的行上,或者display:inline-block如果您希望每个都有较大的底部边距。编辑:我看到你有,所以它们将与display:inline-block在两条不同的线上

html - margin 顶部似乎失控了

我有一个div,其中包含图像和描述。当我更改.describing的margin-top时,容器div移动:HTML:MyrealizationofA*pathfindingalgorithm.Veryhardgamewithcutegraphics.Called"Followthelight".CSS:body{background-size:overlay;background:rgb(72,158,136);}.project{margin:2%1%1%3%;padding-top:1em;background:#FFF;width:12em;height:19em;displa

html - 为什么页面宽度会影响 Firefox 中的 "margin-top:50%"?

在这个JSFiddle中http://jsfiddle.net/9UMRk/div的margin-top为50%。我希望将其调整为页面高度。但是,如果您在Firefox(3和4)中调整窗口大小,您会看到div的垂直定位受页面宽度影响,但不受页面高度影响。为什么? 最佳答案 这看起来确实违反直觉,但实际上符合边距的盒模型,即intheCSSlevel2.1spec:Thepercentageiscalculatedwithrespecttothewidthofthegeneratedbox'scontainingblock.Notet

html - 为什么margin :0 auto; not work on this input button?

我正在尝试将输入按钮置于表单的中央,但通常的边距是:0auto;没有做任何事情。以下是我的HTML的设置方式:和CSS:body{padding:0;margin:0;width:100%;font-family:CenturyGothic,sans-serif;}.container{width:100%;}#contact-div{height:100vh;width:100%;background:url("images/contactpic3.jpg")no-repeatcenterfixed;background-size:cover;}.input-field{width:

html - IE11 - border-radius 和 box-shadow 一起导致问题

遵循我的代码:div{display:block;width:500px;height:200px;border:1pxsolidblack;border-radius:5px;transition:box-shadow1s;}div:hover{box-shadow:25px25px0px#000;}Test它可以在Chrome、Safari和Firefox上运行,但在InternetExplorer11上运行不佳,当div不再聚焦时会出现明显的视觉问题。如何解决?JSFiddle:https://jsfiddle.net/aL0t8g21/ 最佳答案