css 做美化的（层叠样式表）

写css三种方式：

1：内联写法

2: 内部写法

css 选择器：

  标签选择器 
  作用：一般用于清除标签的默认样式

  
  class选择器  .
  class="名字"

  id选择器（不常用）     #
  id="名字"

  区别：
    1：id使用的时候不要出现重复，全局只有一次

  *（通配符）选择器
  作用：一般用于清除标签的默认样式

  伪类选择器
  hover
  before after 用于绘制图标，1像素的线条
  :first-child
  :last-child
  :nth-child


  选择器 可以合写

  空格 表示嵌套关系
  + 表示同级关系
  > 表示嵌套关系


  css 优先级

3：外链 


盒子模型

margin 外边距

padding 内边距

border 边框

content 内容

盒子模型的宽高计算规则：

实际宽高（肉眼看到的） =  你设置的content  宽高 + padding 和 border

box-sizing: border-box;

改变盒子模型的计算规则：

你设置的content  宽高 = padding 和 border + content （适当减小）


浮动

目的：让块元素排在一行

float: left, right

清除浮动
clear: both;

父元素高度怎么来的？

1：大部分情况下是被子元素撑开
2：你自己设置的height

问题：

如果父元素中的子元素设置了浮动，那么父元素将没有高度 0

如何解决：

1：手写高度 height  父元素
2：清除浮动 clear: both; 父元素 下面的那个元素
3：overflow: hidden; 父元素


display：实现块标签和行标签的相互转换
inline 转换为行  可以放在一行，不能设置宽高
block  转换为块  不可以放在一行，可以设置宽高
inline-block  转换行内块标签   可以放在一行，可以设置宽高

font-size: 0


水平居中：
text-align 块div中内容的对齐方式
padding-top
margin: 0 auto;  让块div在其他div中居中

垂直对齐：
line-height 设置单行文字的垂直对齐（数值应该是当前元素的高度）
padding-top