◆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