摘要:基本知识点行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。行内元素去除了之间的莫名空白。当为行内元素进行定位时,与都会使得原先的行内元素变为块级元素。且的是不占空间的。
基本知识点
行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。
行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
其中img和input为行内块元素。
行内元素与块状元素之间的转换:float: 当把行内元素设置完float:left/right后,该行内元素的display属性会被赋予block值,且拥有浮动特性。行内元素去除了之间的莫名空白。
测试 块级元素一行内元素一 行内元素二
如图,当把行内元素一设为左浮动时,就可以为其设置宽度了,说明它已经变成了块级元素。
2. position: 当为行内元素进行定位时,position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。
3 .display:
1、块级标签转换为行内标签:display:inline;
2、行内标签转换为块级标签:display:block;
3、转换为行内块标签:display:inline-block;
常用的 display 可能的值: 特性 1.text-align属性对块级元素起作用,对行内元素不起作用:原因是块级标签如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽,那么在100%的宽度中居中生效;但是行内元素的宽完全是靠内容撑开,所以宽度就是内容撑开的宽:
所以块级是在盒子中间居中了,但是因为行内元素的宽就是内容宽,没有可居中的空间,所以text-align:center;就没有作用;但是如果给font转换为块级就不一样了:
2.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。 3.块级元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。注意但块级元素当没有明确指定 width 和 height 值时,块级元素尺寸由内容确定,当指定了 width 和 height 的值时,内容超出块级元素的尺寸就会溢出,这时块级元素要呈现什么行为要看其 overflow 的值(visible,hidden,overflow,scroll) 4.块级元素可以设置margin和padding属性,行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果,但是竖直方向的margin-top、margin-bottom不起作用。 5.行内元素的padding-top和padding-bottom会起作用,不过就像脱离了标准流一样(即padding-left和padding-right的层级比其他元素高),并不会占据位置,并且还把其他元素给盖住了。但是,假如inline的元素没有内容,“padding-top、padding-bottom"将不起作用。如果想要起作用,只需要给padding-left或者padding-right设置一个值,或者当inline的元素有内容时就会起作用。块级元素一行内元素一 行内元素二
如图所示,当我们改变padding值时,效果是背景向四个方向扩展,padding-top和padding-bottom是增大的,但是对于块状元素一是没有影响的(在竖直方向上),不然行内元素一也不会挤入块状元素了。
下面的实例可以看到如果inline的元素没有内容,“padding-top、padding-bottom"将不起作用
如果想让padding-top或者padding-bottom起作用,只需要给padding-left或者padding-right设置一个值,或者当inline的元素有内容时就会起作用。
6.当inline-block碰到同类(inline,inline-block)时,谁的上下margin、paddin或line-height大,就听谁的。除非它是inline,因为inline的margin是不起作用的。且inline的padding是不占空间的。
item1item2
item1item2
如图所示,inline-block碰到同类时,行高也会一起使用。其他的padding-top和margin-top甚至都会一起使用
7.inline和inline-block会引起间距的空格item1item2
可以看到两个div之间会有几个像素的间距,这个间距是有换行或回车导致的。有以下解决方法
(1)将空格直接删除,放到一行
item1item2
(2)在空格代码中加入注释
item1item2
(3)设置margin-left为负值,但是每个浏览器的间距不一样,所以基本不用这种方法
.item2{ margin-left:-8px; display:inline; background-color:pink; }
(4)给父元素增加“font-size:0px"
item1item2
(5)给父元素加letter-spacing负值,然后通过子元素清除letter-spacing值
item1文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108001.html
摘要:从上面的这个分析,也不难理解为什么下,对块元素设置属性无法实现的效果。这时块元素仅仅是被触发了,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如中块元素呈递为内联对象。display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和...
摘要:那不是,是我不懂而已。的用途之一西文是以空格来分隔单词的,而汉字间则无需空格分隔,但为了统一西文东亚和的排版,于是抽象出一个名为的概念用于分隔词义单元,则作为的值域,而定义域就是语言信息。 前言 每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;。然后发...
摘要:基本知识点行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。行内元素去除了之间的莫名空白。当为行内元素进行定位时,与都会使得原先的行内元素变为块级元素。且的是不占空间的。 基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局。 块级元素(block):独占一行,对宽高...
摘要:与属性的值不同,其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更,仅供参考。 它的语法如下: display:none | inline | block | list-item | inline-block | table | inline...
阅读 2883·2021-11-23 09:51
阅读 3117·2021-11-12 10:36
阅读 3156·2021-09-27 13:37
阅读 3129·2021-08-17 10:15
阅读 2560·2019-08-30 15:55
阅读 2700·2019-08-30 13:07
阅读 767·2019-08-29 16:32
阅读 2613·2019-08-26 12:00