![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css布局技巧
文章平均质量分 53
Americadk
这个作者很懒,什么都没留下…
展开
-
CSS弹性盒子
一、弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 引入弹性盒布局模型的目的:是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 配空白空间 兼容性: IE11+及标准浏览器最新版是支持的 1、设置弹性盒子 任何容器都可以指定为一个弹性盒子 display: flex; display: inline-flex; 以上两条属性需要加给容器 以上两条属性需要加给容器 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 设为Flex布局以后,子元素的原创 2021-01-09 18:33:10 · 2725 阅读 · 0 评论 -
CSS3多列布局和过渡效果
CSS3多列布局和过渡效果 1、column-count属性 定义栏目的数量 column-count:number | auto number 指定栏目的数量 auto 自动,如果设为auto,需要配合其他属性使用实现多列效 2、column-width属性 定义每一个栏目的宽 column-width: length | auto length 指定每一栏的具体宽度 auto 自动 3、column-gap属性 指定列与列之间的间隔距离 colum原创 2020-12-31 16:41:35 · 145 阅读 · 1 评论 -
css布局技巧
** css布局技巧* 一、浮动与定位的对比 脱离正常文档流的属性:浮动:左浮动和右浮动 定位:固定定位和绝对定位 不同的地方: 浮动会脱离正常文档流,但是不脱离文本流 定位既脱离正常文档流,也脱离文本流 注意: 设置了定位和浮动的元素不再区分块级元素、行级元素,都可以设置宽高和所有盒模型属性 所有元素都可以设置浮动和定位 二、verticial-align属性 设置垂直对齐方式,用在行级元素或者行块级元素身上,对于块级元素不生效 常用属性值: baseline 基线对齐(默认值) top原创 2020-12-25 15:10:21 · 135 阅读 · 3 评论