CSS作为页面的“化妆师”，让我们一起来了解如何把页面变得更美吧

CSS引入方式

1.行内样式

行内样式是直接对HTML标签使用style=" "，例如：

<!--设置一个长度为100px、宽为100px的矩形-->
<div style="width:100px;heigght:100px;"></div>

优点：简单、直接对盒子模型进行操作。

缺点：HTML页面不美观，不便于程序员阅读代码、后期不好维护。

2.内嵌样式

内嵌样式是将CSS代码写在之间，并且用进行声明，例如：

<style>
   .box{
      width: 100px;
      height: 100px;
   }
</style>
<body>
    <div class="box"></div>
</body>

优点：代码布局会更加清晰，方便程序员阅读。。

缺点：页面使用的是公用CSS代码,每个页面都要定义的,如果一个项目有很多页面,每个页面都要设置CSS代码块,后期维护难度大。

3.链接样式（常用）

链接样式是只需要之间加入<link…/>，再在<link…/>中引入css文件，再在CSS文件中写入所需要的页面样式。例如：

<!--在HTML页面中引入CSS文件-->
<link rel="stylesheet" href="./test.css">

4.导入样式

导入样式是采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成文文件的一部分，类似于内嵌样式。例如：

@import在html中使用，代码如下：

<style>
  @import url(test.css)
</style>

@import在CSS中使用，代码如下：

@import url(test.css)

清空默认样式reset

在大部分浏览器中都有默认的样式，例如p标签有上下边距、strong标签有字体加粗样式等。

这些默认的样式往往会给我们网页开发带来问题，影响我们的页面布局，影响开发效率，所以解决的方法是一开始就将浏览器的默认样式全部去掉，重新定义标签样式。目前我们可以通过引入reset.css文件将浏览器提供的默认样式覆盖掉，不影响我们自己页面的布局。

reset.css文件下载地址

css中的基本单位

长度单位

像素px
-屏幕（显示器）实际上是由一个一个的小点点构成的
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

像素pc（不常用）1pc=12px
vw：（取值1-100），理解全屏幕宽为100vw，自适应屏幕。
vh：（取值1-100），理解全屏幕高为100vh，自适应屏幕。

百分比%
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变

em是相对于元素的字体大小来计算的,1em=1 font-size,但是em会根据字体大小的改变而改变

rem是相对于根元素的字体大小来计算的

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色（不方便）

我们可以通过以下单位来渲染不同的颜色：
RGB值
-RGB通过三种颜色的不同浓度来调配出不同的颜色
-R red G green B blue
-每一种颜色的范围1都在0—255（0%~100%）之间
-语法：RGB（红色，绿色，蓝色）

RGBA
就是在RGB的基础上添加了一个A表示不透明度
需要四个值，前三个跟RGB一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 0.5表示半透明

十六进制的RGB值
-语法1：#红色绿色蓝色
-颜色浓度通过00-ff
-如果颜色两位两位重复可以进行简写（#aabbcc–>#abc）

HSL值 HSLA值： H色相（0~360） S饱和度（0%~100%） L亮度（0%~100%） A不透明度

块元素和行内元素

CSS将HTML中的标签按照元素分类方式分为行内元素(inline element)、**块元素(block element)和行内块元素(inline-block leement)**三种：

行内元素特征

1.设置宽高无效

2.对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

3.独占一行

4.一般情况下会在块元素中存放行内元素，而不会在行内元素放块元素。代表元素span

块元素

1.能够识别宽高

2.margin和padding的上下左右均对其有效

3.可以自动换行

4.多个块状元素标签写在一起，默认排列方式为从上至下

5.在页面中一般通过块元素来对页面进行布局

行内块元素

1.可以自动换行

2.能够自动识别宽高

3.默认排列方式为从左到右

盒子模型

我们在总结CSS过程中，不得不提到“盒子模型”这一概念。这是CSS样式成形的根本

CSS将页面中所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子放到不同的位子。
每个盒子都由以下几个部分组成：
内容区（content）：元素的所有的子元素和文本内容都在内容区中排列
内容区的大小由width，height两个属性来设置
边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框就是盒子外部
边框的大小会影响整个盒子的大小
外边框（margin）
内边框（padding）

边框(border)：
边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style

border-width：默认值一般是3px
border-width可以用来指定四个方向的边框的宽度
值得情况：
四个值：上右下左
三个值：上左右下
两个值：上下左右
一个值：上下左右
另外还有border-xxx-width：xxx的可能值为 top，right，left，bottom：用来指定某一个边的宽度

