六、元素显示三大模式

·  阅读 70
六、元素显示三大模式

六、元素显示三大模式

1.行内元素:

属性:display:inline

显示特点:

①行内元素只能容纳文本或者其他行内元素。

②宽度只与内容有关。

③和其他元素都在一行上显示。

④高,行高及外边距和内边距部分可改变。

(多个元素可以在一行显示,不会自动换行,宽高自动。与其他行内元素并排,不能设置宽高,默认的宽度就是文字的宽度。)

img

2.块级元素:

属性:display:block

显示特点:

①高度,行高以及外边距和内边距都可控制。

②总是在新行上开始,占据一整行。

③它可以容纳内联元素和其他块元素。

④宽度始终是与浏览器宽度一样,与内容无关。

(霸占一行,不能与其他任何元素并列。能设置宽高,如果不设置宽度,那么宽度将默认变为父级的100%。)

块级元素有哪些:

img

3.两者的区别

1.行内元素与块级元素直观上的区别。

行内元素会在一条直线上排列,都是同一行的,水平方向排列。

块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上。

行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。

4.行内块元素

属性:display:inline-block

显示特点:

1.一行可以显示多个;

2.可以设置宽高。

行内块元素有哪些:

input、textarea、button、select......

特殊情况:img标签有行内块元素特点,但是却是行内元素。

5.html嵌套规范注意点

1.块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等… 但是: p 标签中不要嵌套 div 、 p 、 h 等块级元素

2.a标签内部可以嵌套任意元素

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改