您的当前位置:首页正文

日常css技巧小结(2)inline-block带来的迷惑_html/css_WEB-ITnose

2022-06-15

一、问题描述

在平时布局中,inline-block使用的频率比很高,主要是因为可以让行标签设置宽高。我在布局过程中,发现了两个“问题”,

1行标签.display:inline-block之后的行标签之间有4像素的间距;https://jsfiddle.net/firelight/69phh891/

2.对display:inline-block的行标签设置margin:0 auto;也不会在父级居中。https://jsfiddle.net/firelight/jh5ojqu6/

我开始对display:inline-block的理解是:既是行标签也是块标签。随着这两个问题的出现发现并不是简单的1+1=2。

二、捋一捋概念

  • block
  • 会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  • 可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  • 可以设置margin和padding属性
  • inline
  • 不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  • 设置width,height属性无效。
  • margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • inline-block
  • W3school:An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
  • 对上一句我的理解是:inline-block元素本身还是行标签,但当对其设置某属性时具有块标签的特点。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
  • 三、解析问题

    1、display:inline-block之后的行标签之间有4像素的间距;?起初我认为是inline-block带来的问题,结果当我把inline-block去掉,这4个像素依然存在。在张鑫旭的一篇博客中,解释这个是符合规范的应有的表现,元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。当然还有N种在不影响HTML代码结构的情况下解决这个问题的方法,就不在此赘述。可以参考张鑫旭的文章:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove

    2、对display:inline-block的元素设置margin:0 auto;也不会居中?

    margin:0 auto;是设置块标签在父级中居中对齐,是一种对齐方式。所以对于display:inline-block,设置margin:0 auto;此时是其本身的行标签性质占上风(而行标签本身默认靠左对齐),所以并不起作用。应该在其父级设置text-align:center来居中对齐。如果设置具体的margin,上下左右四个方向还是可以的。https://jsfiddle.net/firelight/jh5ojqu6/1/

    小编还为您整理了以下内容,可能对您也有帮助:

    html代码编写过程中的几个警惕点_html/css_WEB-ITnose

    本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里。

    1.内联标签之间的空格

    正常情况下书写html代码的时候都有换行、缩进等习惯,比如

    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } #myDIV { width: 200px; height: 200px; background-color: #ff0; } #myDIV > div{ width: 50px; height: 50px; display: inline-block; background-color: #f00; } div1 div2

    显示效果为

    中间有一个空白。原因是如果两个内联标签(或者设置display:inline或inline-block)之间有连续的空格符、回车符、换行符,则会这些符号会被默认处理为一个空格符号。

    比如我们在两个div标签之内加入" ddd dd d ",效果如下,无论有多少个相连的空白符号,最终呈现的效果都只有一个空格符

    这个和在内联元素中直接写入字符类似

    但是内联元素会去掉头部和尾部的空白字符。

    所以需要提示的是:

    内联元素排列时如果需要避免标签之间的空白则需要使标签紧密相连。

    内联元素要填写内容时尽量使用.innerText或.textContent(Firefox不支持innerText,但是支持该属性)。

    非要在html代码中写入空白,请使用html的空格表示方法

    说道这里,我想有些人对内联元素理解有偏差。所谓内联是和所谓的“块”对立的。内联元素不成块的,感觉就像水流一样,遇到阻碍就环绕而行。比如源码

    div1 ddd dd d div2 d dd d

    显示效果

    span里面的内容被分成了两段,不是一个完整的块了。

    2.body标签默认的margin边框

    这个没有什么说的,现代浏览器(支持CSS3)和IE8的body都默认了一个css样式margin:8px。其他有的标签也是有这样的,这里不举例了。很多时候我们都不需要,需要一般的项目样式开头都有一个类似的设置。

    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; }

    3.特殊空白字符导致显示异常

    举个例子,下面的源码中看似没有问题

    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{ margin: 0; padding:0; } *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #myDIV { width: 200px; height: 40px; background-color: #ff0; } #myDIV a{ float: left; width: 200px; background-color: #f00; } test0

    实际上a标签前面的有一个非正常的的空白字符,显示效果如下

    a的宽度和#myDIV的宽度应该是相同的,且a是浮动,显示效果却换行了,这也太让人抓狂了,有么有。

    正常的显示效果是

    我们来看一下这个非正常的空白是啥。

    第一个是非正常的空格,其URI组件编码为"%E3%80%80"

    第二个是正常的空格,其URI组件编码为"%20"

    第三个是正常的Tab建,其URI组件编码为"%20%20%20%20",实际上就是4个空格。

    看出来了吧。所以有的时候再网站中拷贝的代码运行效果异常可能就是这个原因导致的。

    未完待续,后期如果想到其他的点补上。也希望童鞋们提一些相关的点,本人一定补上。

    如果觉得本文不错,请点击右下方【推荐】!

    请问css中display: inline- block是什么意思啊?

    display是控件的css属性之一,表示的是显示模式。none表示不显示在网页上,但是代码存在;bolck是此元素将显示为块级元素,此元素前后会带有换行符。

    在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。

    我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

    参考资料

    天涯社区.天涯社区[引用时间2017-12-25]

    css居中的几种方式_html/css_WEB-ITnose

    居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式。

    欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新。

    1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。

    /*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/}

    2.line-height 将单行文字line-height值设置为其父元素高度可以实现该行文字的垂直居中,局限也很明显。

    文字内容

    #container{ height: 30px;}#content{ line-height: 30px;}

    3.表格 如果你使用表格的话,那么可以利用td元素的align:center和valign:middle属性轻易的做到水平和垂直居中,但是考虑到现在表格布局的使用频率已经很低了,实用性其实并不强。

    4.display: table-cell 由于单元格可以轻易的实现水平和垂直居中,所以可以把父元素容器模拟成单元格元素,通过样式text-align:center以及vertical-align:middle来达到一样的效果。但是要注意的是text-align:center只能使非块级子元素水平居中而对块级子元素无效。

    #table{ display: table-cell; width: 200px; height: 200px; vertical-align: middle; text-align: center;}

    5.绝对定位居中 这个方法使用的相对也较多,但是需要子元素有固定的宽高,不多说直接上代码。

    html,body{ width: 100%; height: 100%;}body{ position: relative;}body>div{ position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; /*此时的元素并不是居中的,向右偏了一半的宽度,向下偏了一半的高度*/ /*所以要使用margin把元素拉回来*/ margin: -50px 0 0 -50px; }

    如何理解CSS中的display:inline-block属性?

    对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义——除非你之前对块元素的display属性重新定义过。

    ===========================

    多罗嗦一句:

    display:block;比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。你可以实际写几行简单代码感受一下。

    ===========================

    是不是div里就没有必要写display:block呢?通常情况下是没有必要的。

    常见的特殊情况:之前曾对div设置过display:hidden。

    博科教育还为您提供以下相关内容希望对您有帮助:

    html代码编写过程中的几个警惕点_html/css_WEB-ITnose

    1.内联标签之间的空格正常情况下书写html代码的时候都有换行、缩进等习惯,比如html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, te...

    inline- block是什么意思?

    Display:inline-block是内联元素,简单来说就是在同一行显示。内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联...

    css居中的几种方式_html/css_WEB-ITnose

    1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效。/*以div元素为例*/div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/} 2...

    ...浏览器到底会选择哪个样式)_html/css_WEB-ITnose

    (其中特指度比较重要) CSS有3种工作机制:1.继承 2.层叠 3.特指 (其中层叠原则是基于继承和特指的) 1.继承 :css中的祖先元素会向后代传递一样东西:CSS属性的值。body是所有元素的祖先,如果我们指定body{color:r...

    HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

    2. 将样式代码写在标签中通常将style标签放到HTML文件标签里如: div { background: #fff; } 此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。缺点:多个页面之间CSS复用仍然不够。 3. 使用标签,引...

    请问css中display: inline- block是什么意思啊?

    在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值...

    ...布局时需要知道的几个技巧_html/css_WEB-ITnose

    以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错...

    页面元素居中的几种方法_html/css_WEB-ITnose

    1Div居中 1.1左右居中 在父窗口中设置text-align:center,要注意的是,此方法只对内联元素起作用,所以要在居中的div中设置display:inline-block。以下代码中红线部分表示了如何让3个div在itemContainer中居中显示。 如果是单...

    如何理解CSS中的display:inline-block属性?

    display:block;比较常用于&lt;a&gt;&lt;span&gt;这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,那么定义width、height等和长宽相关的css属性时会发现完全不生效。你可以实际写几行简单代码感受一下。=== 是...

    请问css中的区块 inline inline-block block 三者有什么区别呢?_百度...

    block:使用此属性后,元素会被现实为块级元素,元素会进行换行。inline-block:是使元素以块级元素的形式呈现在行内。意思就是说,让这个元素显示在同一行不换行,但是又可以控制高度和宽度,这相当于内敛元素的增强。要注意...

    显示全文