- 博客(7)
- 收藏
- 关注
RSS订阅转载 flex布局中，保持内容不超出容器的解决办法
在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。 就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂，不好拿出来说，这里就把问题简化描述如下： 大致是有一个main容器是flex布局，左边一个logo固定宽高，右边content动态宽度。 <div class="main"> <img alt="" c
2021-01-21 10:10:08
1017
转载 清除浮动的方法
转载原文出处链接：https://blog.csdn.net/u012468376/article/details/79458948 浮动让我们既爱又恨恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了). 为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动. 清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的. 正所谓万变不离其宗 有如下代码, 利用各种方法来消除浮动对 div.content的影响
2020-09-28 21:20:49
165
原创 常用的定位position
1.定位的元素往往还需要配合使用left、right、top、button来进行最终位置确认，如果设置值为百分比，则参照‘定位参照物’的宽/高来计算。 2.元素固定定位或绝对定位后，脱离普通文档流，如果和普通文档流有交叉，定位的元素会覆盖普通文档流内容 3.元素固定定位或绝对定位后，不管原来是什么类型的盒子，定位后具有包裹性、设置宽高有效。 4.元素固定定位或绝对定位后，如果宽/高设置百分比，则计算的参照是：定位参照物的宽/高 5.多个元素固定定位或相对定位后，有可能出现盒子相互覆盖（默认后定位的会覆盖前面
2020-09-27 22:51:31
146
原创 弹性布局
任意盒子，设置display属性值为flex，则盒子本身开启弹性布局。 display设为flex的盒子我们称为’弹性容器‘，弹性容器的子元素（孙子不包括）我们称之为’弹性项目‘。关于轴的概念：弹性容器内存在两根轴，分别是主轴和交叉轴，主轴和交叉轴永远是垂直的 css属性名 取值 说明 注意事项 弹性容器 display flex 开启自身弹性布局 开启弹性布局后自身不会有什么变化，，但是其弹性项目无论之前如何布局，盒子怎样摆放，在变为弹性项目后都变得像浮动一样，具有包裹性，可以设
2020-09-27 21:38:36
112
原创 盒子模型
盒子模型的相关css属性及概念 盒子的box-sizing属性 box-sizing取值 称呼及特点 content-box(默认) 标准盒模型 width = content border-box IE盒模型（怪异盒模型）width = border + padding + content 盒子的display属性 |对对对|对对对 |对对对|对对对 | 对对对 | |–|--| | | | ...
2020-09-17 23:22:50
114
原创 css实现自适应正方形
由于padding和margin的百分比是根据父元素的宽度计算的，所以当宽度是100%时，可以通过设置padding-top(bottom)或margin-top(bottom)的百分比挤成任意比例的矩形。下面就拿正方形举例，啥也不说了，上代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .square2-wrap { width: 200px;
2020-09-17 21:40:56
263
空空如也
mysql数据库vip在夜间某个固定时间段会告ping不通的告警
2023-09-18
linux系统里，备份日志每天都有定时清理脚本，但有的删不掉可能的原因是什么
2022-11-15
TA创建的收藏夹 TA关注的收藏夹
TA关注的人