Web：前门进后门出（HTML+CSS>小笔记）

||-|---我的CSS---|-||

CSS与JS、JQ的链接方式：行内式（优先级最高）、内嵌式（次之）、外链式（最常用）、导入式（跟外链式差不多）

绝对相对定位法：
position：relative 相对定位：相对于自己的。top（往下走）bottom、left、right
positive：absolute 绝对定位：浏览器第一屏的位置，滑动屏幕不改变位置。
position:fixed 相对于浏览器窗口定位，不固定在页面位置，而是随着窗口移动。
绝对相对：父级：relative相对   子级：absolute绝对 （父级位置固定，子级位置相对于父级而定位）
-----------------------------------------------------------------------------------------------------------------------------------------------
盒子模型：box modle
盒子宽度=width+2*padding+2*border；
盒子高度=height+2*padding+2*border  IE6多加margin
margin：外边距 border：边框 padding：内边距
box-sizing：加在不想改变盒子大小的那个元素里。
-----------------------------------------------------------------------------------------------------------------------------------------------
盒子浮动与清除：
水平结构的每个盒子都要浮动。
第二行要清除浮动（clear:both），控制本行不受上方浮动的影响。
（如果四个盒子要成"田"字形，A/B盒子加浮动，C盒子清除浮动，再C/D盒子加浮动，若C不清除浮动又没加浮动则会跑到A的位置）
当盒子不设置width和height时，盒子大小会由里面的“地面上的”内容决定，浮动表示浮在空中，所以盒子大小为0，则后面的元素会挤到上面去了。
强力清除：（除了clear:both的清除方法外）
为了避免后面的元素挤上去。
1.在有浮动的盒子的父级盒子里的css加overflow:hidden
2.只要盒子内有浮动的元素，都可以在Hmtl里加clearfix（命名而已，不是固定）
CSS样式则如下：
.clearfix:after{
content: "";
height: 0;
line-height: 0;
clear: both;
visibility: hidden;
font-size: 0;
display: block;
}
-----------------------------------------------------------------------------------------------------------------------------------------------
表格边框合并：
HTML中的标准样式
<table>
<tr><th><th/><tr/>
<tr><td><td/><tr/>

<table/>

规范点的格式：

<table>
<thead>
<tr><td><td/><tr/>
<thead/>
<tbody>
<tr><td><td/><tr/>
<tbody/>
<table/>

一个tr代表是一行，th是表中的标题、表头、比较重要的东西，td是内容、次之的东西
CSS中
table,tr,td,th{border-collapse:collapse ;}（无视边框，外边距）
-----------------------------------------------------------------------------------------------------------------------------------------------
背景图定位法：
1.单词法（只能定位九个特殊点）：水平 left center right/ 垂直 top center bottom
2.坐标法：先X轴，后Y轴
3.单词坐标法（两个定位法的结合，必须有一个点是特殊位置，还是一样的X/Y轴的顺序） lg：right(x) 50px(y)   / 50px(x) top(y)
背景图拉伸：background-size:cover
-----------------------------------------------------------------------------------------------------------------------------------------------
文本表单：
外边框：border：粗细 线段类型 颜色    lg：border:1px solid red
border-style：边框类型          border-width：边框粗细           border-color：边框颜色     无色（透明、透底色）：transparent
placeholder：文本提示语       

文本域<textarea>......</textarea>
下拉表单<select><option>.....</option></select>


-----------------------------------------------------------------------------------------------------------------------------------------------
背景的相关属性：
基本属性：background-color（颜色）；background-image（背景图）；background-repeat（方式）；background-position（位置）
缩写：background:background-color ~-image ~-repeat ~-position
新增属性： background-origin:背景图片的起点。border-box（边框开始）；padding-box（默认，padding位置开始）；content-box（内容区域开始）
 background-clip:超出切掉。border-box（默认）；padding-box；content-box（元素大小 小于背景图大小时才看得出效果）
background-size:指定背景图片的尺寸大小，auto；


过渡transition编写格式：本体元素（始态）{属性；transition:过渡属性（all）  速度 时间  延迟;}（主要形式是transition:{all 2s}）
       触发效果的元素（末态）{属性}
transition-property设置过渡属性(如：坐标、长宽、旋转角度、颜色、透明度，等等。里面有些属性可能会包含多个值，如旋转角度，除了度数外还要表明旋转的中心坐标。除了这些常见的属性外，还有一类叫滤镜属性，如模糊、锐化等。)
transition-duration：设置过渡速度用来控制速度linear(匀速)  ease-in (加速)
transition-timing-function：设置过渡时间  1s
transition-delay：设置过渡延时  超过时间后执行动画


------------------------------------------------------------------------------------------------------------------------------------------------
伪类属性：（html里面不存在的一个“东西”，利用CSS去辅助新建一个元素， 好处：摆脱命名词穷的情况·.·||）
XXX:nth-child(n)          XXX是盒子里面的小元素的名字（子元素顺着数下去的第几个，不管是不是同类标签，不过要同级）
YYY:nth-of-type(n)     YYY是兄弟同级元素的名字（同类标签数下去）
AAA：after                   在AAA后面新建一个元素
BBB：before                 在BBB前面新建一个元素
-----------------------------------------------------------------------------------------------------------------------------------------------
小小知识点：
透明度：opacity 0.5； 针对IE浏览器：filter: alpha(opacity:50)；
鼠标指针变形，光标显示手指：cursor: pointer;（任何元素上都能使用，行级元素、块级都行）
input去掉"选中"时的边框：outline：none
input 中的 "text“格式时，提语：placeholder="提示语"
边框圆角：border-radius:Xpx;
超出边界 隐藏：overflow：hidden；
提高元素"层数"（把底层的东西显示出来）：z-index：1  2  3......
文本超出变省略号：text-overflow：ellipsis