行内元素和块元素以及行内块元素的特点 (2)

宽度、高度、行高、外边距以及内边距都可以手动设置。
样式:

/*行内块元素input*/
input{
    width: 200px;      /*宽高均有效*/
    height: 30px;
}

结构:

<input type="text" value="行内块元素1"> 
<input type="text" value="行内块元素行内块元素2行内块元素">

综合效果图如下:

行内元素和块元素以及行内块元素的特点

六、标签显示模式转换(display)

既然标签有不同的显示模式,就会有相应的转换办法以应对各种需要。

display正是我们想要的。

块元素——>行内元素 : display:inline;

行内元素——>块: display:block;

块、行内元素——>行内块: display: inline-block;

总结

总结完他们之间的特点更加清晰,记得更牢,首先在以后遇到当给一个元素设置的宽高无效的时候这就是一个原因,使用display即可解决。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgffdd.html