有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

块元素和行内块元素区别

代码编程 cat 12个月前 (10-18) 42次浏览 已收录 0个评论 扫描二维码

 


块级元素(块元素):
h1-h6,p,ul,li,ol,dl, dt,dd ,div用于画大块-文档布局
1)默认独占一行
2)默认宽度100%-父元素多宽它多宽
3)支持盒模型所有属性
支持行高、text-align,text-indent(块状元素适用)
行级元素(行内元素、内联元素、内嵌元素):
span,a,i,b, em,del, strong,img
用于画小块-细节修饰
1)可以在一行并排
2)默认适应内容(由内容撑开)
3)不支持宽、高、不支持垂直方向的margin, padding, border
不支持行高、text-align,text-indent
代码视图的折行、空格会产生间隙
父元素text-align会影响它们水平方向的对齐方式
inline-block显示为行内块----特殊的行内元素
可以使元素具有行内块元素的特性
既有行内元素的特性
1)可以在一行并排2)默认适应内容
又拥有块元素的特性
3)支持宽高、padding,margin..
3)支持行高、text-indent, text-align
元素显示模式―元素有默认的显示模式也可以通过该属性在需要时进行转换
display: block;显示为块
可以使元素具有块元素的特性
inline;显示为行内
可以使元素具有行内元素的特性
inline-block显示为行内块----特殊的行内元素
可以使元素具有行内块元素的特性
既有行内元素的特性
1)可以在一行并排
2)默认适应内容又拥有块元素的特性
3)支持宽高、padding,margin..
3)支持行高、text-indent,text-align元素模式之间的转换
常用情形:
1)行内元素转块display : block;
2)行内元素或
块元素转行内块display :inline-block;
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址