HTML&CSS精华知识点——元素分类、盒模型、补充css属性

最新推荐文章于 2021-06-09 12:54:05 发布

攻城狮0908

最新推荐文章于 2021-06-09 12:54:05 发布

阅读量284

点赞数 2

分类专栏：前端、HTML，CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_39052393/article/details/100735240

版权

本文详细介绍了HTML元素的分类，包括行盒元素、块盒元素和行级块元素，强调了它们的特点和转换方法。同时，深入讲解了盒模型，包括margin、border、padding和content的构成，以及如何设置内边距和外边距。最后，补充了CSS中的overflow和word-break属性的使用规则。

摘要由CSDN通过智能技术生成

一、元素的分类：
1）常见的行盒元素（内联元素、 inline）： span、strong、 em、 a、 del 等

特点：内容决定元素所占位置，不独占一行，不可以通过 css 改宽高。宽=内部元素的宽，高＝内部元素的高。内边距和边框水平方向设置有效，垂直方向仅会影响背景，不会实际占据空间。外边距，水平方向有效，垂直方向不会占据空间
2）常见的块盒元素（ block）： div、 p、 ul、 li、 ol、 form、 address 等
特点：独占一行；可以通过 css 改宽高。在没有设置宽高时，宽=100%，高＝内部元素的高。
3）行级块元素（ inline-block）： img 等，
特点：内容决定大小，不独占一行，可以改宽高。在没有设置宽高时，宽=内部元素的宽，高＝内部元素的高。
注意：图片可以只设置一个宽，高就会等比缩放，也可以只设置一个高，宽就会等比缩放。
注意：
（ 1）不管是行级元素、块级元素还是行级块元素，它的 css 样式默认就有个 display：inline/block/inline-block,他的意思是展示为 xx 级别的元素，所以即使被定义了，也可以通过 display： inline/block/inline-

关注

专栏目录