border-color用来指定边框的颜色，同样也可以分别指定四个边的边框，规则和border-width一样
border-color也可以省略不写，不写的话自顶使用color的颜色值

border-style 指定边框样式默认值是none表示没有边框，其他值：
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border以外还有四个border-xxx：xxx的可能值为 top，right，left，bottom
例如：border-top：10px solid red；

内边距（padding）：会影响到盒子的大小，背景颜色会延伸到内边距
内容区和边框之间的距离是内边距
一共有四个方向的内边距：padding-xxx（xxx的值为top，right，left，bottom）

padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width一样

外边距（margin）：会影响到盒子实际占用的空间
外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距
margin-top：上外边距，设置一个正值，元素会向下移
margin-right：默认情况下设置margin-right不会产生任何效果
margin-bottom：下外边距，设置一个正值。其下边元素会向下移动
margin-left：左外边距，设置一个正值，元素会向右移动

margin也可以设置负值，如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序进行排列的，所以默认情况下如果我们设置的左和上外编剧则会移动元素自身，而设置下和右外边距会移动其他元素

margin的简写属性：
margin可以同时设置四个方向的外边距，用法和padding一样

外边距的注意事项：
垂直外边距的重叠（折叠）
相邻的垂直方向外边距会发生重叠现象

      兄弟元素
          兄弟元素间的相邻垂直外边距会取两者之间的较大值
          特殊情况：如果相邻的外边距一正一负，则取两者的和
          如果相邻的外边距是负值，则取两者中绝对值较大的

       兄弟元素之间的外边距的重叠，对开发是有利的，所以我们不需要进行处理

       父子元素
               父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
               父子外边距的折叠会影响到页面的布局，必须要进行处理

元素的水平方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right=其父元素内容的宽度
以上等式必须满足，如果想加结果使等式不成立，则称为过渡约束，则等式会自动调整
调整情况:

                1.如果这七个值中没有auto的情况，则浏览器会自动调整margin-right值以使等式满足
                2.这七个值中有三个值可以设置为auto： width、margin-left、margin-right
                3.如果某个值为auto，则会自动调整为auto的那个值以使等式成立

                4.如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
                5.如果将三个值设置为auto，则外边距都是0，宽度最大
                6.如果将两个外边距都设置为auto，宽度固定值，则会将外边距设置为相同的值

所以我们经常利用这个特点来使一个元素在其父元素中水平居中，示例：margin：0 auto

元素的垂直方向的布局

默认情况下父元素的高度会被内容撑开

      子元素是在父元素的内容区中排列的。
           如果子元素的大小超过了父元素，则子元素会从父元素溢出
           使用overflow属性来设置父元素如何处理溢出的元素

overflow可选值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden：溢出内容将会被裁剪不会显示
scroll：生成两个滚动条，通过滚动条来查看完整的内容
auto：是根据需要生成滚动条

行内元素的盒子模型

      行内元素不支持设置宽度和高度
      行内元素可以设置padding，但是垂直方向padding不会影响布局
      行内元素可以设置border，垂直方向的border不会影响页面的布局
      行内元素可以设置margin，垂直方向的margin不会影响布局

display 用来设置元素显示的类型（不占据页面的位置）
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素（既可以设置宽高，又不会独占一行）
table 将元素设置为一个表格
none 元素不再页面中显示
visibilty 用来设置元素的显示状态
可选值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据页面位置

盒子大小

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
boxing-sizing 用来设计盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边框和边距的总大小

文字的相关样式

color 用来设置字体的颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族（字体的格式）
可选值：
serif：衬线字体
sans-serif：非衬线字体
monospace：等宽字体
-指定字体的类别，浏览器会自动使用该类别下的字体
font-family 可以同时指定多个字体，多个字体间使用，隔开字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

font可以设置字体相关的所有属性
语法：
font：字体大小/行高字体族
行高可以省略不写，使用默认值

font-weight 字重字体的加粗
可选值：
normal 默认值不加粗
bold 加粗
100-900 九个级别（没什么用）

font-style 字体的风格
normal 正常的
italic 斜体

文体的水平和垂直对齐：

text-align 文体的水平对齐
可选值：
left 左侧对齐
center 居中对齐
justify 两端对齐

vertical-align 文本的垂直对齐
可选值：
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

text-decoration 设置文本修饰
修饰值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线

white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白