从上面的页面渲染流程可以知道浏览器在解析了HTML跟CSS之后便开始合并渲染，简单来说就是绘制带有样式的HTML规则。CSS的工作流程就是把CSS规则定义到DOMtree上。HTML与CSS具体解析规则属于编译原理的内容，在这里就不作展开了。但是有在CSS工作的过程中有两个词值得注意的就是重排（reflow）跟重绘（repaint）。重排：rendertree的重新构建叫重排。也就是当页面布局...
页面渲染机制在讲CSS的工作流程之前，首先来简单看看页面的渲染机制。页面渲染可分为下面5个步骤：处理HTML来创建DOMtree；处理CSS来创建CSSOMtree；根据DOM跟CSSOM来合并rendertree；根据rendertree来布局；绘制rendertree。
一个at-rule就是一个CSS语句，以@开头，后接标识符，最后以；结束。@charset@charset用于定义样式表中使用的字符编码。它必须写在样式表的最开头且前面不可有别的字符。/*@charset"<charset>";*/@charset"UTF-8";@import@import用于导入外部CSS样式表文件。/*@importurl;*//*@importurll...
每个HTML元素都有初始的样式，但是也可以经过开发者书写而改变样式规则。HTML的元素样式修改有以下的书写规则。内部样式表（写在<head>标签内部）<!DOCTYPEhtml><html><head><style>h1{color:red;font-size:14px;}</style></head><body></body></html>web前端开发学习Q-q-u-...
本篇则主要介绍CSS的语法与CSS是如何工作的。CSS语法1.基本规则CSS规则主要由两部分组成：选择器(selector)与声明(declarations)。选择器(selector)是开发者希望改变样式的HTML元素。声明(declarations)则是开发者制定的希望HTML改变的元素规则，可以是一条或多条。每条声明(declarations)由一个属性(property)和一个值(val...
父元素使用flex布局,并定义两个属性值justify-content，align-items都为center，那么就定义为水平垂直居中justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。<divclass="parent-frame"style="display:flex;justify-content:center;...
该属性设置元素的垂直对齐方式。定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格的对齐方式。<divclass="parent-frame"style="display:table-cell;vertical-align:middle">仿table:display:table-cell垂直居中vertical-align:middle...
块状元素，水平居中<divclass="parent-frame">子元素水平居中<istyle="display:block;text-align:center;color:blue">块状元素，水平居中</i></div>子元素水平居中块状元素，水平居中
以下例子中，涉及到的CSS属性值。.parent-frame{width:200px;height:200px;border:1pxsolidred;}.child-frame{width:100px;height:100px;border:1pxdottedblue;}
这里我用div+css做一个有颜色的盒子，浏览器运行后如下图。div+css【201】"src="http://p6-tt.byteimg.com/large/pgc-image/3a434f8cb06742d797c3da97984dab6d?from=pc"/>