900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 块元素 行内元素 行内块元素区别及其作用

块元素 行内元素 行内块元素区别及其作用

时间:2023-04-22 06:05:48

相关推荐

块元素 行内元素 行内块元素区别及其作用

块元素

块级元素独占一行,默认会新起一行,如:div、p、h1

根据这个特性可以实现盒子水平居中margin: 0 auto;

原理 : 块级元素独占一行设置大小后水平方向会剩余空间,设置auto左右会自动分配剩余空间

行内元素(内联元素)

常用的行内元素有a、span、strong、b、em、label

紧跟着前面元素的后面显示,不会换行

宽,高设置无效;只能显示元素内容自身所占的区域大小

内外边距margin,padding:只能设置左右边距才有效

行内块元素

常见的行内块元素有img、button、input、select、textarea

行内块元素不独占一行,其他特性和块元素完全一样

注意点

行内元素脱离文档流后,会变成块元素

a{width: 100px; /*宽度有效*/float: left;}

display属性可以将三种元素进行相互转换,从而设置需要的样式

block 是块级元素,inline 是行内元素,inline-block是行内块元素

不积跬步无以至千里** 📒查漏补缺,知识梳理 ** ⭐⭐

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。