CSS的工作原理

三阶段：从输入url到页面展现

浏览器输入url——浏览器向服务器发请求——服务器将相关数据处理返至浏览器——浏览器拿到数据并加载页面——解析html的字符串、词法分析解析成树状结构=>create Dom tree

解析html时，加载css，文件被下载——解析css文件对其分析——attach style to Dom nodes => create Dom tree

两树状结构对应起来——新的dom树（节点相关的元素、参数）——渲染、绘制页面

CSS 加载（引入）方式

（1）外部样式表（推荐）

通过<link>引入css

<link rel="stylesheet" href="style.css">

通过@import引入样式，放入css文件中，不要忘记分号，如下方式

（2）内部样式（内嵌方式）

即将CSS放在页面的<style>元素中

注意报错：注意文件路径，右键——检查——查看源代码——点击显示错误链接：

failed to load resource：net：ERR_FILE_NOT_FOUND

即报错可能：文件不存在、文件路径写错了

（3）内联样式（行内方式）

即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中

<p style="background:orange; font-size:24pax;">css很棒</p>

（4）属性样式(已废弃）

<img src="a.png" width=100 height=200>

CSS 盒模型

1、IE 盒模型

IE 盒模型的width=content尺寸+padding+border

如图：

如IE678怪异模式，不添加doctype，使用ie盒模型，宽度=边框+padding+内容宽度

2、W3C标准下的盒模型

W3C标准下的盒模型padding、border所占的空间不在width、height范围内，content宽度即是width

如图

3、box-sizing（css3新样式）

为了使用方便，可以用IE盒模型计算宽度的方法，将width=border+padding+内容宽度

A、W3C标准的盒模型：box-sizing： content-box

B、IE盒模型：box-sizing：border-box

<div style="height:200px; width:200px; border:solid 10px #333; padding:100px></div>

（CSS3）box-sizing是什么

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，二IE模型包括border和padding box-sizing属性可以为三个值之一：

content-box，默认值，只计算内容的宽度，border和padding不计算入width之内

padding-box，padding计算入宽度内

border-box，border和padding计算入宽度之内