![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端CSS
文章平均质量分 62
南西Nancy
跋山涉水,千帆阅尽,愿我们都能与更好的自己相遇
展开
-
flex布局中,保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂,不好拿出来说,这里就把问题简化描述如下:大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度。<div class="main"> <img alt="" c转载 2021-01-21 10:10:08 · 1020 阅读 · 0 评论 -
清除浮动的方法
转载原文出处链接:https://blog.csdn.net/u012468376/article/details/79458948浮动让我们既爱又恨恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了). 为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动. 清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的. 正所谓万变不离其宗 有如下代码, 利用各种方法来消除浮动对 div.content的影响转载 2020-09-28 21:20:49 · 165 阅读 · 0 评论 -
常用的定位position
1.定位的元素往往还需要配合使用left、right、top、button来进行最终位置确认,如果设置值为百分比,则参照‘定位参照物’的宽/高来计算。2.元素固定定位或绝对定位后,脱离普通文档流,如果和普通文档流有交叉,定位的元素会覆盖普通文档流内容3.元素固定定位或绝对定位后,不管原来是什么类型的盒子,定位后具有包裹性、设置宽高有效。4.元素固定定位或绝对定位后,如果宽/高设置百分比,则计算的参照是:定位参照物的宽/高5.多个元素固定定位或相对定位后,有可能出现盒子相互覆盖(默认后定位的会覆盖前面原创 2020-09-27 22:51:31 · 147 阅读 · 0 评论 -
弹性布局
任意盒子,设置display属性值为flex,则盒子本身开启弹性布局。display设为flex的盒子我们称为’弹性容器‘,弹性容器的子元素(孙子不包括)我们称之为’弹性项目‘。关于轴的概念:弹性容器内存在两根轴,分别是主轴和交叉轴,主轴和交叉轴永远是垂直的css属性名取值说明注意事项弹性容器displayflex开启自身弹性布局开启弹性布局后自身不会有什么变化,,但是其弹性项目无论之前如何布局,盒子怎样摆放,在变为弹性项目后都变得像浮动一样,具有包裹性,可以设原创 2020-09-27 21:38:36 · 112 阅读 · 0 评论 -
盒子模型
盒子模型的相关css属性及概念盒子的box-sizing属性box-sizing取值称呼及特点content-box(默认)标准盒模型 width = contentborder-boxIE盒模型(怪异盒模型)width = border + padding + content盒子的display属性|对对对|对对对 |对对对|对对对 | 对对对 ||–|--|| | |...原创 2020-09-17 23:22:50 · 114 阅读 · 0 评论 -
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 · 264 阅读 · 0 评论