CSS基础

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; 是另一个脱离文档流
意思是我要脱离文档流，但是我还要和你定位

最终效果如图：

image.png

细节知识点

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是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

---

完！