201809整理css内容

给浏览器标题添加图标:制作一个ico格式的图片:favicon.ico,之后在页面中添加
标题栏：

<link rel="icon" href="ico地址" type="image/x-icon">

收藏夹：

<link rel="shortcut icon" href="ico地址" type="image/x-icon">

1、 不同浏览器的标签默认的内外补丁不同

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

2、设置较小的高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

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

3、图片默认有间距

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

4、IE6双边距bug: 块属性标签添加了浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。其实这种问题主要就是会把某些元素挤到了第二行

解决的方式有两个：
	1.给float元素添加display：inline 即可正常显示
	2.就是hack处理了，对IE6进行 _margin-left:5px;

5、chrome下默认会将小于12px的文本强制按照12px来解析。

解决办法是给其添加属性：-webkit-text-size-adjust: none; 

6、背景色和背景图的共存

解决办法：		

1.background:#fff url("../images/xx.jpg") no-repeat;
2.background-color:#fff;background-image: url("../images/xx.jpg") no-repeat;

7、多个Img标签之间有间隙

	1.多个标签写在一行（主要是避免标签之间的空格）

<img src="xx.jpg"/><img src="xx.jpg"/>

	2.将要闭合标签的地方与开始标签的地方重合(和方法一同样道理)

<img src="xx.jpg" 
/><img src="xx.jpg"/>

	3.使用注释头尾相连(和方法一同样道理)

<img src="xx.jpg" /><!--
--><img src="xx.jpg"/>

	4.在img标签的父级上写：font-size:0;(适用于父级元素中不存在文字，否则文字会受影响)

<div style="font-size:0;">
	<img src="xx.jpg"/>
	<img src="xx.jpg"/>
</div>

	5.使用display：block(我最常用的方法，img是内联元素)

<img style="display:block;" src="xx.jpg"/>
<img style="display:block;" src="xx.jpg"/>

	6.使用letter-spacing属性(letter-spacing的值无论是负多少都不会产生重叠)

<div style="letter-spacing:-200px;">
	<img src="xx.jpg"/>
	<img src="xx.jpg"/>
</div>

8、css选择器的权重情况

	标签 << class << id << 内联样式 << 添加 !important的样式
	优先级就近原则，同权重情况下样式定义最近者为准;
	载入样式以最后载入的为准;

9、常用清除浮动方式

1.通过在父级添加伪类，定义一个clearfix（最实用的一个）

.clearfix:after{content:"";display:block;visibility:hidden;height:0; clear:both;}
.clearfix{zoom:1;}

2.添加空标签(增加无意义标签，动态添加结构时可能存在问题)
	在有浮动的最后一个元素后面添加一个空标签，或者在浮动的父级后面添加

<div>
	<div style="float:left;"></div>
	<div style="float:left;"></div>
	<div style="clear:both;"></div>
</div>
<div>
	<div style="float:left;"></div>
	<div style="float:left;"></div>
</div>
<div style="clear:both;"></div>

3.父标签中设置style为overflow: hidden（超出部分无法显示）

<div style="overflow:hidden;">
	<div style="float:left;"></div>
	<div style="float:left;"></div>
	<div style="float:left;"></div>
</div>

10.IE6中设置宽高位10px的时候出现的是长方形

	IE6有默认行高，设置较小高度时显示存在问题
	解决办法：
	font-size:0;line-height:0px;

11、浏览器内核都是什么

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

12、请指出document load和document ready的区别？

共同点：这两种事件都代表的是页面文档加载时触发。

异同点：ready 事件的触发，表示文档结构（不包含图片等非文字媒体文件）加载完成。
	   onload 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。

13、sessionStorage 、localStorage 和 cookie 之间的区别

 共同点：用于浏览器端存储的缓存数据
 不同点：
(1)存储内容是否发送到服务器端：
	当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费；
	web storage,会将数据保存到本地，不会造成宽带浪费；
(2)数据存储大小不同：
	Cookie数据不能超过4K,适用于会话标识；
	web storage数据存储可以达到5M;
