css的那些元素

梳理一下哪些元素,不过想想就乱,还是直接下定义: 块元素: 块元素是 display 属性值为 block 的元素。看看MDN里是怎么解释的,块级元素会占据其父元素(容器)的整个空间,因此创建了一个“块”。默认情况下,块级元素会新起一行。 常见的块元素:div h1-h6标题 form(只能用来容纳其他块元素) hr p table ul(无序列表) ol(排序列表)

行内元素 行内元素是display属性值为inline-block的元素。一个行内元素只占据它对应标签的边框所包含的空间。注意这个inline element的中文叫法有很多种,比如内联元素、内嵌元素、行内元素,别被绕晕了,他们都是一个东西。 常见的行内元素:a br code dfn em i img input 行内元素没法设置高度宽度,但是如果想让一个元素可以设置宽度高度,又让它以行内形式显示,我们可以设置display的值为inline-block。 但是你又该问了,你说img是行内元素,没法设置高度宽度,这显然不对啊,确实,因为img还是替换元素。

可替换元素(置换元素) 这又是啥,听起来好厉害,还是找MDN吧: CSS 里,可替换元素是这样一些元素, 其展现不是由CSS来控制的。这些外部元素的展现不依赖于CSS规范。 典型的可替换元素有 <img>、 <object>、 <video> 以及<textarea>、<input> 这样的表单元素。 一些元素,比如 <audio> 和 <canvas> ,只在一些特殊情况下是可替换元素。 使用了 CSS content 属性插入的对象被称作匿名的可替换元素。 CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和处理值为 auto 的情况。

这是啥,还是没看懂好吗,一句话来总结一下吧: 可替换元素有自己固有的宽高或者宽高比,当你设置宽高为auto,会默认使用固有宽高,或者对于img,设置宽度后会根据图片固有宽高比自动调整。

Licensed under CC BY-NC-SA 4.0