CSS - 简介

时间:2019-07-04
本文章向大家介绍CSS - 简介,主要包括CSS - 简介使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

 

一、历史

    CSS1: 1996年12月

    CSS2: 1998年5月

    CSS3: 2001年5月

    CSS是 Cascading Style Sheets 的简称,中文"层叠样式表"。

    CSS是用来表现HTML或XML等文件内容的样式的语言,它用来解决HTML的内容和展现分离的问题。

    CSS的核心内容是: 盒子模型、CSS属性、CSS选择器。

    浏览器对于CSS的支持不一样,即使相同地的属性,显示的效果也有差异。

    层叠表示CSS规则应用于HTML元素的方式: 多个样式定义可层叠为一个。对一个元素多次设置同一个样式的值,将使用最后一次设置的属性值。

 

二、盒子模型

    CSS的布局主要是基于盒子模型,每个HTML块级元素都像是一个盒子,从外到内包括: margin、border、padding、content。

        HTML元素分为块级元素(block)和内联元素(inline),内联元素只能在块级元素内部存在,并且不包含width和height属性。

        元素的显示可以通过CSS来控制,display: block、display: inline、display: inline-block。

    通常所说的元素的with和height,通常指的是content的宽度和高度。

    在盒子模型中,会涉及到溢出(元素的尺寸无法容纳它的内容和子元素),可以通过overflow来控制。(溢出的时候,根据内容绘制的顺序叠加。)

    参考: https://www.cnblogs.com/polk6/p/3185692.html

 

三、定位机制

    从下图看出,Z轴的值越大,就会离用户越近,相应的元素就会在它的位置覆盖离用户更远的同位置元素,与图片层叠类似。

 

    CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

        (1) 标准文档流

            从上到下,从左到右,遇块(块级元素)换行。

            除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

        (2) 浮动

            使用float属性,最初设计初衷是文字环绕效果。

            浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动。

            而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素;内联元素则是有空隙就插入。

            参考: https://www.cnblogs.com/polk6/p/3142187.html

        (3) 定位

            使用position属性,其中值为absolute或fixed时,元素会脱离文档流。

            参考: https://www.cnblogs.com/polk6/p/3214847.html

            定位元素可以通过设置z-index属性来控制元素的堆叠顺序,数值越大越靠近用户。(默认z-index的值是0)

 

四、 浏览器的渲染顺序

    1、获得HTML内容

    2、将HTML的标签转换为DOM树(DOM Tree)

    3、根据CSS样式表构建CSS规则树(CSS Rule Tree)

    4、遇到JavaScript则通过DOM API和CSSDOM API来操作DOM Tree和CSS Rule Tree

    5、通过DOM Tree和CSS Rule Tree构造渲染树(Rendering Tree)

    6、布局: 确定每个节点在屏幕上显示的确切位置

    7、绘制: 遍历Rendering Tree并使用后台UI接口将每个节点绘制出来

 

$flag 上一页 下一页