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

             

嵌套规则：

1.  块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，他只能包含其他内联元素；
2. 块级元素不能放在p里面
3. 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如：h1、p、dt
4. li 内可以包含div
5. 块级元素与块级元素并列，内联元素与内联元素并列

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：不允许有浮动对象

知识点回顾：

1. maigin：0 auto； 实现块级标签水平居中
2. 块级标签与内联标签的转换：display：inline-block | inline|block
3. block：独占一行；可以设置width、height属性；可以设置margin 和 padding属性
4. inline：不会独占一行，多个相邻的行内元素会排列在同一行；设置 width、height属性无效；margin 和 padding 属性只在水平方向有效果，竖直方向不会产生边距效果。
5. inline-block：将对象呈现为 inline 对象，但对象内容作为block对象呈现。之后的内联对象会被排列在同一行内。有block的宽度高度特性又有inline的同行特性