5.9随笔

时间 2020-06-22

标签 5.9 随笔繁體版

原文原文链接

margin的属性css

margin: 包括margin-top、margin-right、margin-bottom、margin-left，控制块级元素之间的距离，它们是透明不可见的。根据上、右、下、左的顺时针规则，能够写为 margin: 40px 40px 40px 40px;
html

当上下、左右margin值分别一致, 可简写为:margin：40px 40px;前端

双标签于单标签chrome

双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>

单标签：
<br><hr><img><input><param><meta><link>

相对长度的em怎么用浏览器

em：即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法相似百分比，如：0.8em, 1.2em,2em等。一般1em=16px。，通常用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。安全

在一个页面上给定了一个父元素的字体大小,这样就能够经过调整一个元素来成比例的改变全部元素大小.它能够自由缩放,好比用来制做可伸缩的样式表。服务器

浏览器的默认字体高都是16px，因此未经调整的浏览器在显示1em=16px，也就是说1px=0.0625em。为了简化font-size的换算，能够在css中的body中先全局声明font-size=62.5%，也就是定义了默认字体大小为16px*0.625=10px,子元素会继承父级元素的字体大小，因而1em=10px，因此12px=1.2em。布局

浏览器的不一样兼容性post

所谓的浏览器兼容性问题，是指由于不一样的浏览器对同一段代码有不一样的解析，形成页面显示效果不统一的状况。在大多数状况下，咱们的需求是，不管用户用什么浏览器来查看咱们的网站或者登录咱们的系统，都应该是统一的显示效果。因此浏览器的兼容性问题是前端开发人员常常会碰到和必需要解决的问题。学习

在学习浏览器兼容性以前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，能够说是精确到1px的，他们很容易就会发现设计图的不足，而且在不多的状况下会碰到浏览器的兼容性问题，而这些问题每每都死浏览器的bug，而且他们制做的页面后期易维护，代码重用问题少，能够说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，不少细枝末节差距很大，不如间距，行高，图片位置等等常常会差几px。某种效果的实现也是反复调试获得，具体为何出现这种效果还模模糊糊，总体布局十分脆弱。稍有改动就乱七八糟。代码为何这么写还不知因此然。这类开发人员每每常常为兼容性问题所困。修改好了这个浏览器又乱了另外一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不该该归咎于浏览器，而是他们的技术自己了。

文章主要针对的是第一类，严谨型的开发人员，所以这里主要从浏览器解析差别的角度来分析兼容性问题。

浏览器兼容问题一：不一样浏览器的标签默认的外补丁和内补丁不一样

问题症状：随便写几个标签，不加样式控制的状况下，各自的margin 和padding差别较大。

碰到频率:100%

解决方案：CSS里 *{margin:0;padding:0;}

备注：这个是最多见的也是最易解决的一个浏览器兼容性问题，几乎全部的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最多见的浏览器兼容问题）

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

备注：咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题。

浏览器兼容问题三：设置较小高度标签（通常小于10px），在IE6，IE7，遨游中高度超出本身设置高度

问题症状：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度

碰到频率：60%

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距

碰到概率：20%

解决方案：在display:block;后面加入display:inline;display:table;

备注：行内属性标签，为了设置宽高，咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。

浏览器兼容问题五：图片默认有间距

问题症状：几个img标签放在一块儿的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起做用。

碰到概率：20%

解决方案：使用float属性为img布局

备注：由于img标签是行内属性标签，因此只要不超出容器宽度，img标签都会排在一行里，可是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（个人一个学生使用负margin，虽然能解决，但负margin自己就是容易引发浏览器兼容问题的用法，因此我禁止他们使用）

浏览器兼容问题六：标签最低高度设置min-height不兼容

问题症状：由于min-height自己就是一个不兼容的CSS属性，因此设置min-height时不能很好的被各个浏览器兼容

碰到概率：5%

解决方案：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

备注：在B/S系统前端开时，有不少状况下咱们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候咱们就会面临这个兼容性问题。

浏览器兼容问题七：透明度的兼容CSS设置

作兼容页面的方法是：每写一小段代码（布局中的一行或者一块）咱们都要在不一样的浏览器中看是否兼容，固然熟练到必定的程度就没这么麻烦了。建议常常会碰到兼容性问题的新手使用。不少兼容性问题都是由于浏览器对标签的默认属性解析不一样形成的，只要咱们稍加设置都能轻松地解决这些兼容问题。若是咱们熟悉标签的默认属性的话，就能很好的理解为何会出现兼容问题以及怎么去解决这些兼容问题。

/* CSS hack*/

我不多使用hacker的，多是我的习惯吧，我不喜欢写的代码IE不兼容，而后用hack来解决。不过hacker仍是很是好用的。使用hacker我能够把浏览器分为3类：IE6 ；IE7和遨游；其余（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线_ 和星号 *

◆IE7 遨游认识的hacker是星号 *

好比这样一个CSS设置：

height:300px;*height:200px;_height:100px;

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt，因此当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,因此他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是同样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，由于它们不认识_height。因此它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;因此他们会把高度解析为300px。由于优先级相同且想冲突的属性设置后一个会覆盖掉前一个，因此书写的次序是很重要的。

post.get的区别

一、Get是用来从服务器上得到数据，而Post是用来向服务器上传递数据。
二、 Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，而且二者使用“?”链接，而各个变量之间使用 “&”链接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
三、 Get是不安全的，由于在传输过程，数据被放在请求的URL中，而现在现有的不少服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，而后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也能够在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。 Post的全部操做对用户来讲都是不可见的。
四、Get传输的数据量小，这主要是由于受URL长度限制；而Post能够传输大量的数据，因此在上传文件只能使用Post（固然还有一个缘由，将在后面的提到）。
五、Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
六、Get是Form的默认方法。

http协议的传输方式

HTTP是超文本传输协议，是客户端浏览器或其余程序与Web服务器之间的应用层通讯协议。在Internet上的Web服务器上存放的都是超文本信息，客户机须要经过HTTP协议传输所要访问的超文本信息。HTTP包含命令和传输信息，不只可用于Web访问，也能够用于其余因特网/内联网应用系统之间的通讯，从而实现各种应用资源超媒体访问的集成。

协议基础

HTTP(HyperText Transfer Protocol)是超文本转移协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容请参考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的相似于MIME的消息结构。服务器以一个状态行做为响应，相应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。一般HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行，一个或者多个头域，一个指示头域结束的空行和可选的消息体组成。HTTP的头域包括通用头，请求头，响应头和实体头四个部分。每一个头域由一个域名，冒号(:)和域值三部分组成。域名是大小写无关的，域值前能够添加任何数量的空格符，头域能够被扩展为多行，在每行开始处，使用至少一个空格或制表符。