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.当图片和文字在同一行时 文字需要在图片垂直居中位置 先解决第三点的问题 然后 再父级上设置行高与高度一致讲文字居中。
关于 html 的标签 及其嵌套问题
最新推荐文章于 2021-06-27 13:09:29 发布