发表于： 2021-07-29 20:32:30
2 1904
今天完成的事情：发现不足，总结问题；
明天计划的事情：写页面，弥补不足！！加油! 加油！！
遇到的问题：JS的函数代码，有点不会写。。遇到问题有点迷
收获：
常见的inline元素、block元素、inline-block元素：
inline： a , span , br , i , em , strong , label , q , var , cite , code
block： p ，div , h1...h6 , ol , ul , dl , table , address , blockquote , form
inline-block： img , input
inline行内元素特点
（1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
（2）元素的高度、宽度及顶部和底部边距不可设置
（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。
block块元素特点
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block行内块元素特点： （代码display:inline-block 可将元素设置为行内块状元素。）
（1）内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
（2）和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
inline和inline-block元素之间的间距问题：
1，font-size:0
2，使用margin负值
3，弹性盒子--给父元素设置弹性盒子
inline-block元素的如何垂直居中：
1，设置上下padding值相等
2，设置line-height
3，弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
inline-block元素插入图片导致元素位置变化：
1，默认是基线对准，设置成顶线对准
2，弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
使用inline-block布局局限性很大，多实用弹性盒子flex，好用且功能强大。
返回列表
评论