初探CSS

一.什么是CSS

1. CSS是层叠样式表（Cascading Style Sheets）,层叠的意思是多个样式表作用于一个元素时，首先筛选有没有重复的属性，有重复的就近原则，没有重复的就层叠为一套最终的样式最后作用在元素身上。
2. 样式定义如何显示HTML元素
3. 把样式表添加到HTML中，是为了解决内容与样式分离的问题。

二.样式表的类型

1. 内嵌

<h1 style="background-color:red;"></h1>

1. style 内联

<style>
h1{
    background-color:red;
}
</style>

1. 外联
   
   可以提取网页的公共样式放在外部样式表，将结构和表现进行分离，便于维护。当三种样式同时作用于同一个元素，谁离元素更近谁其作用–就近原则。
2. 浏览器用户自定义样式
3. 浏览器默认样式

三.CSS选择器

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
1. 选择器通常是我们要改变样式的HTML元素
2. 每条声明由一个属性和值组成
3. 属性（property）是我们希望设置的属性，如果要设置多个属性的值，中间用分号隔开。

四.浏览器如何解析CSS和HTMl

1.将我们写的HTML解析为DOM 树，还没有任何样式。同时将CSS转换为计算机能识别的样式。
2.当上面两步都完成后，将样式渲染到DOM上去。
3.显示。

五.选择器

1.ID选择器

元素的id，因为每个元素只有一个id，且页面上的id是唯一的，可以更加准确地查找到元素。

2.类选择器

class，同一类元素的相同属性。同一元素有多个class样式，中间用空格隔开。

3.元素选择器

标签元素的名字

4.选择器的优先级

在同一个样式表中：ID选择器》类选择器》元素选择器。

5.选择器分组

某些元素有同样的ＣＳＳ样式，中间用逗号隔开。

6.属性选择器

六.CSS盒模型

1.块级元素和行级元素

块级元素：
- 块级元素独占一行，块级元素后面无法再放任何的内容。
- 从页面布局和外观显示来看，一个网页的布局就类似于一片报纸的排版。首先将网页分成大的模块。然后在模块里分成小的模块。所以块级元素多用来布局。

行级元素：
- 只占一小块空间，后面可以继续放内容。
- 行级元素也被称为行内标签、内敛标签、使用跨级元素将网页结构搭建好之后，使用行级元素来排版

2.行级元素和块级元素的区别

1. 块级元素独占一行，行级元素共享一行。
2. 块级元素支持宽和高，行级元素不支持宽和高，行级元素的宽和高由内容来决定。
3. 块级元素常作为容器，可以容纳其他的块级元素和行级元素。行级元素一般用来组织内容，即用来排版文字、图片、超链接等内容。

3.有哪些块级元素和行级元素

1.块级元素：div、p、h、hr、table、ul、ol、form、li、tr、td
2.行级元素：a、span、label、input、img、textarea、br

4.行级元素和块级元素互相转化

1. 行级元素-》块级元素

a{
display:block;
}

2.块级元素-》行级元素

div{
display:inline;
}

3.行内块级元素:共享一行，但是能够支持高和宽。
div{
display:inline-block;//img就是一个行内块级元素
}

七.布局

1.外边距

外边距重叠，在一个方向如果设置多个外边距，会取最大值。

2.外边距传递。

当父元素没有边框的时候，设置子元素的margin-top会发生外边距传递，父元素会有margin-top。

八.定位

文档流：只在不使用定位或者特殊的css排版的时候，各个元素的排列规则。css规定网页元素的默认排列方式。
**position四个值：relative（相对定位）、static（默认）、fixed（固定定位）、absolute（绝对定位）。

1.相对定位

1. 不影响元素本身的特性。
2. 破坏当前的文档流，但是不会脱离文档流。
3. 如果没有设置偏移量，元素是不会移动的。
4. left,right,top,bottom

2.固定定位fixed

设置了偏移量后固定在屏幕上，脱离文档流，不受文档流的控制。

3.绝对定位absolute

1. 设置绝对定位要脱离文档流。
2. 文档》html》body。
3. 设置绝对定位后元素不会再占据原来的空间，也不会影响标准文档流的继续排列。
4. 默认给元素设置一个display：inline-block。
5. 如果设置父类或者父类的父类为相对定位，那么要以定位父级作为父类。

4.z-index

值越大，层级越高，最大没有限制。

5.浮动

1. 浮动可以让块级元素在一行显示，脱离了文档流。
2. 后面元素碰到前面元素的边界就停止下来，碰到父类的边界停止下来。
3. 默认加上display：inline-block。