◆CSS盒模型
包含：element元素 padding内边距 border边框 margin外边距
* 内边距padding
padding是简写属性 设置值时不能为负值 值的顺序是top上→right右→bottom下→left左
设置时如不全部定义则 top的值影响right和bottom right的值影响left
* 边框border
属性：style width color(默认值为透明色transparent,可以利用这一点来做三角形)
border足够粗 div足够小 并且其他三遍为透明色时transparent即可做出三角形
*外边距margin
margin也是简写属性 除了设置值时可以为负值外，其余的与padding一样
外边距合并时，只显示值最大的值
我们可以利用margin｛0 auto｝来实现元素的水平居中
◆CSS定位positioning
在CSS中一切皆为框
* display属性：none（相当于元素完全不存在，不占用文档的空间） block（显示为块级元素，自动带有换行符） inline（显示为内联元素，没有换行符） inline-block（行内块级元素，建议少用）
* CSS定位机制;普通流（标准流） 浮动 绝对定位
* CSS定位属性: 有四种不同的定位类型
①static 静态定位 也就是没有定位
②relative 相对定位（偏移） 相对于元素原来的位置进行偏移，其位置不会被占用｛position：relative;top:50px;left:50px｝
③absolute 绝对定位（脱离文档流）
《1》元素框从文档流中完全删除，原位置被占据
《2》相对于包含块进行定位，可以是文档中的另一个元素或初始包含块。绝对定位的元素是相对于最近的祖先元素，没有时才是相对于最初的包含块
《3》生成一个块级框，不论原来是块级元素还是行内元素
④fixed固定定位 （脱离文档流） ｛float:left;position:fixed;top:300px;left:0｝多用于来实现侧边栏导航
* CSS浮动float：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。它的属性：left right none
* CSS clear 实现图像的左右不出现浮动 属性：left right both

◆BFC与IFC环境：他们既不是元素也不是属性
*BFC：块级元素 块级格式化上下文 需要触发 是一个独立的区域，区域内发生的事与外部毫不相干
规则：① 内部的Box会在垂直?向，?个接?个地放置。
② Box垂直?向的距离由margin决定。属于同?个BFC的两个相邻Box的margin会发?重叠
③ 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反。即使存在浮动也是如此。
④ BFC的区域不会与float box重叠。
⑤ BFC就是??上的?个隔离的独?容器，容器??的?元素不会影响到外?的元素。反之也如此。
⑥ 计算BFC的?度时，浮动元素也参与计算
生成BFC的元素：
① 根元素
② float属性不为none
③ position为absolute或fixed
④ display为inline-block, table-cell, table-caption, flex, inline-flex
⑤ overflow不为visible（一般较多的时候使用overflow：hidden，因为对页面的损失率最小）
*IFC：行内元素 行内格式化上下文 不需要触发
形成IFC：①外层使用vertical-align（元素垂直居中）
②一般是在最大的元素使用vertical-align
◆透明度opacity
值是在0-1.0对应IE8 filter：1-100
应用于前景，背景时使用rgba｛｝ div:hover｛background:rgb（0，0，0，0）｝
◆cursor鼠标光标
◆导航
<nav>
<ul>
<li>...</li>
</ul>
</nav>
注意要把ul的margin和padding重置为0
line-height居中对齐
如果是横向列表则li｛fioat:left｝间距用padding来设置
◆CSS3
个浏览器前缀; -webkit- 谷歌和苹果
-o- 欧朋
-moz- 火狐
-ms- IE9
* border-radius：圆角 值的顺序是顺时针对角关系
* box-shadow：h-shadow水平 v-shadow垂直 模糊程度 颜色
* 2D和3D

初入web知识点（五）