CSS
文章平均质量分 64
主要记录、学习样式相关内容
不说话,做事
该努力了
展开
-
图片底部空白原因以及解决方法
浏览器渲染 img 时,下方会有一些空白。本文记录自己整理的产生原因以及解决方法。产生原因img 属于 inline 元素,inline 因为受到字号和行间距的影响底部留出了一段距离,距离与字体大小有关。图解:也有大佬这样解释:唯一疑惑可能因为他说了句“img和其他元素并列的时候这句”,但是我只写了一个img也有这个空白(我是不是转牛角尖了...)解决方法给父元素加 font-size: 0px (好像只能是 0 px 别的都还会有空白) 给父元素加 line-heigh...原创 2020-11-23 19:12:47 · 1026 阅读 · 0 评论 -
Flex 布局 - 容器属性
Flex 布局,意为“弹性布局”。任何一个容器都可以指定为 Flex 布局,行内元素也可以使用 Flex 布局。注意:设为 Flex 布局后,子元素的 float、clear 和 vertrical-align 属性都将失效。采用 Flex 布局的元素,称为 Flex 容器,简称容器;它的所有子元素自动成为容器成员,称为 Flex 项目,简称项目。容器默认的存在两根轴:水平的主轴和垂直的交叉轴。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴的空间叫做 cro原创 2021-03-03 17:16:07 · 602 阅读 · 1 评论 -
Flex 布局 - 项目属性
order flex-grow flex-shrink flex-basis flex align-selforder 属性order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。.item { order: <int>;}flex-grow 属性flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间也不放大。.item { flex-grow: <number>;}fle...原创 2021-03-03 17:51:20 · 333 阅读 · 1 评论 -
网格布局 - 1
Grid 布局则是将容器划分为“行”和“列”,产生单元格,然后指定项目所在的单元格。可以看作是二维布局。容器和项目采用网格布局的区域,称为“容器”。容器内部采用网格定位的子元素,称为“项目”。<div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div&g原创 2021-03-08 19:43:56 · 301 阅读 · 2 评论