CSS基础语法

CSS:层叠样式表（Cascading Style Sheets）,它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。

1、内联式：直接在元素中加入style属性，只能用于网页中的一个元素

2、嵌入式：书写style标签，在标签中指明样式。可以用于网页中的不同元素

div{
width:300px;
height: 200px;
background-color: yellow;
border: 2px solid #000;
}

3、外联式：将样式规则书写到文件中，可以用于不同的网页，重用度最好。
单独书写一个CSS文件放入 div{ }

层叠样式表的含义是：如果有多个规则来描述同一个元素，那么会根据样式表的优先级，来决定最终显示什么样式。

对于导入CSS方式的优先级：内联式>嵌入式>外联式

CSS选择器：

元素选择器：利用元素的标签名称作用选择范围。div{}表示所有div元素均采用该样式。h1,h2{}表示所有的h1标签和h2标签均采用该样式。

类选择器 .：利用元素的class属性来引入类选择器的样式。
.mm{ }

该div采用mm类选择器定义的样式

ID选择器#：让拥有该ID属性的元素采用该样式。
#p1{ }

id号为p1的元素采用该样式

包含选择器：元素内的子元素采用该样式。
#mydiv span{ }

ID号为mydiv元素中的所有的span标签采用该样式
div .aaa{} 表示所有的div中，class属性为aaa的元素采用该样式。
通配符*：所有的元素均采用该样式。
#oneDiv *{} 表示ID为oneDiv中，所有的元素均采用该样式。

伪类及伪元素选择器：执行完某个动作的时候才用该样式。

data tr:hover{ } 表示鼠标悬停在ID为data下的tr元素时，才用该样式。

CSS属性单位：
长度单位：
绝对长度：cm(厘米) mm(毫米) in(英寸) pt(点) pc(Picas)
相对长度：em(Ems) px(像素) ex（Exes）

颜色单位：1、用百分比值来表示
    2、使用0-255之间的整数值来设置，比如color：rgb（128，0,128）
    3、使用十六进制数组定义颜色，如#fc0eab
    4、使用简化的十六进制数定义颜色，如#080；
    5、为颜色取名：aqua,black,blue,fuchsia,gray,green等。

字体属性：font

布局属性：

margin属性：margin-top，margin-right，margin-bottom，margin-left，margin
水平盒子的间距为两个盒子间距的和
垂直盒子的间距为两个盒子间距的较大值
margin值可以设置为负值

padding属性：
padding属性用来描述盒模型的边框和内容之间插入多少空间，和margin属性类似，它也是分为上下右左和一个快捷方式padding，属性名称包括padding-top，padding-right，padding-bottom，padding-left，padding。

两者的区别：
1、margin是当前元素和border的距离，padding是内容和border的距离
2、margin是对外的，padding是对内的
3、margin只对块级元素有效。padding对所有元素有效。

理解CSS 盒模型：
在盒模型中，我们可以控制四个不同的分层属性：
内容（content）：元素的内容
外边距（Margin）：代表元素外边的空间，这个控件将元素相互分开
边框（Border）：位于元素的边距内和元素的边框距外之间的可配置线
内边距（padding）：元素内容和元素边框之间的控件

盒模型均可用“上右下左”方式设置。如果仅仅给出两个或三个值，那么缺失边的属性取值与对边的值相同。

盒子之间的关系：
标准文档流:指在不使用其他与排列和定位有关的特殊CSS规则时，各种元素的排列规则。、
1、文本元素按照从上到下、从左到右的格式布局。
2、块级元素按照从上到下依次排列。
3、内嵌元素按照从左到右依次排列。

定位属性：

static：静态定位
relative：相对定位
absolute：绝对定位
fixed：固定定位，和absolute类似，不过位置一直固定

display：none和visibility：hidden的区别：
这两个样式都可以隐藏元素。
display：none元素看不见，同时不占用位置。
visibility：hidden元素看不见，但元素会占位置

内嵌元素和块级元素的相互转换：
内嵌元素—>块级元素 display：block
块级元素—>内嵌元素 float：left

letter-spacing 字间距