最近给自己定了一个小目标,一周温习一个基础知识点,并输出一篇手记。看自己是否能坚持下去。^_^ 块级元素块级元素占据独立的空间,有以下特点: 常见的块级元素有:div, h1~h6, hgroup, p, table, form, ul, ol, hr, header, main, footer, aside, article, section, video, audio, canvas, pre, option 行内元素行内元素不占据独立空间,依靠自身内容撑开宽高,与同属一个父容器的其他行内元素在同一行上依次排列,根据white-space 属性值来决定是否换行。它们具备以下特征: 不独占一行,但内容过长时会根据white-space 控制换行。 宽度,高度的设置是无效的。内外边距只能设置左右方向(设置padding-top , padding-bottom , margin-top , margin-bottom 是无效的)。但是有一点要注意,padding-top 和padding-bottom 对自身有表现效果,但是不影响周围元素的布局,看图说话: 宽度由自身内容决定。 行内元素不建议作为块级元素的容器(a 标签例外)
常见的行内元素有:span, i, code, strong, a, br, sub, sup, label 对于不确定的元素,可以设置width 来测试下,如果width 不生效,说明是行内元素啦。 行内块级元素行内块级元素也不会独占一行,但是可设置宽高,内外边距等。 常见的行内块级元素有:input, button, img, select, textarea CSS显示转换display: block;让元素表现为块级元素 display: inline;让元素表现为行内元素 display: inline-block;让元素表现为行内块级元素
|