草庐IT

wn-block

全部标签

html - 从无显示到显示 block 的 Css 转换,使用 subnav 导航

这个问题在这里已经有了答案:TransitionsontheCSSdisplayproperty(37个答案)关闭2年前。这就是我的jsFiddlelinknav.mainulul{position:absolute;list-style:none;display:none;opacity:0;visibility:hidden;padding:10px;background-color:rgba(92,91,87,0.9);-webkit-transition:opacity600ms,visibility600ms;transition:opacity600ms,visibilit

html - 如果 block 元素包含另一个 block 元素,则将 block 元素更改为内联 CSS 是否错误?

我知道将block元素放在行内元素中是错误的,但是下面的呢?想象一下这个有效的标记:Thisisaparagraph现在添加这个CSS:div{display:inline;}这就造成了一个内联元素包含一个block元素的情况(div默认变成内联,p默认是block)页面元素是否仍然有效?我们如何以及何时判断HTML是否有效-在应用CSS规则之前还是之后?更新:从那以后我了解到在HTML5中将block级元素放在链接标记中是完全有效的,例如:HeadingParagraph.如果您希望将一大块HTML作为链接,这实际上非常有用。 最佳答案

html - 如果 block 元素包含另一个 block 元素,则将 block 元素更改为内联 CSS 是否错误?

我知道将block元素放在行内元素中是错误的,但是下面的呢?想象一下这个有效的标记:Thisisaparagraph现在添加这个CSS:div{display:inline;}这就造成了一个内联元素包含一个block元素的情况(div默认变成内联,p默认是block)页面元素是否仍然有效?我们如何以及何时判断HTML是否有效-在应用CSS规则之前还是之后?更新:从那以后我了解到在HTML5中将block级元素放在链接标记中是完全有效的,例如:HeadingParagraph.如果您希望将一大块HTML作为链接,这实际上非常有用。 最佳答案

html - 垂直对齐 block 元素中的文本

我知道垂直对齐总是被问到,但我似乎无法为这个特定示例找到解决方案。我希望文本在元素内居中,而不是元素本身居中:lia{width:300px;height:100px;margin:auto0;display:block;background:red;}Iwouldlikethistextcenteredvertically真的没有CSS属性吗?我愿意添加但我真的不想添加任何更多的标记。 最佳答案 根据CSSFlexibleBoxLayoutModule,您可以将a元素声明为flex容器(见图)并使用align-items来垂直沿横

html - 垂直对齐 block 元素中的文本

我知道垂直对齐总是被问到,但我似乎无法为这个特定示例找到解决方案。我希望文本在元素内居中,而不是元素本身居中:lia{width:300px;height:100px;margin:auto0;display:block;background:red;}Iwouldlikethistextcenteredvertically真的没有CSS属性吗?我愿意添加但我真的不想添加任何更多的标记。 最佳答案 根据CSSFlexibleBoxLayoutModule,您可以将a元素声明为flex容器(见图)并使用align-items来垂直沿横

html - 删除内联 block 元素中大文本上方和下方的空白

假设我有一个定义为内联block的span元素。它的唯一内容是纯文本。当字体非常大时,您可以清楚地看到浏览器如何在文本上方和下方添加一点填充。HTML:CSS:span{display:inline-block;font-size:50px;background-color:green;}​BIGTEXT看看盒子模型,很明显浏览器正在添加填充内容边缘。我需要删除这个“填充”,一种方法是简单地改变行高,如:http://jsfiddle.net/7vNpJ/1/这在Chrome中效果很好,但在Firefox中,文本向顶部移动(FF17、Chrome23、MacOSX)。有跨浏览器解决方案

html - 删除内联 block 元素中大文本上方和下方的空白

假设我有一个定义为内联block的span元素。它的唯一内容是纯文本。当字体非常大时,您可以清楚地看到浏览器如何在文本上方和下方添加一点填充。HTML:CSS:span{display:inline-block;font-size:50px;background-color:green;}​BIGTEXT看看盒子模型,很明显浏览器正在添加填充内容边缘。我需要删除这个“填充”,一种方法是简单地改变行高,如:http://jsfiddle.net/7vNpJ/1/这在Chrome中效果很好,但在Firefox中,文本向顶部移动(FF17、Chrome23、MacOSX)。有跨浏览器解决方案

html - 内联 block 和内联表有什么区别?

据我所知,这些display选择器似乎是相同的。来自MozillaCSS文档:inline-table:内联表值在HTML中没有直接映射。它的行为类似于HTML元素,但作为行内框,而不是block级框。表格框内是block级上下文。inline-block:该元素生成一个block元素框,它将与周围的内容一起流动,就好像它是单个内联框一样(表现得非常像替换元素)。看来inline-table可以做什么可以用inline-block来完成. 最佳答案 两者都是inline-block和inline-table有一个inlineoute

html - 内联 block 和内联表有什么区别?

据我所知,这些display选择器似乎是相同的。来自MozillaCSS文档:inline-table:内联表值在HTML中没有直接映射。它的行为类似于HTML元素,但作为行内框,而不是block级框。表格框内是block级上下文。inline-block:该元素生成一个block元素框,它将与周围的内容一起流动,就好像它是单个内联框一样(表现得非常像替换元素)。看来inline-table可以做什么可以用inline-block来完成. 最佳答案 两者都是inline-block和inline-table有一个inlineoute

html - BEM block 、命名和嵌套

我正在尝试围绕BEM命名约定进行思考。我被困在这个。我可能误解了什么,让我们看看。我有一个侧边栏导航和一个内容导航。我的侧边栏导航看起来像这样LINKLINK我的内容导航看起来像这样LINKLINK现在,如果我为.nav__item设置样式,我将遇到一个问题,它们出现在我的两个导航中,并且不应具有相同的样式。我应该在这里做一些嵌套,还是我命名我的block和元素有误?CSS嵌套示例:.content__nav.nav__item{background:Red;}或者我应该这样命名:LINK你能帮忙吗? 最佳答案 关于如何编写BEM类