总结一些css的基础知识。
一.盒模型
css盒模型：
本质上是一个盒子，封装周围的html元素，包括：边距 margin ， 边框 border ，填充 padding ，和内容 content 。
可以分为 w3c盒模型 （标准盒模型） 与 IE盒模型（怪异盒模型）
box-sizing：content-box （w3c盒模型，标准盒模型）：元素宽高为 内容宽高content。box-sizing：border-box （IE盒模型，怪异盒模型）：元素宽高为 内容content + 内边距padding（填充）+ 边框 border
二，行内元素，块状元素，行内块状元素
html可以把元素分类为行内元素，块状元素，行内块状元素三种。
注意：三者可以用display任意转换
（1）display：inline；转换为行内元素
（2）display：block；转换为块状元素
（3）display：inline-block；转换为行内块状元素
1.行内元素
最常使用的是span，其他只在特定功能下使用。
行内元素特征：（1）设置宽高无效
-------------------- （2）对margin仅设置左右方向有效，上下无效。对padding 设置上下左右都有效，会撑大空间。
-------------------- （3） 不会自动换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试案例</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>不会自动换行</i>
<span>行内元素</span>
</body>
</html>
2，块状元素
代表为 div，其他如 p ，nav ，aside ， hearder ，footer，setion ，article 等等都可以用 div 得到。不过为了便于读代码，一般会用铁钉的语句化标签，使得代码可读性强，便于查错。
块状元素特征：
（1）可以识别宽高
（2）margin 与 padding 上下左右均有效
（3） 可以自动换行
（4）多个块状元素标签写在一起，默认排列为从上到下
3。行内块状元素
包含行内元素和块状元素，各有取舍，使用次数较多。
特征：
（1）不自动换行
（2）能够识别宽高
（3）默认排列为 从左到右
在html5 中可以自定义标签，加入display 就可以变成对应的行内或者块状元素
三.简述src和href的区别
一个为连接，一个为替换当前元素src 用于替换当前元素，是source 的简写，指向外部资源位置。指向的内容会镶嵌到当前标签的位置；会将img和frame等资源下载并应用到文档内。href 用于当前文档和引用资源之间确立联系。，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
<script src ="js.js"></script>
当浏览器解析到该元素时，会停止其他资源下载，直到该资源加载，编译，执行完毕，（如图片和框架元素），
<link href="common.css" rel="stylesheet"/>
浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这就是为什么建议使用link方式来加载css，而不是使用@import方式。
四。什么是css Hack
简单来说就是：不同浏览器对于css样式的解释可能会存在误差，css hack就是用来解决这个问题的。
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
例如：hack1{width:300px;_width:200px;}一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线**_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px**，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px;
浏览器识别字符标准对应表
1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2. \9 ：所有IE浏览器都支持
3. _和- ：仅IE6支持
4. * ：IE6、E7支持
5. \0 ：IE8、IE9支持，opera部分支持
6. \9\0 ：IE8部分支持、IE9支持
7. \0\9 ：IE8、IE9支持
五 什么叫优雅降级和渐进增强
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
一者为：完整构建功能后，在来兼容以前的版本，一者为：从基础开始（以前版本），一点一点的的扩充，来兼容当前版本
六：px和em的区别
px ：像素，为绝对单位，不会因其他元素的尺寸变化而变化。
em ：相对于父元素的字体大小，相对单位，没有固定的度量值，由其他元素来决定。
七：常见的HTTP状态码有哪些
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。在浏览器接收并显示网页前，此网页所在的服务器会返回一个**包含HTTP状态码的信息头(server header)**用以响应浏览器的请求。
HTTP状态码的英文为HTTP Status Code。下面是常见的HTTP状态码：
200 – 请求成功
301 – 资源(网页等)被永久转移到其它URL
404 – 请求的资源(网页等)不存在
500 – 内部服务器错误
状态码分为五种：
1。信息，服务器收到请求，需要请求者继续执行操作
2。成功，操作被成功接收并处理
3。重定向，需要进一步的操作以完成请求
4。客户端错误，请求包含语法错误或无法完成请求
5。服务器错误，服务器在处理请求的过程中发生了错误
八：css的定位方式
css定位有四种不同类型，position值分别为：static， relative，absolute，fixed
1，static 静态定位
2.relative，相对定位，相对定位元素常常作为绝对定位元素的父元素，并且定位元素经常与z-index属性进行层次分级
3. absolute，绝对定位，
4. fixed 固定定位 ，位移的参考坐标是可视窗口，使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级
九。浏览器的内核有哪些？分别有什么代表的浏览器？
Trident 内核：IE，搜狗高速浏览器等
Gecko 内核：Mozilla Firefox（火狐浏览器），Netscape6及以上版本
Webkit 内核：Safari 、曾经的 Chrome
Presto 内核：Opera 7到Opera12.17（欧朋浏览器）之间的版本采用的内核
Blink 内核：现在 Chrome 内核是 Blink，Opera现已改用Google Chrome的Blink内核
十。浏览器是如何渲染页面的
不同浏览器的内核不同，渲染过程不太一样。
有个基本过程：
1.HTML解析出DOM Tree
2.CSS解析出Style Rules
3.将二者关联生成Render Tree
4.Layout 根据Render Tree计算每个节点的信息
5.Painting 根据计算好的信息绘制整个页面
来源：CSDN
作者：随波逐流的前进
链接：https://blog.csdn.net/Iwokei/article/details/103554309