随笔分类 - css
css html 布局
摘要：https://www.cnblogs.com/liangxuru/p/6970629.html 为什么要使用rem 之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。 例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推
阅读全文
摘要：https://www.jianshu.com/p/985d26b40199 该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置） <script>!f
阅读全文
摘要：CSS多行文字垂直居中的两种方法 A-A+ 前端博客•前端开发•css hack | 兼容性 | 垂直居中•22356View2 CSS多行文字垂直居中的两种方法 A-A+ 前端博客•前端开发•css hack | 兼容性 | 垂直居中•22356View2 A-A+ 之前写过一篇关于：CSS左右居
阅读全文
摘要：//制作遮罩层 position: fixed; top:0; left:0; z-index:100; //覆盖底下的内容 width:100%; height:100%; overflow: auto; //当内容超出时，自动出现滚动条 background: rgba(7,17,27,0.8)
阅读全文
摘要：CSS3： 一、transition: <property> <duration> <animation type> <delay> eg： .div{width:10px;} .div:hover{transition:width:100px 2s ease-in-out 1s;}//1s后div
阅读全文
摘要：文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。 设置各对象的vertical-align属性，属性说明： baseline－将支持valign特性的对象的内容与基线对齐 sub－垂直对齐文本的下标 super－垂直对齐文本的
阅读全文
摘要：1、class 样式一般用class，命名：中横线分隔，如：div-logo id 一般用于js快速地区别和获取元素，命名：驼峰命名法，如：divLogo (中间首字母大写) 2、必不可少的图片，用<img>引入； 可有可无的装饰性图片，可用背景嵌入。 3、normalize.css与resets.
阅读全文
摘要：一、兼容性问题的由来：不同的浏览器对同一段代码的解析不同，造成页面解析效果不一样。二、盒模型：IE计算方式：width=content+margin; W3c计算方式：width=content+padding+border+margin默认：box-sizing:content-box(即W3c方
阅读全文
摘要：js兼容性：1、获取滚动条滚动距离scrollTop (原因：chrome不认识document.documentElement.scrollTop)chrome: var top=document.body.scrollTop;IE/firefox: var top=document.docume
阅读全文
摘要：CSS：需要加上宽度(width:100px)、超出隐藏（overflow:hidden;）、强制在同一行显示（white-space: nowrap;）、省略号（text-overflow:ellipsis;）
阅读全文
摘要：一、HTML 代码中的所有连续的空格或空行（换行）都会被显示为一个空格，不管是内容还是标签之间。 二、当我们想让它们在同一行连续显示时，就让所有的代码之间没有空格，也不要换行。 三、当我们想要显示连续空格时，可以使用以下方法： 1、使用<pre> <pre> 这是预格式文本，它保留了 空格 和空行。
阅读全文
摘要：元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流（normal flow）中，也就是说其顺序由元素在文档中的先后位置决定，此时一般不会产生重叠（但指定负边距可能产生重叠）。当我们用css为某个元素指定float浮动或者position定位后，元素的定位将会依情况发生如下改变： 1.
阅读全文
摘要：http://blog.csdn.net/swallowliyan/article/details/50803469
阅读全文
摘要：一、img、input属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。 行内非替换元素，例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和ma
阅读全文
摘要：.clearfix {*zoom:1;_height:1px} 这个是hack写法，用来识别不同版本的IE浏览器。*后面的属性 IE6 IE7能识别，IE8 IE9……都不能识别；"_"后面的属性，只有IE6能识别，其他版本（IE7 8 9 更高级别）都不能识别. http://www.jb51.n
阅读全文
摘要：一、自适应两栏布局 <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>自适应两栏布局</title> <style> body { width: 300px; position: relative; } .a
阅读全文
摘要：一、CSS中zoom:1的作用在做IE6、IE7、IE8浏览器兼容的时候，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：1、触发IE浏览器的haslayout2、解决IE下的浮动，margin重叠等一些问题。 二、z-index:auto|number; ◆auto遵从其父对象的定位
阅读全文
摘要：CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水
阅读全文
摘要：前言 在新闻列表中，有标题和日期，然后分别对齐，这种应用场景非常广泛。而在前端实践中，其也有很多中布局方式。很多前端新手在入门时，可能会稍微有点迷茫。 今天我列举几个常用的布局方法，便于新手学习。 这里只是为了实现功能效果，所以不额外添加美化类的样式。只列出核心参数，详细使用时，请根据自己的情况灵活
阅读全文
摘要：一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的
阅读全文
浙公网安备 33010602011771号