■ CSS是什么?它与魔术有什么关联?为何把CSS称为网页魔术师? ■ CSS是怎样工作的?它有什么用处? ■

html-css06

■ CSS是什么?它与魔术有什么关联?为何把CSS称为网页魔术师? ■ CSS是怎样工作的?它有什么用处? ■,第1张

CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。

层叠式表的特点

1、便于页面的修改。

2、便于页面风格的统一。

3、减少网页的体积。

使用CSS布局的优点:

1:表现和内容相分离

2:提高页面浏览速度

3:易于维护和改版

4: 使用CSS布局更符合现在的W3C标准.

我们知道html中元素对外表现都是一个个盒子或者说是框,那么这些盒子是否都一样呢?前面说过,这些盒子有的是从上到下竖着摆放的,而有的是横着摆放的。另外,有的盒子装的内容是直接展示的,有的却是魔术盒,根据标签和属性决定具体的展示内容。

替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)。

最明显的两个例子:

另外,textarea、select、object、video都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

HTML 的大多数元素是非替换元素,浏览器直接将其内容显示出来。例如:div, p, span

普通流中,块元素独占一行。例如:div,p,h1等。

普通流中,行内元素左右可以有其他行内元素。

块级元素,width,height,margin,boder的设置遵循盒模型。

行内替换元素,width,height,margin,boder的设置遵循盒模型。另外,当其宽高有auto属性时,其表现如下:

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

替换元素和非替换元素

html元素两种分类。替换元素和不可替换元素;块级元素和行内元素

置换元素(替换元素)和非置换元素(不可替换元素)

行内元素与块级元素的总结

置换和非置换元素