当前位置: 首页 > Web前端 > HTML

【重温基础】块级元素和行内元素

时间:2023-04-02 21:09:59 HTML

最近给自己定了一个小目标,每周复习一个基础知识点,输出一个笔记。看看你能不能坚持下去。^_^块级元素块级元素占据一个独立的空间,具有以下特点:可以设置一行或多行独占的宽度、高度、内外边距,有效宽度默认为父级的100%容器,可以作为其他块级元素和内联元素的父容器(文本块级元素不推荐作为其他块级元素的容器,比如p,h1~h6)。常见的块级元素包括:div、h1~h6、hgroup、p、table、form、ul、ol、hr、header、main、footer、aside、article、section、video、audio、canvas、pre、option内联元素内联元素不占用独立空间,依靠自身内容扩展宽高,与属于同一父容器的其他元素内联元素依次排列在同一行,是否换行根据值决定的空白属性。它们有以下特点:不占一行,但当内容过长时,会根据white-space控制换行。宽度、高度设置无效。内外边距只能设置左右方向(设置padding-top、padding-bottom、margin-top、margin-bottom无效)。但是需要注意一点,padding-top和padding-bottom对自身有性能影响,但不影响周围元素的布局。看图:宽度由自己的内容决定。不推荐将内联元素作为块级元素的容器(标签除外)。常见的内联元素包括:span,i,code,strong,a,br,sub,sup,label对于不确定的元素,可以设置width来test,如果width不生效,说明是内联元素。内联块级元素内联块级元素不会占一行,但是可以设置宽度、高度、内外边距等。常见的内联块级元素有:input、button、img、select、textareaCSS显示转换显示:块;让元素以块级元素的形式出现display:inline;让元素以内联元素的形式出现display:inline-block;让元素表现起来扫描下方小程序代码或搜索土司博客内联块级元素首发链接,第一时间阅读最新文章!