元素类型:
元素类型分类:3类(面试)
块元素、行内元素、行内块元素
1、块元素
特点:能够设置宽高,自己独占一行
例如:div、p、h1-h6、ul、ol、dl、dt、dd、form、li
都有display属性,取值为block
2、行内元素
特点:默认横向排列,不支持设置宽高
例如:a、span、b、strong、i、em、u、s、del、sub、sup
都有display属性,取值为inline
注意:行内元素添加内边距、外边距,水平方向上生效,垂直方向上不生效
3、行内块元素
特点:默认横向排列,又可以设置宽高
例如:img、input、textarea(多行文本输入框)、select(下拉框)
都有display属性,取值为inline-block
注意:img标签display取值为inline,是特殊的行内块元素
思考:可以可以将不同的标签进行类型转换?
通过display属性来转换元素类型
display属性
取值:
常用取值:
block-----------------块元素
inline----------------行内元素
inline-block----------行内块元素
none------------------隐藏元素
不常用取值:(了解即可)
list-item----------列表形式
table--------------表格形式
table-row----------表格行
table-cell---------表格单元格
如何将一个元素隐藏?
1、display:none;-----------元素不占位置
2、visibility:hidden;---------元素占位置
3、opacity:0;-----------------元素占位置
取值:
数字0-1,0:表示透明,1:表示不透明
4、height:0;-----------------元素不占位置
5、transform:scale(0)(利用缩放)--------元素占位置
特殊的行内块元素素
img下面三像素留白问题
1、display:block-------改变图片元素类型(本质问题)
2、图片标签基于基线对齐,只要不让图片基线对齐就可以解决这个问题
需要调整图片垂直对其方式
vertical-align:
取值:
top-------顶线对其
middle-------中线对其
baseline-------基线对其(默认值)
bottom-------底线对其
让一张图片在容器中实现垂直居中
1、容器有高
height:200px;
2、容器有行高
line-height:200px;
3、调整图片垂直对齐方式
vertical-align:middle;
思考:如何将一个元素变成块元素?(面试题)
1、display:block
2、给元素添加浮动
float:left/right
3、给元素添加定位
position:absolute(绝对定位)/fixed(固定定位)
4、父子关系中,父元素触发弹性盒子,子元素变成块元素
父元素:display:flex