布局：盒模型 box-sizing : border-box ;
摘要：
理解 box-sizing 布局方便的应用 阅读全文
posted @ 2019-08-23 11:40 九涅 阅读(148) 评论(0) 推荐(0) 编辑
object-fit : cover; 对象（图片和视频对象）
摘要：
object-fit : cover / contain / fill / none / scale-down ; // 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-position: center center / 50% 50% ； // 指定可替换元素的内容， 阅读全文
posted @ 2019-08-23 11:22 九涅 阅读(1021) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_实践02
摘要：
H5标准页面 .site{ margin:0; padding:0; display:-webkit-flex; display:flex; min-height:100vh; } .c... 阅读全文
posted @ 2019-08-13 09:27 九涅 阅读(152) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_固定底部、居中
摘要：
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。 阅读全文
posted @ 2019-08-12 17:27 九涅 阅读(5569) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_悬挂式布局
摘要：
有时，主栏的左侧或右侧，需要添加一个图片栏。 阅读全文
posted @ 2019-08-12 16:35 九涅 阅读(599) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_表单布局
摘要：
输入框布局：我们常常需要在输入框的前方添加提示，后方添加按钮。 阅读全文
posted @ 2019-08-12 16:21 九涅 阅读(814) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_圣杯布局
摘要：
圣杯布局：Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 如果是小屏幕，躯干的三栏自动变为垂直叠加。 阅读全文
posted @ 2019-08-12 16:11 九涅 阅读(537) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_百分比
摘要：
百分比布局：某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。 阅读全文
posted @ 2019-08-12 16:10 九涅 阅读(5511) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_等分
摘要：
等分：平均分布。在容器里面平均分配空间，需要设置项目的自动缩放。 阅读全文
posted @ 2019-08-12 15:19 九涅 阅读(6658) 评论(0) 推荐(0) 编辑
CSS单位
摘要：
1.数字与单位之间不能出现空格。 2.如果长度值为 0，则可以省略单位。 3.对于一些 CSS 属性，长度可以是负数。 有两种类型的长度单位：相对和绝对。 CSS单位 绝对长度单位：in 相对长度单位：em / rem / vh / vw html,body{margin:0; padding:0; 阅读全文
posted @ 2019-08-12 15:17 九涅 阅读(333) 评论(0) 推荐(0) 编辑
marquee标签--跑马灯
摘要：
该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果该标签是个容器标签语法： <marquee></marquee> 以下是一个最简单的例子： 代码如下: <marquee><font>Hello, 阅读全文
posted @ 2019-08-12 14:10 九涅 阅读(224) 评论(0) 推荐(0) 编辑
布局：flex弹性布局_实践01
摘要：
H5标准页面 1 H5标准页面 1 2 section{ position:absolute; height:... 阅读全文
posted @ 2019-08-09 17:22 九涅 阅读(186) 评论(0) 推荐(0) 编辑
布局：position:absolute;
摘要：
1 2 3 4 body{margin:0;padding:0;} .childDiv{ background-color:pink; height:100%; width:100%; position:absolute; } .box{background-color:purple;height:20... 阅读全文
posted @ 2019-08-08 17:33 九涅 阅读(170) 评论(0) 推荐(0) 编辑
布局：flex弹性布局
摘要：
flex弹性布局 flex弹性布局的属性语法及其细节 flex实例 flex在线测试 flex博文 阅读全文
posted @ 2019-07-27 12:15 九涅 阅读(151) 评论(0) 推荐(0) 编辑
去水印-适用于底图为白色且大量重复水印的情况
摘要：
1. 创建 选区 2. shift+F5 “填充” 内容-内容识别 不透明度：100% 阅读全文
posted @ 2019-07-01 08:49 九涅 阅读(621) 评论(0) 推荐(0) 编辑
文字仅显示两行
摘要：
span{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; height:3rem; /*如果不加高度，Firefox 会 阅读全文
posted @ 2019-06-20 14:58 九涅 阅读(648) 评论(0) 推荐(0) 编辑
iPhone4、iPhone5、iPhone6和iPhone6+的CSS3媒体查询
摘要：
1 @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 2 /*iPhone 6 Portrait*/ 3 } 4 5 @media 阅读全文
posted @ 2019-06-11 14:50 九涅 阅读(682) 评论(0) 推荐(0) 编辑
