- 博客(3)
- 收藏
- 关注
原创 CSS弹性盒子
一、弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 引入弹性盒布局模型的目的:是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 配空白空间 兼容性: IE11+及标准浏览器最新版是支持的 1、设置弹性盒子 任何容器都可以指定为一个弹性盒子 display: flex; display: inline-flex; 以上两条属性需要加给容器 以上两条属性需要加给容器 注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 设为Flex布局以后,子元素的
2021-01-09 18:33:10
2776
原创 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
173
1
原创 css布局技巧
** css布局技巧* 一、浮动与定位的对比 脱离正常文档流的属性:浮动:左浮动和右浮动 定位:固定定位和绝对定位 不同的地方: 浮动会脱离正常文档流,但是不脱离文本流 定位既脱离正常文档流,也脱离文本流 注意: 设置了定位和浮动的元素不再区分块级元素、行级元素,都可以设置宽高和所有盒模型属性 所有元素都可以设置浮动和定位 二、verticial-align属性 设置垂直对齐方式,用在行级元素或者行块级元素身上,对于块级元素不生效 常用属性值: baseline 基线对齐(默认值) top
2020-12-25 15:10:21
201
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人