在编写网页代码时，各种浏览器的兼容性是个必须考虑的问题，有些时候无法找到适合所有浏览器的写法，就只能写根据浏览器种类区别的代码，这时就要用到判断代码了。 1.HTML代码中 经过本人测试，在HTML代码中，区别各种浏览器的代码如下： !-- [if IE 6] 仅支持IE6 ![en...

2018-06-24 01:07:45

移动端布局： rem方案：页面中的任何元素都采用rem布局，包括字体。 1 ! DOCTYPE html 2 html lang ="zh-CN" 3 4 head 5 meta charset ="UTF-8" 6 meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1" 7 meta name ="viewport" content ="width=device-wi...

2018-06-24 01:07:33

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不...

2018-06-24 01:07:31

通过这个我们可以了解 bootstarp 常用的一些知识点。 栅格 .row 在.container 或者 .container-fluid .col-md-* ,.col-lg-*,.col-xs-*,col-sm-* 列的偏移 .col-md-offset-* 可以嵌套，嵌套后再分为12格 排版 h1~h6 small/small .lead 可以让包裹的p段落凸显出来 mark...

2018-06-24 01:07:12

1、兼容性 根据canius（http://caniuse.com/#search=transition），transition兼容性如下图所示： 1 !DOCTYPE html 2 html 3 head 4 style 5 div 6 { 7 width:100px; 8 height:100px; 9 background:blue; 10 transition:width 2s; 11 -moz-transition:width 2s; /* Fir...

2018-06-24 01:07:29

How Browsers Work这篇文章把浏览器的很多细节讲的很细，也有中文的翻译版本，现在转载的这篇是陈皓写的，目的的为了能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。 无论是作为开发，还是作为黑客，企图从Web 端注入 SQL，或是XSS 的时候...

2018-06-24 01:07:20

1、兄弟选择器：同一位置级别，可称为兄弟元素 a、相邻兄弟选择器：next 紧紧跟在【当前元素之后的】(一个)，指定选择器的元素 语法：通过“+”作为结合符 eg: div+p -紧跟在div后面的p元素 1 !-- demo.html -- 2 html 3 head 4 title / title 5 / head 6 body 7 p 这...

2018-06-24 01:07:16

刚开始写这篇文章还是挺纠结的，因为网上搜索从输入url到页面展示到底发生了什么，你可以搜到一大堆的资料。而且面试这道题基本是必考题，二月份面试的时候，虽然知道这个过程发生了什么，不过当面试官一步步追问下去的，很多细节就不太清楚了。 最近刚好也在看http协...

2018-06-24 01:07:10

边界叠加简介 边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。 当一个元素出现在另一个元素上面时，第一个元素的底...

2018-06-24 01:07:05

实现居中的方案有很多，这里介绍下纯CSS使用absolute配合margin的方案。 1. div宽高固定 width: 400px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px; margin-top为-(height / 2)，margin-left为-(width / 2)。当然也...

2018-06-24 01:06:58