随笔分类 -  css

css与布局
已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形
摘要：在编写小程序中，img有多个属性可以自动进行图片大小调整，当时一直在想，如果普通的css中也有一个属性多好 这里终于找到有一个关键的css属性，就是object-fit: cover;，效果类似背景图片的background-size: cover;属性 <style> .box { width: 阅读全文
posted @ 2020-09-20 18:40 爱代码三千 阅读(493) 评论(0) 推荐(0)
新增column属性及瀑布流布局
摘要：column列布局 新增的column属性用来进行多列布局。注意新增属性需要些兼容前缀，如-moz-和-webkit- ，最大兼容到IE10 column-count 把当前div中的文本/元素划分为三列 -moz-column-count:3; /* Firefox */ -webkit-colu 阅读全文
posted @ 2020-09-20 18:32 爱代码三千 阅读(307) 评论(0) 推荐(0)
Flex布局
摘要：Flex布局 在flex中，没有x和y轴，这里称之为主轴和交叉轴 应用在flex container 上的css属性 flex-flow 缩写属性 ⇒ flex-direction || flex-wrap flex-direction 决定flex-item排序方向 flex-wrap 决定fle 阅读全文
posted @ 2020-08-26 15:29 爱代码三千 阅读(142) 评论(0) 推荐(0)
布局中常用的单位的优缺点
摘要：布局中常用的单位，比如px、%、rem和vw等在响应式布局中的优缺点。 这里是看文章后总结的一些点，具体可查看原文 首先我们要知道什么是像素： css像素：为web开发者提供，在css中使用的一个抽象单位 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的 px的优缺点 px看似是固定值 阅读全文
posted @ 2020-08-26 15:26 爱代码三千 阅读(1147) 评论(0) 推荐(1)
使用flex和box之中央布局
摘要：flex中间布局 display:flex配合flex wrap:wrap更适合做自适应模型 做中间布局的话注意在里面加一层div box中间布局 仅仅是中央布局的话推荐box方法，注意前面加 webkit 阅读全文
posted @ 2020-03-05 20:06 爱代码三千 阅读(165) 评论(0) 推荐(0)
双飞翼布局与圣杯布局
摘要：经典布局案例 双飞翼布局 一般用于三栏布局,左右两栏相等,等比例缩放 圣杯布局 一般用于三栏布局,左右不相等,中间等比例缩放 阅读全文
posted @ 2020-03-05 19:52 爱代码三千 阅读(196) 评论(0) 推荐(0)