一.什么是CSS
- CSS是层叠样式表(Cascading Style Sheets),层叠的意思是多个样式表作用于一个元素时,首先筛选有没有重复的属性,有重复的就近原则,没有重复的就层叠为一套最终的样式最后作用在元素身上。
- 样式定义如何显示HTML元素
- 把样式表添加到HTML中,是为了解决内容与样式分离的问题。
二.样式表的类型
- 内嵌
<h1 style="background-color:red;"></h1>
- style 内联
<style>
h1{
background-color:red;
}
</style>
- 外联
可以提取网页的公共样式放在外部样式表,将结构和表现进行分离,便于维护。当三种样式同时作用于同一个元素,谁离元素更近谁其作用–就近原则。 - 浏览器用户自定义样式
- 浏览器默认样式
三.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.选择器分组
某些元素有同样的CSS样式,中间用逗号隔开。
6.属性选择器
六.CSS盒模型
1.块级元素和行级元素
块级元素:
- 块级元素独占一行,块级元素后面无法再放任何的内容。
- 从页面布局和外观显示来看,一个网页的布局就类似于一片报纸的排版。首先将网页分成大的模块。然后在模块里分成小的模块。所以块级元素多用来布局。
行级元素:
- 只占一小块空间,后面可以继续放内容。
- 行级元素也被称为行内标签、内敛标签、使用跨级元素将网页结构搭建好之后,使用行级元素来排版
2.行级元素和块级元素的区别
- 块级元素独占一行,行级元素共享一行。
- 块级元素支持宽和高,行级元素不支持宽和高,行级元素的宽和高由内容来决定。
- 块级元素常作为容器,可以容纳其他的块级元素和行级元素。行级元素一般用来组织内容,即用来排版文字、图片、超链接等内容。
3.有哪些块级元素和行级元素
1.块级元素:div、p、h、hr、table、ul、ol、form、li、tr、td
2.行级元素:a、span、label、input、img、textarea、br
4.行级元素和块级元素互相转化
- 行级元素-》块级元素
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.相对定位
- 不影响元素本身的特性。
- 破坏当前的文档流,但是不会脱离文档流。
- 如果没有设置偏移量,元素是不会移动的。
- left,right,top,bottom
2.固定定位fixed
设置了偏移量后固定在屏幕上,脱离文档流,不受文档流的控制。
3.绝对定位absolute
- 设置绝对定位要脱离文档流。
- 文档》html》body。
- 设置绝对定位后元素不会再占据原来的空间,也不会影响标准文档流的继续排列。
- 默认给元素设置一个display:inline-block。
- 如果设置父类或者父类的父类为相对定位,那么要以定位父级作为父类。
4.z-index
值越大,层级越高,最大没有限制。
5.浮动
- 浮动可以让块级元素在一行显示,脱离了文档流。
- 后面元素碰到前面元素的边界就停止下来,碰到父类的边界停止下来。
- 默认加上display:inline-block。