inline元素、block元素

2024-09-05 22:53:00

inline元素

不会独占一行，相邻的行内元素会排列在同一行内，直到一行排不下才会换行
高、行高、以及外边距和内边距不可改变
宽度就是它的文字或图片的宽度，不可改变，随元素内容变化而变化
内联元素只能容纳文本和其他内联元素
只有水平方向margin-left、margin-right、padding-left、padding-right会产生边距效果

block元素

会独占一行，默认情况下，其宽度自动填满父级元素宽度
高度、行高、以及外边距和内边距都可控制
宽度缺省时默认容器的百分之百
可以容纳内联元素和其他块级元素

display属性

inline:

使元素变成行内元素，拥有行内元素的特性，既可以与其他行内元素一起共享一行，不会独占一行。
不能改变元素的height、width值，大小由内容撑开
可以使用padding、margin的left和right产生边距效果，但是top和bottom不行
行内元素之间先默认水平排列，若剩余空间不足以容纳下一个内联元素，则换行 <input/><input/><input/><input/><input/>

block:

使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素默认填满父级元素的宽度
能够更改元素的height,width的值
可以设置padding、margin的各个属性值，top、left、bottom、right都能产生边距效果。

inline-block:

行内块级元素，可用于块级元素，也可用于行内元素
可用于换行，但有一个缺点，同一行内元素内的内容不能换行，只能行内元素之间
结合了inline与block的一些特点,结合了inline的第一个特点和block的第2，3，4个特点。用通俗的话讲，就是不独占一行的块级元素

最新文章

热门文章