(3)数据存储的有效期限不同：
	cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器；
	sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；
(4)作用域不同：
	cookie和localStorage是在同源同窗口中都是共享的；
	sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

14、什么叫优雅降级和渐进增强？

渐进增强 progressive enhancement：
	针对低版本浏览器进行构建页面，保证最基本的功能；
	针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
	
优雅降级 graceful degradation：
	一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：	
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

15、行内元素、块级元素、 空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：就是没有内容的HTML元素，如：br、meta、hr、link、input、img

16、如何让元素垂直水平居中？

1、flex布局方式(目前我比较常用的方式)

<div class="disflex">
	<img src="xx.jpg">
	<span>该布局同时可以让图片和文字在一行内居中</span>
</div>
<style>
	.disflex{display:flex;align-items:center;justify-content:center;}
</style>

2.通过定位

<div class="mainbox">
	<div class="childbox"></div>
</div>
<style>
	.mainbox{position:relative;width:600px;height:400px;background:green;}
	.childbox{position:absolute;top:50%;left:50%;margin-left:-100px;margin-top;-100px;width:200px;height:200px;background:red;}
</style>

17、盒模型有几种？

盒模型一共有两种模式，1是w3c模式，2就是ie模式。
w3c模式是标准模式content是不包括padding和border的；
ie模式下content是包括padding和border的

box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用w3c模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪ie模式解析计算；
目前使用此属性需要添加前缀：

	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;

18、css写三角形

向上的三角形：指向哪的三角形相反方向边框加颜色，相邻的两个方向边框是透明色

<div class="triangle"></div>
<style>
	.triangle{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid blue;}
</style>

19、CSS中 link 和@import 的区别是？

(1) link属于HTML标签，而@import是CSS提供的; 
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 
(4) link方式的样式的权重 高于@import的权重.

20、display:none和visibility:hidden的区别？

display:none  隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden  隐藏对应的元素，但是在文档布局中仍保留原来的空间。

21、ie浏览器678的不同css识别

 .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/ 
      } 

22、超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不具有hover和active？

解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

23、如何对网站的文件和资源进行优化？

解决方案包括：
 文件合并
 文件最小化/文件压缩
 使用 CDN 托管
 缓存的使用（多个域名来提供缓存）

24、减少页面加载时间的方法？

 1.优化图片 
 2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方） 
 3.优化CSS（压缩合并css，如margin-top,margin-left...) 
 4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。） 
 5.标明高度和宽度
 若浏览器没有这两个参数，它需要一边下载图片一边计算大小，影响速度和浏览体验。 
 若有参数，图片暂时无法显示，页面上也有图片空位，继续加载后面内容，不影响速度和体验。

6.减少http请求（合并文件，合并图片）。

25、documen.write和 innerHTML的区别？

document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

26、http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。 
200-299 用于表示请求成功。 
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。
	400  语义有误，当前请求无法被服务器理解。
	401  当前请求需要用户验证 
	403  服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 503 – 服务不可用

27、输入url之后会发生什么？

1、DNS进行解析（网址到IP地址的转换，寻找哪台机器上有你需要资源的过程：
如找www.google.com的IP，《www.google.com.，这个.对应的就是根域名服务								器，默认情况下所有的网址的最后一位都是.》首先在本地域名服务器中查询IP地址，如果没有找到的情况下，本地域名服务器会向根域名服务器发送一个请求，如果根域名服务器也不存在该域名时，本地域名会向com顶级域名服务器发送一个请求，依次类推下去，所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.）
2、TCP连接（HTTP协议是使用TCP作为其传输层协议的）
3、发送HTTP请求
（构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。）
5、浏览器解析渲染页面
(浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上)
6、连接结束

28、图片显示不变形处理？
一种是以背景图的方式通过background-size/background-position等属性进行控制大小,居中不形变的处理
二/是通过给img添加一个css属性object-fit: cover; 保证不变形
object-fit: fill;
　　object-fit: contain;
　　object-fit: cover;
　　object-fit: none;
　　object-fit: scale-down;

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。