一、单位元素
vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边
rem 等比缩放
需要设置最外层盒子html设置vw根字号html的--- font-- 1vm 去适配
初始化
//初始化 *{padding: 0;margin: 0} //清除列表符号 ul{list-style: none} //清除超链接下划线 a{text-decoration: none} //清除图片默认间隙 img{display: block} //设置根字号 html{ //图片大小 background-size: 7.5rem;
边框距离
margin 外外边距border 主体盒子padding 内边距 可以调整容器的内边距来调整里面元素的距离
圆角边框
border-radius: .15rem;border-radius: 0 0 0 0;
边框阴影(可以用来绘制上划线)
rgba 相比rgb多了透明度
上下偏移 左右偏移 偏移半径 颜色 box-shadow: 40px 0px 10px rgba(0,0,0,.4);
文本阴影
text-shadow 0 0 0 0;
元素溢出隐藏(防止元素溢出父盒子)
overflow: hidden;
给容器添加背景
// 图片地址 //平铺方式 位置 background: url("../static/111.jpg") no-repeat top; //背景图片大小 background-size: 7.5rem 7.5rem; // png图片颜色 background-color: #9a6e3a;
给容器加上滚动条
overflow:visibleoverflow:auto (当前容器 有flex: 1;使用)
元素定位
绝对定位(相对于设置了position:relative 父盒子)position:absolute;（需要父盒子设置position:relative ）通过right和top等调整距离(本质是设置border)
容器画线
给容器顶部画线（可以使用阴影实现，更自然）
border-top-style: solid; (画直线)
border-width:1px; (直线宽度)
border-color: #23221b; (线颜色)
容器内部文字
文字行高 (文字上下间隔)
line-hight :20px
颜色渐变(设置盒子背景颜色)
background: linear-gradient(45deg, #fa5c56, #fd625c);
元素流式布局（淘宝）
容器设置
column-gap: 1px; //列的间隔
column-count: 2; //列的个数
(容器可以设置flex:1 让它自动变换大小)
元素设置
break-inside: avoid; (防止卡片被边框截断)
width:310rpx; (卡片宽高要设置)
height: 428rpx;
border-style: outset;(边框样式，可以不设置)
注意点:（1）在使用弹性容器要设置父级容器的大小
（2）在设置弹性容器应该初始化 html和bode大小 为 hight为100%
（3）弹性元素不扩展可能是被父级容器限制了大小
三、项目实战效果
仿造携程旅游
仿淘宝
仿QQ
到此这篇关于CSS弹性布局常用设置方式的文章就介绍到这了,更多相关CSS弹性布局内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！