块元素
块级元素独占一行,默认会新起一行,如: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是行内块元素
不积跬步无以至千里** 📒查漏补缺,知识梳理 ** ⭐⭐