前端CSS
OrangeMonsterMM
喜欢前端的狗腿子
展开
-
前端开发之CSS实现块级元素垂直居中(四种方法)
flex布局.div-father { display: flex; justify-content: center;.div-son { align-self: center; }}position方法.div-father { position: relative; .div-son { position: absolute; margin:auto; top: 0;left:0;bottom:0;rig原创 2021-04-27 21:04:07 · 195 阅读 · 0 评论 -
【前端开发之CSS】不同情况的文字垂直居中实现
1. 文字用span标签,当父元素高度一定时,则将文字的line-height设置为父元素高度即可;.header { width: 100%; height: 50px; border: 1px solid #000; .header-span { font-size: 1em; font-weight: bold; line-height: 50px; }}2. 当父元素高度不一定时(用百分比表示的),则原创 2021-04-22 21:10:10 · 238 阅读 · 0 评论 -
【前端开发之CSS布局】用flex布局实现经典布局
实现的功能:用flex布局实现上中下、左中右的经典布局,如图:1. header和footer固定高度,中间的高度由calc(100% - 左高度 - 右高度) 实现;2. 中间left, center,right属于同一层级,且都属于container的子级,其中container采用display: flex; left, right固定宽度,中间宽度同样计算:calc(100% - 左宽度 - 右宽度);<style lang="less" scoped>.compon原创 2021-04-22 20:28:43 · 224 阅读 · 0 评论