草庐IT

hidden_size

全部标签

html - 带照片的 Bootstrap 轮播 : optimal image size?

我正在试验Bootstrap的旋转木马,并希望将其与照片一起使用。问题:我应该上传用于轮播的图片的最佳尺寸是多少?在当前的Bootstrap发行版(v3.2.0)中,示例carousel.html使用简单的1x1像素图像作为背景:我找不到这个记录,我试验过的照片在我的笔记本电脑屏幕上被拉伸(stretch)/扭曲。 最佳答案 实际上并没有“最佳”图像尺寸。在具有1x1像素的示例中,它是一个不断重复以覆盖其包含div的整个范围的像素。这个BootplyDemoofCarousel以一张1024x700像素的图片为例。如果你想要一个横跨

html - "background-size: cover"没有覆盖手机屏幕

我的网站上有一个照片背景,使用background-size:cover。它在大多数情况下都有效,但在纵向模式下在我的GalaxyS3上留下了一个奇怪的~30px空白区域。我附上了截图。1px的蓝绿色线条用于说明整个屏幕。似乎背景在社交媒体ul之后立即停止。我通过删除ul和背景将其附加到标语文本的底部来对此进行测试。另外,这是我关于移动端View的CSS:@mediaonlyscreenand(max-width:480px){.logo{position:relative;background-size:70%;-webkit-background-size:70%;-moz-bac

html - "background-size: cover"没有覆盖手机屏幕

我的网站上有一个照片背景,使用background-size:cover。它在大多数情况下都有效,但在纵向模式下在我的GalaxyS3上留下了一个奇怪的~30px空白区域。我附上了截图。1px的蓝绿色线条用于说明整个屏幕。似乎背景在社交媒体ul之后立即停止。我通过删除ul和背景将其附加到标语文本的底部来对此进行测试。另外,这是我关于移动端View的CSS:@mediaonlyscreenand(max-width:480px){.logo{position:relative;background-size:70%;-webkit-background-size:70%;-moz-bac

html - Bootstrap hidden-sm-down 不工作

我正在使用Boostrap3。为什么与hidden-sm-down当我在笔记本电脑上调整页面大小时仍然可见?我想在小型设备上隐藏这两个图像,以便有不同的菜单。TextTextTextTextTextTextText 最佳答案 实际上,hidden-sm-down不适用于Bootstrap4及更高版本(那里使用d-none而不是hidden-sm-down,并使用d-sm-none而不是hidden-sm-向上,另见understanding-details).在BS4中,显示实用程序类完全改变了。请改用此格式;.d-{breakpo

html - Bootstrap hidden-sm-down 不工作

我正在使用Boostrap3。为什么与hidden-sm-down当我在笔记本电脑上调整页面大小时仍然可见?我想在小型设备上隐藏这两个图像,以便有不同的菜单。TextTextTextTextTextTextText 最佳答案 实际上,hidden-sm-down不适用于Bootstrap4及更高版本(那里使用d-none而不是hidden-sm-down,并使用d-sm-none而不是hidden-sm-向上,另见understanding-details).在BS4中,显示实用程序类完全改变了。请改用此格式;.d-{breakpo

html - 伪元素 :before and overflow hidden

我有一个有两个边框的元素。我通过添加一个伪元素实现了这一点:.inner:before{width:72px;height:28px;content:'';display:block;border:3pxsolidrgb(255,0,0);position:absolute;}该元素被另一个具有overflow:hidden属性的div包裹。如您所见:http://jsfiddle.net/HKEn4/1/.inner-element是隐藏的,但不是伪元素(在OSX上使用safari、firefox和chrome进行测试)。如何隐藏伪元素? 最佳答案

html - 伪元素 :before and overflow hidden

我有一个有两个边框的元素。我通过添加一个伪元素实现了这一点:.inner:before{width:72px;height:28px;content:'';display:block;border:3pxsolidrgb(255,0,0);position:absolute;}该元素被另一个具有overflow:hidden属性的div包裹。如您所见:http://jsfiddle.net/HKEn4/1/.inner-element是隐藏的,但不是伪元素(在OSX上使用safari、firefox和chrome进行测试)。如何隐藏伪元素? 最佳答案

html - 为什么 box-sizing 在 table 和 div 上的作用不同?

这是HTML:http://jsfiddle.net/jC8DL/1/OuterdivInnerdiv,10pxmargin.Innerdiv,10pxpadding.Same,withbox-sizing:border-boxInnertable,10pxpadding在我的Chrome中看起来像这样:直到最后一个,我想我都明白了。我的Chrome检查器显示表格的计算box-sizing样式是content-box所以我希望它表现得像第二个div,溢出并且看起来很难看。为什么不同?这是否记录在HTML/CSS规范的某处? 最佳答案

html - 为什么 box-sizing 在 table 和 div 上的作用不同?

这是HTML:http://jsfiddle.net/jC8DL/1/OuterdivInnerdiv,10pxmargin.Innerdiv,10pxpadding.Same,withbox-sizing:border-boxInnertable,10pxpadding在我的Chrome中看起来像这样:直到最后一个,我想我都明白了。我的Chrome检查器显示表格的计算box-sizing样式是content-box所以我希望它表现得像第二个div,溢出并且看起来很难看。为什么不同?这是否记录在HTML/CSS规范的某处? 最佳答案

html - Firefox:box-sizing 和 min-height

我不明白:这真的是一个错误还是我只是遗漏了什么?我为HTML文档中的所有div设置了box-sizing:border-box(所有-moz和-webkit当然是前缀)。所以这意味着div的height总是包含它的padding。期望min-height属性的行为类似是合理的。但显然,在Firefox中它没有。我的意思是,当我有一个未设置height(即height:auto)但设置了min-height的div(例如,220px)和padding(例如,10px),它导致div的整体高度为240px而不是Firefox中的220!不过,无论哪种方式,它在Chrome和Opera中都保