摘要: 一、移动端布局计算 Flex: 采用Flex布局的元素,它的所有子元素自动成为容器成员,可以自动分配空间,适合做移动端开发 rem: 在不同的设备上显示不同的效果,因此适合做移动端开发 二、移动设备常见属性 physical pixel: 物理像素值(屏幕分辨率) device-independen 阅读全文
posted @ 2019-07-03 23:48 Leophen 阅读(294) 评论(0) 推荐(0) 编辑
摘要: 一、CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms 阅读全文
posted @ 2019-07-03 23:18 Leophen 阅读(682) 评论(0) 推荐(0) 编辑
摘要: 一、2D转换 translate(npx,npx) 相对当前元素位置移动 /* 实现div向左移动50个像素,并向下移动100个像素 */ div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* 阅读全文
posted @ 2019-07-03 19:38 Leophen 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 一、CSS3 背景图像区域 background-clip(指定背景绘制区域) ackground-clip: border-box / padding-box / content-box; /*没有padding的时候,content-box和padding-box效果一样*/ 兼容性:IE9+、 阅读全文
posted @ 2019-07-03 14:59 Leophen 阅读(399) 评论(0) 推荐(0) 编辑
摘要: 1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性,这个属性允许你为元素添加圆角边框!语法:border-radius: 1-4 length|% / 1-4 length|%;兼容性:IE9+、FireFox4+、Chrome 阅读全文
posted @ 2019-07-03 14:50 Leophen 阅读(284) 评论(0) 推荐(0) 编辑
摘要: 一、CSS3 换行 1、word-break(规定自动换行的处理方法) word-break: normal / break-all / keep-all; /* normal:使用浏览器默认的换行规则 break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行 */ 兼容 阅读全文
posted @ 2019-07-03 14:47 Leophen 阅读(284) 评论(0) 推荐(0) 编辑
摘要: 一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器 概念:相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个 阅读全文
posted @ 2019-07-03 14:41 Leophen 阅读(1414) 评论(1) 推荐(0) 编辑
摘要: 一、HTML5表单的特点: 二、HTML5新增的控件类型: 要求输入格式正确的 email 地址,否则浏览器不允许提交,同时会提示错误信息 要求输入格式正确的数字 显示一个可拖动的滑块条,通过设定 max/min/step 值限定拖动范围,拖动时会反馈给value一个值 输入一个搜索关键字,通过 r 阅读全文
posted @ 2019-07-03 13:42 Leophen 阅读(1676) 评论(0) 推荐(0) 编辑
摘要: 一、关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二、HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 <nav> 标记定义导航链接 <section> 标记定义一个区域 <aside> 标记定义页面内容部分的侧边栏 < 阅读全文
posted @ 2019-07-03 11:52 Leophen 阅读(414) 评论(0) 推荐(0) 编辑