HTML的块状、内联、内联块状元素的特点 |
您所在的位置:网站首页 › 行内块元素有哪些特点 › HTML的块状、内联、内联块状元素的特点 |
元素分类及特点: 1.块级元素: 在html中、 、、、 和 就是块级元素。设置display:block就是将元素显示为块级元素。块级元素特点: (1)、每个块级元素都从新的一行开始,并且其后的元素也另起一行;(一个块级元素独占一行) (2)、元素的高度、宽度、行高以及顶和底边距都可设置; (3)、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。 2.内联元素: 在html中,、、、、 、 和就是典型的内联元素(行内元素)(inline)元素。当然块状元素也可 以通过代码display:inline将元素设置为内联元素。内联元素特点: (1)、和其他元素都在一行上; (2)、元素的高度、宽度、行高及顶部和底部边距不可设置; (3)、元素的宽度就是它包含的文字或图片的宽度,不可改变。 注意:为 a 元素设置了宽和高,但都没有起到作用,原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的。 3.内联块状元素: 内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点: (1)、和其他元素都在一行上; (2)、元素的高度、宽度、行高以及顶和底边距都可设置。 注意:img是inline元素,但是他同时也是替换元素,他有着特殊的表现: 1. 可以设置width/height; 2. 默认的,img元素在屏幕占据的空间与其图片的实际像素一致,除非CSS有设置或者自身的width/height HTML 属性有设置; 3. 如果img标签的包裹元素为也为inline元素,则img的边界可以超出其直接父元素的边界,直到自己的宽、高达到最大或者设定值为止,而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是里面包含的; 4. 所以从行为上看,img元素作为替换元素,有着类似于Inline-block的行为,尽管在SPEC里面,他的确是一个inline元素。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |