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