CSS

CSS的引入方式

方式一：直接在html的标签上加入style属性，多个样式用分号分割
方式二：写在Head标签里面，用一个style标签包裹（当下的主流）
方式三：用链接导入外部的文件

CSS的选择器

标签选择器：直接使用标签名

类选择器:先在标签中加入一个 class属性，然后使用.class即可

ID选择器：通过id名来进行关联，在标签中先加入一个id属性，然后用#id名来访问

CSS的盒子模型

由四个部分构成： 元素内容, 内边距, 边框, 外边距

     width: 100px;height: 100px;

宽高实质上是盒子模型中 元素内容区域 的大小

border: 10px solid white;

给盒子模型设置边框, 必须要有宽以及边框类型

背景色 = 元素内容区域+内边距

外边距合并

如果两个元素/标签, 在一个页面上在"垂直"方向上"紧"相邻, 那么他们的外边距会产生合并 —> 外边距合并

谁大(高度)听谁的

标签的分类

块级元素

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布  
块级元素, 可以设置宽高和内外边距
宽度可以继承, 高度不可继承   
通常使用块级元素来进行大布局（大结构）的搭建      
块级元素是指本身属性为display:block;的元素。常见的块级元素：div、p、h1、 h2、 h3、 h4、 h5、 h6，ol、ul、dl、li、form、table

行级元素

和其他行级元素从左到右在一行显示 
行级元素: 不能设置宽高, 仅仅能设置左右方向的内外边距
宽高都非继承而来, 由本身内容大小决定    
通常使用行级元素来进行文字、小图标（小结构）的搭建。 
行级元素只能容纳文本或者其他行级元素（不要在行级元素中嵌套块级元素）
行级元素是指本身属性为display:inline;的元素。常见的行级元素：
span 常用行级容器，定义文本内区块;  
a 锚点;
b 加粗;     strong 加粗强调;    i 斜体;    strike 中划线; 
br 强制换行;   u 下划线;
textarea 多行文本输入框; 
input 输入框;
select 下拉列表;
img 引入图片

行内块

本质属于行级元素: 可以与其他行级元素共处一行
可以设置宽高、内外边距属性为display:inline-block;的元素。常见的行内块元素：
input 输入框
img 引入图片
select
button

可以通过手动的操作来改变display中的属性，但不推荐，一般使用浮动来解决问题

浮动

标准流：html代码对应的标签根据元素特性，从上到下，从左到右来排列

浮动可以使一个标签在显示的时候脱离标准流，漂浮在页面上，即可以实现两个块级标签在同一行来显示

// 浮动的特点:
1：浮动只影响后面的元素
2：连续浮动一行显示
3：浮动以元素顶部为基准对齐
4：浮动可是实现模式转换

语法：float:left

清除浮动：如果元素浮动, 会导致后面的元素上移, 会发生位置覆盖. 但是有的时候,我们不想这个覆盖发生, 那么就可以给被覆盖的区域加一个清除发动的效果, 就不会覆盖