inline元素block元素

Posted 2020-09-27 空城里的往日时光

inline元素

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

block元素

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

display属性

  inline:

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

  block:

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

  inline-block:

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