CSS基础知识
1.1 CSS的基本概念
CSS指层叠样式表（Cascading Style Sheets）
为什么需要用CSS
HTML描述了要呈现的内容，而css则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式
(1)内联样式
<pstyle="font-size:20px;color:brown">内联样式p>将样式定义在style属性中，内容和呈现形式高度耦合，维护困难，不利于分工合作，只能用于当前文件
(2)内部样式
<head>
<style>
p{
font-size: 36px;
color: blueviolet;
}
style>
head>
<body>
<p>内部样式演示p>
body>
<head>p {
font-size: 50px;
color: crimson;
}
<head>
<title>title>
<link rel="stylesheet" type="text/css" href="E102-01-02.css"/>
head>1.2 颜色
所有的颜色都可以由红色、绿色、蓝色三种颜色调配而成，这三种颜色俗称三原色
CSS中用8为表示一个颜色，那么可以表示28种颜色，即256中颜色。所以总共可以表示256x256x256中颜色（真彩色）
Css中有多种颜色表示形式：
1. 十六进制形式：#ff0000
2. RGB颜色：（255,0,0）
3. RGBA透明
在RGB颜色基础上增加了透明度的分量Alpha，该分量的取值范围为0(完全透明)到1（安全不透明）
4. HSL颜色
颜色也可以由另外三个分量表示色调、饱和度、明度
5. HSLE颜色
在HSL颜色的基础上增加了Alpha
6. 预定义颜色
CSS提供了一些常用的预定义颜色，比如：rad、green
1.3 尺寸单位
In:英寸（inch）
Px:像素（pixel）
Em:1em=12px,em是相对长度单位。相对于当前对象文本的字体尺寸，如，当前对行内文本的字体尺寸未被设置，则相对于浏览器屏幕的默认字体尺寸
Vw：相对于视口的宽度。视口被均分为100单位的w
H1{
Font-size:8vw
}
如果视口的宽度为200mm，那么上述代码中h1的字号将为16mm，即（8*200）/100
Vh：相对视口的高度。视口被均分为100单位的vh
H1{
Font-size:8vw
}
如果视口的高度是200mm,那么上述代码中h1的元素字号为16mm。
1.4 进制
进制也就是计数的方法
基：某种计数方法所需要的符号的个数
权：某位的“1”所代表的值
10进制：101=1*102（权）+0*101+1*100
8进制： 145=1*82+4*81+5*80
16进制：65=6*161+5*160
101的八进制是145，它的16进制是65
属性名：属性值
Background-color:red;
P{
Background-color:red;
Font-size:30px
}2.1 字体相关属性
Font-family：字体名称（楷体、黑体等）
Font-size：字体大小
font-variant：字体变化（如大小写转换）
font-style：字形（斜体等）
font-weight：字体粗细
可以简写，书写顺序：
font-style font-variant font-weight Font-sizeFont-family
前面三个标签可缺省，使用默认值，font-size font-family必须指定值
这种书写方式更加简洁
P{
Font:50px 楷体；
}
2.2 文本相关属性
文本相关属性主要包括颜色、对齐方式、修饰等
1. Color：设置文本的颜色
2．Text-decoration：文字修，其属性有：
（1）None，默认值，没有装饰效果
（2）Underline：加下划线
（3）Overline：加上划线
（4）Line-through：加删除线
3. Text-shadow：设置字体阴影，比如：text-shadow: 1px 2px black;
1px是向右平移1像素的单位，2px是向下平移2px的单位。阴影颜色为黑色。
4.direction：对齐方式
Itr ：自左向右；rti:自右向左
5. text-align：文本水平对齐方式
（1）left：左对齐
（2）right：右对齐
（3）center：居中
（4）justify：两端对齐
6. Vertical-align:文本垂直方向对齐
（1）Top:靠上对齐
（2）Buttom:靠下对齐
（3）Middle：垂直居中对齐
7. text-indent：文本缩进
8．Letter-spacing：字符（字母）之间的距离
9. Word-spacing：单词之间的距离
10.background-color：设置一行文本的背景颜色
11.line-height:设置行高
2.3背景相关属性
- Background-color：背景颜色
- Background-image:设置背景图片，需要设置图片的URL地址
- Background-repeat：图片的复制选项
（1） repeat：在水平和垂直两个方向进行复制
（2） none-repeat：不复制
（3） repeat-x:在水平方向复制
（4） repeat-y:在垂直方向复制 - background-position:图片位置
也可以将这一组属性值封装到一个属性background中，书写顺序是：
背景颜色：Background-color
背景图片：Background-image
重复方式：Background-repeat
位置：background-position
表达更加简洁
background: antiquewhite url(“../华点.png”) no-repeat right bottom;
2.4 尺寸相关的属性
Height：高度
Width：宽度
div{
width: 200px;
height: 300px;
background-color: coral;
}max-width：最大宽度
max-height：最大高度
min-width:最小宽度
min-height：最小高度
2.5 显示相关属性
1. 隐藏元素的方法:
(1)visibility:hidden，仅仅隐藏内容，该元素所占的位置依然存在
(2)display：none,不仅仅隐藏内容，且不占位置
display可以设置元素的显示模式
（1）inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容
（2）inline-block:将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小。
也可以将内联元素以块级形式来显示，即display：block
Block（块级元素） inline（内联元素）
2.6 盒子模型
1. Margin：外边距
Margin-top、margin-right、margin-bottom 、margin-left
使用方式
（1） margin：30px；表示上下左右外边距都为30px;
（2） margin-left（right、buttom、top）:30px;单独设置上下左右外边距
（3） margin：10px 20px 30px 40px;分别表示上右下左四个边距分别为10px、20px、30px、40px
2. padding:内边距
也有上下左右边距，和margin类似。不再赘述
3. border：边框
Border-width：边框的宽度
Border-style：边框线条类型
Border-color：边框线条的颜色
也可以使用更优化的书写方式
border:3px dashed blue;
4 outline:轮廓线
用法参考border
2.7定位
地位方式有：static（静态）、fixed（固定）、relative（相对定位）、absolute（绝对定位）
1. Static：静态定位（默认）
无定位。元素正常了流中，不受left、right、top、bottom等位置属性的控制
2. Fixed：
<head>
<style type="text/css">
#div1{
width: 200px;
height: 250px;
background-color: beige;
position: fixed;
top: 50px;
left: 30px;
}
#div2{
width: 200px;
height: 250px;
background-color: darksalmon;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
body>从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，定位的位置取决于left、top。
3. 重新定位之后可能会出现重叠，通过z-index(只有设置了position属性才可以用z-index)可以调整其顺序。
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
#div1{
width: 200px;
height: 250px;
background-color: blueviolet;
}
#div2{
width: 200px;
height: 250px;
background-color: darksalmon;
position:relative;
top: 50px;
left: 30px;
}
#div3{
width: 200px;
height: 250px;
background-color: firebrick;
}
style>
head>
<body>
<div id="div1">div>
<div id="div2">div>
<div id="div3">div>
body>
从结果可以看出，相对定位是从原来位置进行位移，但并不影响后续元素的位置
相对定位就是如果设置了其top、left值，它会相对于它原来所在的位置进行位移。
Absolute绝对定位
绝对定位的元素将被从流中“摘出来”，依靠left与top属性进行定位
与fixed类似，但是参照物不同
Fixed与absolute的区别：
Fixed参照根元素（HTML）
Absolute参照父容器
在没有滚动条的情况下俩者没有差异，在有滚动条的情况下，fixed定位不会随着滚动条移动，而absolute则会随着滚动条而移动。
2.8 浮动
浮动（float）
通过设定float，可以使元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。
<head>
<style type="text/css">
#div0{
width: 1000px;
border: 1px solid red;
}
#div1{
width: 100%;
height: 100px;
background-color: blueviolet;
}
#div2{
width: 200px;
height: 300px;
background-color: darksalmon;
float: left;
}
#div3{
width: 250px;
height: 300px;
background-color: firebrick;
float: left;
}
#div4{
width: 550px;
height: 300px;
background-color: springgreen;
float: left;
}
#div5{
width: 100%;
height: 100px;
background-color: khaki;
clear: both;
}
style>
head>
<body>
<div id="div0">
<div id="div1">div>
<div id="div2">div>
<div id="div3">div>
<div id="div4">div>
<div id="div5">div>
div>
body>
上面的案例用CSS+div实现了另一种布局方式
clear：用于清除浮动