02 前端篇（选择器和属性）
http 协议：
超文本传输协议，基于请求/响应模式
无状态协议（短连接，无记忆）
url：统一资源定位符
post 有请求体， get 没有请求体
referer：请求来自那个页面。放在请求头部
Content-Type：url编码方式，放在请求体里面的
css：Cascoding Style Sheets，层叠样式表
四种引入方式:
行内式
嵌入式
链接式（推荐）
导入式
css 的选择器（selector）：
基础选择器：
* 通用元素选择器
E 标签选择器
.info 和 E.info ：class选择器。匹配所有class属性中包含info的元素 .info {color: Yellow} p.info {color: Yellow}
#info ：id 选择器
组合选择器：
E,F ：多元素选择器，同时匹配所有E元素或F元素，用逗号分隔
E F：后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E>F：子元素选择器，匹配所有E元素的子元素F
E+F：毗邻元素选择器。匹配所有紧随E元素之后的同级元素F
属性选择器：E[att]：匹配所有具有att属性的元素，不考虑它的值
E[att=val]：匹配所有att属性等于val的元素
E[att~=val]：匹配所有att属性具有多个空格分隔的值，其中一个值等于val的元素
E[att^=val]：匹配属性值以指定值开头的每个元素
E[att$=val]：匹配属性值以指定值结尾的每个元素
E[att*=val]：匹配属性值中包含某个特定值的每个元素
伪类选择器： ：before
：after
嵌套规则：
- 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，他只能包含其他内联元素；
- 块级元素不能放在p里面
- 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如：h1、p、dt
- li 内可以包含div
- 块级元素与块级元素并列，内联元素与内联元素并列
id 用 #， class 用 . 。
id 和 class 的区别是 ：id是唯一的，class 可以给多个标签
css 常用属性：
颜色属性：1. 颜色单词 2. #cc3399 3. rgb（0,0,0）4. rgba(155,200,40,0.8)
字体属性：font-size 、font-style、 font-family、font-weight
背景属性：background-color、background-img：url（12.jpg）；
background-repeat：no-repeat/repeat-x/repeat-y（y轴重复）/repeat；
background-size：300px 300px；
background-position：top center；
综之：background：url（“12.jpg”）no-repeat 100px 100px red;
文本属性：text-align：center；
line-height：100px；
letter-spacing：5px；
word-spacing：10px；
text-transform：capitalize
边框属性：border-style：solid；
border-color：chartreuse；
border-width：20px；
简写：border：30px rebeccapurple solid；
列表属性：ul，ol{
list-style：decimal-leading-zero；
list-style：none/circle/upper-alpha/disc；
}
display属性：none、block、inline
盒子模型（外边距和内边距）：
border：围绕在内边距和内容外的边框
padding：控制内容与边框的距离
margin：用于控制元素与元素之间的距离
content：内容，显示文本和图像
总结：
块级标签：<div> <p> <h1-6> <ul> <ol> <dl>
内联标签：<a> <img> <input> <span> <select> <textarea>
正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序进行排版的布局流。
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按照文档流中不存在该元素重新布局。
float：浮动（非完全脱离）
如果上一个标签也是浮动标签，就会紧随在上一个标签后面
如果上一个标签不是浮动标签，就会保持垂直距离不变，一直顶在最左面
position： absolute| fixed 定位（完全脱离） relative|static（不脱离文档流）
static：默认值static，无特殊定位，对象遵循正常文档流
relative：对象遵循正常文档流，但将依据 top、bottom、left、right等属性在正常文档流中偏移位置（以原来的位置为基准）
absolute：对象脱离正常文档流，以最近的非 static属性的父亲位置为基准进行移动
fixed：固定在某个位置，不论窗口是否滚动
clear：none|left|right|both
none：默认值，允许两边都有浮动对象
left：不允许左边有浮动对象。如果有了，我下去
right：不允许右边有浮动对象
both：不允许有浮动对象
知识点回顾：
- maigin：0 auto； 实现块级标签水平居中
- 块级标签与内联标签的转换：display：inline-block | inline|block
- block：独占一行；可以设置width、height属性；可以设置margin 和 padding属性
- inline：不会独占一行，多个相邻的行内元素会排列在同一行；设置 width、height属性无效；margin 和 padding 属性只在水平方向有效果，竖直方向不会产生边距效果。
- inline-block：将对象呈现为 inline 对象，但对象内容作为block对象呈现。之后的内联对象会被排列在同一行内。有block的宽度高度特性又有inline的同行特性
