关于 html 的标签 及其嵌套问题

1、标签分为 行级标签,块级标签,以及行级块标签。
行级标签:
1.行级标签不能独占一行,并且不能设置宽高
2.行级标签的宽高由内容撑开
3.行级标签不能嵌套块级标签
4.将行级标签的display设置为block或者inline-block,或者position设置为absolute或relative或fixed,float 设置为left 和right 也就是改变了行级标签的样式。这样就可以嵌套块级元素了 并且可以设置宽高
5.行级标签不继承父级的宽度
6.行级标签的margin 和padding 的左右可以有效 但是上下可以撑开背景颜色和边框 但是不能不占据文档的物理位置
块级标签:
1.块级标签独占一行,并且可以设置宽高。
2.块级标签的宽高可以由内容撑开,并且继承父级的宽度。
3.写文本时超出部分默认不换行。 word-wrap: break-word换行
行级块标签
1.以Img标签为代表的一类元素。
2.解决Img引入图片达到居中效果的方法:
在父元素上设置height 和line-height 设置font-size为0 text-align:center;
在Img标签上设置vertical-align:middle;
3.当在图片高度和行高一样时会有3-4个向下多出的像素,解决方案用vertical-align:top;
4.当图片和文字在同一行时 文字需要在图片垂直居中位置 先解决第三点的问题 然后 再父级上设置行高与高度一致讲文字居中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值