- 博客(7)
- 收藏
- 关注
转载 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关注的人