CSS （Cascading Style Sheets）层叠样式表
主要功能是指定文档该如何呈现给用户
简介
1994年哈肯·维姆·莱、伯特·波斯（Bert Bos）两人一起合作设计的CSS。
1997年由W3C接管，进行标准化规范
CSS现共有3个版本：
CSS1 现已废弃
CSS 2.1 现目前世界上支持最广泛的版本
2011 年开始 CSS 被分为多个模块单独升级，统称为 CSS 3
如何引入CSS
1、内联style属性：把style属性样式写在标签内，
style标签，一般写在head里面，用花括号包住，加上标签属性
例如：
<style>
body{
background-color: red;
}
h1{
text-align: center; color: red;
}
</style>
我在head里面写一个关于body的颜色，h1的颜色以及文字居中的CSS样式，只是如果CSS样式多了的话就不太适合。
2、外部样式：将CSS文件单独写，然后用link标签引入
<Link rel="stylesheet" href="css文件路径">
3、有时资源文件较多, 一个个的写较麻烦, 这样可以使用@import url();这种写法引入.
布局
float浮动：横向左右结构
分两步：
- 首先给所有子元素加上float left
- 给他们的父元素标签上加上"class= clearfix"
CSS标签中添加clearfix的样式
.clearfix::after{
content: '';
display: block;
clear: both;
}
左中右布局
采用了绝对定位的方法 设置总宽度，然后分布设置左中右三个的宽度具体如下：
1、新建一个使用id绝对定位的html文档
<div id="cs">
<div id="container">
<div id="left">left_side</div>
<div id="content">content</div>
<div id="right">right-side</div>
</div>
</div>
2、设置CSS
cs{
width:700px;
margin:0 auto;
}
container{
position:relative;
margin:20px;
height:400px;
}
left{
position:absolute;
top:0px;
left:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
content{
margin:0px 190px 0px 190px;
border:solid 1px #0000FF;
height:100%;
}
right{
position:absolute;
top:0px;
right:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
注：同时
position:absolute;position:relative;是另一个脱离文档流
意思是我要脱离文档流，但是我还要和你定位
最终效果如图：
细节知识点
1、块级元素的高度是由他里面所有文档流元素的总和决定
文档流：文档内元素的流动方向 内联元素从左往右流动 ，块级元素从上往下每个块级占一行宽度不够会另起一行
2、脱离文档流：
影响div的高度，脱离了之后，就影响不了父元素的高度，
其中一种脱离方式：position: fixed 用于导航栏，悬浮一直存在
3、文字的水平居中
将一段文字置于容器的水平中点，只要设置text-align属性即可：
text-align:center;
4、容器的水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
width:940px;
margin-left：auto
margin-right：auto
}
border：1px solid red：设置一个1像素的红色边框，用于查看大小位置等，很方便，使用完了删掉即可
font-size：字体大小
font-weight:bold ：字体加粗
color：颜色
text-decoration ：字体装饰 例如下划线、中划线、顶划线、删除线或者闪烁
最大宽度：
max-width：940px最大宽度不能超过940px，最大宽度要比直接设置宽度属性好一些
margin：设置外边距属性
四个外边距属性设置分别是 margin-top margin-bottom margin-left margin-right
padding：设置内边距属性
padding-top padding-bottom padding-left padding-right
margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）
完！
