一、块元素
1.常用块元素标签有:div,p,ul,li,h1~h6,dl,dt,dd等
2.支持全部样式
3.可以设置宽高,如果没有设置宽度属性,则宽度默认为父级宽度的百分之百
4.盒子占据一行,即使设置了宽度
如图.box并未设置宽度:
CSS会自动将宽度设定为父级的百分之百,且独占一行,加上宽度即可正常显示设定的宽度
二、内联元素(行内元素)
注意:常见的内联元素:a,span,em,b,strong,i
1.不支持宽高,margin上下、padding上下,如图.box2已设置margin上下,但并未生效。padding上下因为其不生效所以设置为0,如果强行设置反而会导致渲染bug,padding左右已生效
2.宽高由元素内容决定,如果是图片就为图片大小,如果字体30就按照30
3.盒子并在一行中
4.代码换行时盒子会自动产生间距
解决办法:
将父元素中的font-size设置为0,再重新设置子元素的font-size:
父级:子级:
效果:
原效果
5.子元素是内联元素,父元素可用text-align设置对其方式
父元素.box3: 子元素:.box3 a
添加了text-align:center;后块元素内的内联元素居中对其
三、内联块元素(块元素+内联元素)
1.支持全部样式
2.可以自己设置宽高,如果元素没有设置宽高,则由内容决定
3.盒子并在一行
4.代码换行,盒子产生间距
5.父元素可用text-align设置子元素对其方式
可用display将内联元素转换为内联块元素,使其可以设置宽高,margin上下以及padding上下
元素中添加:
,即可将内联元素转化为内联块元素
更多display属性:
可实现在块元素、内联元素、内联快元素中切换
如果觉得《CSS块元素基础 内联元素(行内元素) 内联块元素(行内块元素)》对你有帮助,请点赞、收藏,并留下你的观点哦!