前端疑难困惑小笔记-1 行内(内联)元素 块级元素 内联块状元素

行内(内联)元素、块级元素特性设置

行内元素不可以设置宽、高 但是块级元素可以

display:inline-block;//同时具有行内元素与块级元素的属性

*块元素

<div> <p> <h1> <ul> <ol> <table> <form>

【1】width height 即宽高设置有效
【2】即使设置了宽度,盒子依旧独占一行

*内联元素

<a> <span> <br> <i> <em> <label>

【1】宽高设置后无效果 margin padding在垂直方向上的设置是没有效果的!
【2】但是margin padding 在水平方向上的设置是有效果的 !
【3】不独占一行 可以和兄弟元素一起占据一行~
【4】网页布局时 经常出现内联元素无法设置宽高的情况 一定要做一个转换

对行内元素进行宽高的设计时,要先用’display:block’将其转化为块元素

*既是块元素 又是内联元素

内联块状元素 <img> <input>

【1】现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素。
【2】如果没有设置宽高,宽高由内容决定

在之后的网页设计中如果遇到了一些例子随时补充进来!

猜你喜欢

转载自blog.csdn.net/qq_45704942/article/details/113522863