本文深入讲解CSS的工作原理，包括样式加载流程、样式优先级、选择器类型、元素显示模式、盒子模型及其特性等内容。
1. CSS究竟是怎么工作的？
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。
(1)浏览器载入HTML文件（比如从网络上获取）。
(2)将HTML文件转化成一个DOM（Document Object Model），DOM是文档对象模型，通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。
(3)接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理。
(4)浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
(5)上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
(6)网页展示在屏幕上（这一步被称为着色）
2. CSS样式嵌入的三种形式及优先级
从CSS 样式代码插入的形式：内联式、嵌入式和外部式（在head里面添加<link href="base.css" rel="stylesheet" type="text/css" />）三种
优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面（其实就是浏览器是从前往后加载，在后面的嵌入式样式替换了外部式的样式）
3.选择器：
（1）后代选择器：（空格）作用于元素的所有后代。
（2）通用选择器： *，作用于所有元素。
（3）伪类选择符：允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色。
……
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
4. ！important表示什么？
为某些样式设置具有最高权值
5. 关于块级元素、内联元素、内联块状元素
block(块级)元素特点：
（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
设置display:block就是将元素显示为块级元素。
inline-block （内联块）元素特点：
（1）和其他元素都在一行上（不独占一行）；
（2）元素的高度、宽度、行高以及顶和底边距都可设置。
line(内联)元素：
（1）和其他元素都在一行上（不独占一行）；
（2）行内元素设置 widht/height 不生效，padding生效，margin只有左右两边生效
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
6.盒子模型：
上面的内联元素为内联盒子，块元素为块盒子。
块盒子：
内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
内联盒子：
垂直方向的内边距、以及边框会被应用但是不会把其他处于inline状态的盒子推开。
（会造成重叠）
水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。
关于margin（外边距）:
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。
margin 属性接受 1~4 个值。每个值可以是 <length>，<percentage>，（注意百分比值 <percentage> 的依据为最近的块容器的宽度 width ）或 auto(一般会居中)。取值为负时元素会比原来更接近临近元素。
-当只指定一个值时，该值会统一应用到全部四个边的外边距上。
-指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
-指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
-指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距
如何理解margin与padding，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。
外边距重叠：
-元素之间的上下外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值，横向margin不会发生折叠
-有设定float和position=absolute的元素不会产生外边距重叠行为。
-如果具有间隙的元素的顶部和底部边距相邻，则其边距与后续兄弟元素的相邻边距折叠，但生成的边距不会与父块的底部边距折叠。
-当两个或更多边距折叠时，产生的边距宽度是折叠边距宽度的最大值。在负边距的情况下，从正相邻边距的最大值中减去负相邻边距绝对值的最大值。如果没有正边距，则从零中减去相邻边距绝对值的最大值。
Padding（内边距）:
内边距位于边框和内容区域之间。与外边距不同，不能有负值的内边距，所以值必须是0或正的值。
（会影响盒子的实际大小，撑开盒子，会影响整个布局；如果元素没有指定width/height属性，则该元素宽度为父元素宽度的100%,而且padding不会撑开盒子宽度）
溢出（overflow）：
溢出是在盒子无法容纳下太多的内容的时候发生的。在盒子里面需要放置文本的时候，限制住块的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。
overflow属性是你控制一个元素溢出的方式。
overflow的设置项：
（1）visible 默认值。内容不会被修剪，会呈现在元素框之外。
（2）hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
（3）scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
（4）auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
（5）inherit 规定应该从父元素继承 overflow 属性的值。
5.定位及层级：
定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为。
（1）静态定位（static）：
静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置。
（2）相对定位（relative）:
它与静态定位非常相似，占据在正常的文档流中（之前的位置依然在），除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。div{position:relative;top: 30px;left: 30px;}
(3)绝对定位(absolute)：
绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……。
绝对定位相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
(left: 50%;bottom:100%; 表示出现在父级元素的左边百分之五十，下边百分之百的距离
多个元素时设置百分比可以进行统一的布局)
(4)固定定位(fixed)：
这与绝对定位的工作方式完全相同，只有一个区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。
(5) position: sticky
比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
层级：当元素开始重叠，什么决定哪些元素出现在其他元素的顶部？
z-index属性：网页有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。z-index只接受无单位索引值，如z-index:1,较高的值将高于较低的值。
扫一扫
1745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
