CSS

层叠样式表单

网页的3层

内容层：HTML承载页面的内容
表示层：CSS的作用就是给网页做化妆的，实现显示效果
行为层：JS为网页添加行为

CSS 的3种使用方式

1、内联式CSS：直接写在元素的style属性中的css样式，具有最高的优先级,只作用在当前元素上，不能复用样式。

2、网页内联式：使用<style>元素嵌入到页面的CSS样式，作用在当前页面中，可以在当前页面中复用

3、外部式：样式保存在.css文件中，使用link元素引用当前页面的样式中，可以作用在所有引用的CSS文件的网页，可以在这些网页复用
<link href="" rel="stylesheet">

CSS 样式的优先级

当内敛样式，内部样式，外部样式，等多个样式作用在同一个元素时，元素最终优先采用哪个样式

1、浏览器（用户代理）默认优先级最低。
2、内部样式，和外部样式，哪个距离元素近，哪个生效优先
3、内联样式优先级最高。

CSS 继承特性

1.元素有父子嵌套关系时候，外层设置的可继承CSS属性，可以被子元素继承。
常见的可继承属性：颜色、字体等

CSS 语法

选择器

1、元素选择器：使用元素名选择同类元素

2、id 选择器：使用#id选择页面中唯一的一个id

#menu{
    color:red;
}

3、类选择器：使用.class 选择一组具有相同class属性的元素
.error{color：red；}

class 元素中可以定义多个class，绑定多个类选择器

4、派生选择器：利用元素的层级关系选择元素，绑定样式

• 子孙后代选择器

  ul li{color:red;}选择ul中的全部子孙元素

• 子选择器
  ul>li>ul>li{color:red;}选择ul的li的ul的li元素

5、选择器组：为了一组元素设置一致样式，可以使用组选择器

h1,h2,h3,h4,h5{ border-bottom: 1px solid #ddd   }

6、伪类选择器：用于设置元素的不同显示状态下时候的显示效果
鼠标悬停：hover：鼠标停留在元素上的时候显示的效果

7、复合使用选择器：id，类，元素，伪类等选择器可以组合使用
q.error 选择p元素，

CSS 常用属性

px:像素
em：字体大小
%：百分比
颜色字面量：red blue 等
16进制RGB颜色

文本相关属性

1、文字的缩进
text-indent:2em;/文本缩进2个字符/
设置字体大小
font-size:12px;

line-height: 1.6em; /设置文字的行间距/

行高 1.6em

text-align: center; /块元素中的文本居中/

CSS（盒子）模型

盒子模型：页面元素时候绘制占用空间方式
margin
padding
border

一般情况下，如果不设置宽高，盒子随内容自动增长。当设置了宽高以后，如果设置超出盒子的范围，可以利用溢出属性设置内容的显示方式
overflow：溢出，用于设置溢出以后的显示方式。
overflow: hidden; 溢出隐藏
overflow:scroll;/显示滚动条，无论内容是否溢出/
overflow:auto; 有有溢出时显示滚动条

背景设置

设置盒子模型的 border 内部的背景绘制效果

设置背景色
设置背景图片
设置图片的重复方式， 平铺，x方向重复， y方向重复
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
设置图片的偏移位置
相对位置偏移
绝对位置偏移

/*attachment：附件，附件，附加方式
    scroll：滚动，fixed：固定
    （相对于body滚动）
*/
background-attachment: scroll;

元素显示方式

有3种：
1、块：div、h1-h6，p 等
独立占有行，可以设置宽高
2、行内：span，b，i，u，label 等
不独立占有行，和其他文本混合在一行，不能设置高！
3、行内块：
不独立占有行，和其他文本混合在一行，能够设置宽高！

利用CSS可以设置元素的显示方式，从行内元素更改为块（行内块）元素，为了设置元素的宽高，进行布局占位。

display：inline，inline-block，block;  设置元素显示方式
inline:行内元素，不能设置宽高
inline-block：块内元素，能够设置宽高
block：块元素，能够设置宽高

定位

如何设置元素的显示位置，称为定位

流定位：浏览器中元素的默认定位 static
-块元素流定位：从上到下依次显示
-行内元素定义：从左至右依次显示

相对定位:relative
（相对元素初始位置）不脱离文档流，上下左右的值相对于元素的初始位置

绝对定位:absolute
脱离文档流 ,上下左右值相对于窗口或祖先元素中做过非static定位的元素，一般使用relative，因为其他会导致脱离文档流，影响其他元素的显示效果。

固定定位:fixed
脱离文档流，上下左右的值相对于窗口。

浮动定位
浮动定位属性：float：left/right
脱离文档流，元素可以在当前行内左侧或右侧浮动，当撞到父元素的边框或者另一个浮动的元素时停止。如果一行装不下会自动换行，换行时可能被卡住的现象。
当所有子元素全部浮动，自动识别的高度为0，

利用CSS可以更改元素的定位属性，实现调整元素的显示位置的目的。

盒子模型

粘连问题

-当元素的上边缘和上级元素重叠时，此时给元素添加上外边距会导致上级元素联动的效果，给上级元素添加overflow：hidden解决。

移动元素有两种方式：

--给上级元素添加内边距，会影响上级元素的宽高
--给元素自身添加外边距，推荐使用这种方式

行内元素盒子模型的问题：

1、宽高没有效果，行内元素的宽高只收内容影响。
2、外边距上下没有效果
3、边框，四个边框都会有效果，但是左右占显示范围，上下边框不占显示范围
4、内边距，四个方向都生效，但是左右内边距会占显示范围，上下不占显示范围

相邻两个元素，左右外边距是相加，上下外边距取最大值

行内元素的垂直对齐方式

-vertical-align：top/middle/bottom/baseline(默认）