CSS
美林琳琳
这个作者很懒,什么都没留下…
展开
-
块级元素和行内元素
元素显示角色:块级(block-level)元素和行内(inline-level)元素 块级元素 块级元素生成一个元素框,(默认的)它会填充其父元素的内容区,旁边不能有其他元素。换句话说,它在元素框之前和之后生成了“分隔符”。 主要有<p>、<div>、<ol>、<li>、<ul>、<dl>、<dt>、原创 2018-07-23 19:28:48 · 94 阅读 · 1 评论 -
结构和层叠——CSS特殊性、继承和层叠
继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源。这个过程就成为层叠。 特殊性 对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。 注意:这并不是解决冲突的全部,实际上,所有样...原创 2018-07-23 22:42:59 · 157 阅读 · 0 评论 -
当li设置为inline-block之后消除元素之间的间距
今天在仿酷狗音乐官网的时候,在写一个导航栏的时候,遇到了这样的一个问题(为直观一点,这里我们将它的背景颜色设置为红色): 如下,将两个ul中的li设置为inline-block之后,理想中的状态应该是像这样,两个li元素之间并没有任何的间隔,连在一起的, 然而实际上的状态是, 为什么呢? 浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上...原创 2018-07-31 17:04:13 · 1167 阅读 · 0 评论 -
div和img之间的空白间隔
如题,两个div之间的空白间隔很明显和上一篇博客之中的两个<li>之间的间隔雷同,会出现的原因依旧是因为浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格。 结构如下: 像是这样(为了明显看出来,我们将div的背景设置成了红色) 可以明显看出来,在div和img之间,不论是上方还是下方,都有一条很明显的缝隙 当然,解决办法也很简单,直接设置...原创 2018-08-01 20:35:09 · 1865 阅读 · 0 评论