CSS理论

（html通常被用来定义网页结构，css主要控制网页的表现（样式），而javascript主要是行为）

CSS

css是什么？

层叠样式表，是一种表现HTML或者XML等文件样式的机器语言。

css引用样式表的三种方式？

1、行间样式表（把style直接写在<>当中）；

2、内部样式表（把style写在固定的位置，方便调用）；

3、外部样式表（把style写在外部文件中，这样最方便调用）。

外部引用有什么优点？

如果三种样式作用于一个元素，哪种样式的优先级高？

就近原则，离元素越近，优先级越高

层叠样式表（Cascading Style Sheets）

层叠：

多个样式表作用于统一个元素时，首先筛选有没有重复的属性，有的话就选择就近原则，如果没有重复，就层叠为一套最终样式作用在元素身上。

浏览器如何解析html和css？

浏览器将载入的html变为dom树，（dom树是一种结构），但此时没有任何显现、样式，（我们看到的都是浏览器调试后的显示，dom树是无色无味的），只有经过css渲染才会显现出效果、样式。

优先级：

id选择器>class选择器>元素（类型）选择器

11.30

1、行级元素与块级元素

块级元素： （div\p\h\hr\table\ul\ol\form）

独占一行，后面无法再放任何内容；

支持高和宽；

常作为容器，可以容纳其他的行级元素和块级元素；

从页面布局和外观显示来看，一个网页的布局是从一个大的模块分成各种小的模块，所以块级元素多用来进行布局。

行级元素： （a\span\label\input\textarea\br\img）

只占一小块空间，后面可以继续放内容；

不支持高和宽，行级元素的高和宽由自身的内容决定；

行级元素一般用来组织内容，容纳文字、图片、超链接；

也被称为行内标签、内联标签，当块级元素搭建好模版时，使用行级元素来排版。

display=inline-block；行块转换

在margin-top中，如果父类（外面的div）没有边框，子类（里面的div）的边距值也会影响到父类。

12.1

标准文档流：

只在不使用定位或者特殊css排版的时候，各个元素的排列规则。（css规定网页元素的默认排列方式）

设置margin的值为负数，可以破坏文档流，但元素还处于标准文档流中。

相对定位：

position：relative；

相对自己原来的位置进行值的改变

固定定位：

position：fixed；

设置了偏移量后固定在某个位置，脱离了文档流，不收文档流控制（鼠标滚动不会影响）

默认定位：

position：static；

绝对定位：

position：absolute；

相对页面边框进行值的改变，如果有父类，就会相对于父类（无定位，称为结构父级）进行移动，如果父类的父类设置了定位（称为定位父级），就会相对父类的父类进行移动；脱离了文档流，默认给元素设置为display:inline-block。（一旦设置，元素就会漂浮在上面，不会占据原来的空间，其他的标准文档流会无视他的存在，按顺序排放）

四种定位的特点：

不影响元素本身的特性；

会破坏元素文档流，但是不会脱离文档流。

如果说没有设置偏移量，元素是不会移动的。

可以设这四个值：left、right、top、bottom

z-index: 当图片出现覆盖时，可用这个语法，后面加的值越大，就会出现在最上面。

float：浮动，可以让块级元素在一行显示；

脱离文档流；

后面元素碰到前面的元素时就会停下来，碰到父类边界也会停下来；

默认给元素设置为display:inline-block；

clear：(both（清除所有浮动）、left（清除左浮动）、right（清除右浮动））

清除浮动

不是取消浮动，只是让上面的浮动不影响下面的元素