![](https://img-blog.csdnimg.cn/f0132fffb61e4583867e659eed273dfe.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
css
璐瑶知码li
世上无难事,只怕有心人
展开
-
react+antd Input回车输入生成tag组件
基于react+antd Input回车输入生成tag标签组件原创 2022-03-03 14:26:27 · 1791 阅读 · 0 评论 -
常见的移动端布局
1. 宽度自适应布局宽度采取百分比,高度固定,弊端:大屏下,元素宽度拉伸,易变形2. rem布局设置页面的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> js动态计算并设置html的font-size值 按照pc布局方式正常布局,把px换成rem3. vw+rem布局css3规范中的.原创 2022-01-22 14:54:19 · 275 阅读 · 0 评论 -
css文本溢出出现省略号
1. 单行文本.box{ width:200px; /*具体宽*/ overflow:hidden; /*溢出隐藏*/ text-overflow:ellipsis; /*文本溢出显示省略号*/ white-space:nowrap; //文本不换行}2. 多行文本/*1*/.box{ width:200px; overflow:hidden; text-overflow:ellipsis; display:-webk原创 2022-01-21 23:35:58 · 368 阅读 · 0 评论 -
多栏布局方案
1. 两栏布局两栏布局:左侧固定,右侧自适应 方案一: 左右两个盒子,左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation,加padding-left:左侧盒子宽 方案二: 左右两个盒子,左侧固定宽度 左侧盒子设置position:absolute 父元素设置position:relation,右侧盒子加margin-left:左侧盒子宽 方案三: 左右两个盒子,左侧固定宽度 父元素di原创 2022-01-21 23:15:21 · 560 阅读 · 0 评论 -
css外边距塌陷
1. 父子关系的外边距塌陷原因:父子元素共用一个外边距,给子元素加margin-top时,外边距会作用在父元素身上,取父子外边距的最大值解决:给父元素加padding值 给父元素加border值 给父元素加overflow:hidden(触发BFC) float:left position:absolute2. 兄弟关系的外边距塌陷原因:兄弟元素共用一个外边距,取他们之间最大的margin值解决:给任意一子元素加一个父元素,给父元素加overflow:hidden/sroll/原创 2022-01-18 23:06:34 · 96 阅读 · 0 评论 -
css宽度变化动画
transition 属性设置元素当过渡效果,四个简写属性为:transition-property transition-duration transition-timing-function transition-delay注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。默认值: all 0 ease 0 继承: no 版本: CSS3 JavaScript 语法: object.sty原创 2022-01-07 16:14:24 · 5460 阅读 · 0 评论 -
css水平垂直居中
文本水平垂直居中div{ text-align: center; line-height: height;}元素水平垂直居中1. flex布局.parent { display: flex; justify-content: center; align-items: center;}2. absolute+负margin(子元素宽高明确).parent { width: 100%; height: 100%; position:原创 2022-01-18 16:14:11 · 155 阅读 · 0 评论