WEB字体,多列布局和伸缩盒
WEB字体
语法
@font-face{font-family:"";src:url() format()...
}
兼容性写法
@font-face {font-family: 'diyfont';src: url('diyfont.eot'); /* IE9+ */src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('diyfont.woff') format('woff'), /* chrome、firefox */url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
字体格式
- ttf
- eot
- woff
- svg
工具
- 有字库 https://www.youziku.com/
- 阿里web字体 http://www.iconfont.cn/webfont/#!/webfont/index
- 字体在线转换 https://www.fontsquirrel.com
字体图标
- 阿里图标
- Font Amsome
多列布局
相关属性
- columns
设置的列数和每列的宽度。复合属性 - column-width 设置每列
- column-count 设置列数宽度
- column-gap 列间隙
- column-rule 列之间的边框线
- column-rule-width
column-rule-coor
- column-rule-style 列与列之间的边框样式
- column-fill none/balance所有列的高度以其中最高的一列统一
column-span 对象元素是否横跨所有列 none/all
- column-break-before 设置项目前面是否断行 auto/always/avoid
- column-break-after 设置项目后面是否断行 auto/always/avoid
column-break-inside 设置项目内部是否断行 auto/avoid
伸缩盒(弹性盒模型)
概念
相关属性
把元素设置为伸缩容器
display:flex;display:inline-flex
设置伸缩流方向(主轴)
flex-direction:row(左对齐)/column(顶对齐)/row-reverse(右对齐从右到左)/column-reverse(底对齐)
设置换行(测轴)
flex-wrap:nowrap(flex容器为单行,flex子项溢出容器)/wrap(多行溢出内容放置到新行,)/wrap-reverse
- 伸缩流方向和换行的复合属性 flex-flow
主轴方向对齐
jusitify-content:flex-start/flex-end/center/space-between/space-around
测轴方向对齐(强)
align-content:strecth/flex-start/flex-end/center/space-between/space-around
测轴方向对齐(弱)
设置给伸缩容器align-items:flex-start/flex-end/center/baseline/stretch设置给伸缩项目align-self:flex-start/flex-end/center/baseline/stretch
- 盒子伸缩和放大 比率
- flex-grow 放大比率
- flex-shrink 收缩比率
flex-basis 基准
转载于:https://www.cnblogs.com/DCL1314/p/7308536.html
WEB字体,多列布局和伸缩盒相关推荐
- Web前端学习笔记09:移动web开发流式布局_flex布局
文章目录 移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 1.2 手机屏幕的现状 1.3移动端调试方法 2.0 视口 2.1 布局视口 layout viewport 2.3理想视口 i ...
- CSS3-多列布局-伸缩盒布局-伸缩项目
多列布局-伸缩盒布局-伸缩项目 1 回顾 1.1 变换 transform ① 相关CSS属性 transform transform-origin transform-style perspecti ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- web前端实战系列[1]——三列布局
1.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
- 1.CSS3 教程-> 多列布局 > image模块 > cssTransition 过渡 > CSS Animations 动画 > Transform二维
CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍 CSS3 是层叠样式表(Cascading Style S ...
- 移动web之四种常用布局
一.流式布局 流式布局,就是百分比布局,也称非固定像素布局. 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充. div {width : 100% } 二.f ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
- 17. 【移动Web开发之flex布局】
文章目录 [移动Web开发之flex布局]前端小抄(17) 一.flex布局体验 1.1 传统布局与flex布局 1.2 初体验 二.flex布局原理 2.1 布局原理 三.flex布局父项常见属性 ...
最新文章
- 《编程之美》读书笔记19: 3.9 重建二叉树
- 李丽娟c语言第四版教师书_来,把自学C语言经历的那些苦,都踩在脚下
- Codeforces Round #506 (Div. 3) - D. Concatenated Multiples(思维)
- android root 挂载分区,adb — adb disable-verity, adb remount 实现重新挂载system分区为可读写分区...
- C++和Rust_后端程序员一定要看的语言大比拼:Java vs. Go vs. Rust
- Azure DevOps 中 Dapr项目自动部署流程实践
- Razor Page–Asp.Net Core 2.0新功能 Razor Page介绍
- 构建安全应用程序架构必须考虑的十二问
- linux上mysql卸数_Linux下MySQL卸载和安装图文教程
- 支持向量机(SVM)-文本分类 (1)
- 走不远的共享滑板车!
- 为什么要使用 SQLite 数据库?
- Git(12)-- Git 分支 - 分支简介
- 闲聊libhybris
- mac:文件编码问题
- 在java中产生随机数_在Java中产生随机数的两个方法
- VMware Fusion 启动物理磁盘及U盘的方法
- 2016年统计用区划代码和城乡划分代码(截止2016年07月31日) 省市县镇+url
- HTML网页设计:二、网页的基本标签
- 那些年京东出现的BUG损失惨重,你还敢瞧不起测试?