本文深入解析CSS中的三种显示模式：inline、block与inline-block的区别与应用。详细阐述了每种模式下元素的行为特征，如是否独占一行、能否设置宽高、边距效果等，并介绍了如何利用这些模式实现元素的水平居中。
- inline:
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
- 不能更改元素的height，width的值，大小由内容撑开.
- 可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
- block:
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
- 能够改变元素的height，width的值.
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
- inline-block:
- 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
- 用通俗的话讲，就是不独占一行的块级元素
- 如果给一个块级元素让它在水平居中话 需要给它设置 margin: 0 auto,而text-align:center 则是设置文本居中的,如果向让一个块级元素用text-algin居中的话,就需要给它设置display-inlineblock,变成内联块,就可以在其父级元素设置text-algin:center让其居中,因为行内元素和内联块都可以用text-algin:center
- 突然想说下 margin 和 padding, margin是一个元素的外边框到另一个元素内边框的距离,padding是一个元素内边框到自己内容的距离
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
