前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3第五天

CSS3第五天

作者头像
py3study
发布2020-01-15 01:47:29
3230
发布2020-01-15 01:47:29
举报
文章被收录于专栏:python3python3

十一、伸缩布局:控制元素对齐方式 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右,侧轴默认从上到下 主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

CSS3第五天
CSS3第五天

1、必要元素: a、指定一个盒子为伸缩盒子 display: flex(父元素) b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction c、明确主侧轴及方向 2、各属性详解 a、flex-direction调整主轴方向(默认为水平方向) row、column、row-reverse行倒序排列、column-reverse列倒序排列 b、justify-content调整主轴对齐 flex-start、flex-end、center、space-between、 space-around c、align-items调整侧轴对齐 flex-start、flex-end、center、flex-stretch、space-between、 space-around d、flex-wrap控制是否换行 nowrap、wrap e、align-content堆栈(由flex-wrap:wrap产生的独立行)对齐 flex-start 、flex-end、center space-around 行平均分布、space-between 两端对齐、space-streach 拉伸对齐 f、flex-flow是flex-direction、flex-wrap的简写形式 g、flex控制子元素的缩放比例,分配的是剩余空间(独立属性) h、order控制子元素的排列顺序 十二、多列布局 -webkit-columns-width 定义每列的宽度 -webkit-count 定义列数 -webkit-column-gap 定义两栏之间的间距uii 属性:length 长度 = column-rule-length style 样式 = column-rule-style color 颜色 = column-rule-color -webkit-column-rule 设置列之间的分割线 -webkit-column-span 定义跨列显示 默认1,all 横跨所有列 -webkit-column-fill 定义列的高度是否统一,auto,balance 统一设置成内容最多的那一列的高度 十三、web字体 @font-face 指定自定义字体 font-family 给自定义字体起名字 src : url () 引入字体文件 十四、兼容性 通过http://caniuse.com/ 可查询Cascading Style Sheets Level 3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理Cascading Style Sheets Level 3的兼容性问题。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-06-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档