css 常用效果

本文介绍了CSS中的flexbox布局,包括`justify-content: space-between`和`space-around`的区别,以及如何实现自动换行。同时,详细讲解了背景渐变的创建方法,如`linear-gradient`,以及如何使用`word-break`和`word-wrap`控制文本换行。此外,还提到了动态计算高度的`calc()`函数的用法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • 等分排列
 display: flex;
 justify-content: space-between;
  space-around  左右 不同item之间都有等分空白 
  space-between 左右贴紧 仅不同Item之间有等分空白
  • 自动换行
    display: flex;
    flex-flow: wrap;
    /*规定自动换行的处理方法 
    break-all	允许在单词内换行。
    keep-all	只能在半角空格或连字符处换行。*/
    word-break: break-all;
    	/*break-word许长单词或 URL 地址换行到下一行*/
    word-wrap:break-word;
    
  • 渐变
     background:  linear-gradient(to bottom, #000000 0%,#ffffff 100%);
    
  • 分块设置背景
    background-image: linear-gradient(to bottom, #72DAF8 390rpx, #f2f2f2FF 0);
    
  • 动态计算高度 calc( 100vh - 64px); 要有空格!!!!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值