标签：
CSS框模型，浮动，定位以及其他属性
1、CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
* {
margin: 0;
padding: 0;
}
padding（10px,10px,10px,10px）
四个值：上右下左顺时针方向
三个值：上，左右，下
两个值：上下，左右
一个值：四个方向
margin可以有负值
padding没有负值
百分比也可以，在响应式布局里常用
rem单位可以自适应浏览器
边框：宽度，样式，颜色
透明：transparent
外边距合并：在上下都有外边距的时候，比如上一个下边距是100，下一个块的上边距是200，只会显示200，显示为较大那个
2、CSS display:属性
display:属性规定元素应该生成的框的类型。
none 不显示。 元素位置都没有了
block 转换为块级元素，此元素前后会带有换行符。
inline 行级元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
可以把块级元素转换为行内元素，也可以反过来，有时候解析错误，不知道该显示那种属性，慎用
none常用，不显示某些内容
3、CSS定位机制：
普通流：也叫文档流
浮动：浮动会脱离了标准文档流，有好处也有坏处，可以转换为BFC环境
绝对定位:脱离了文档流
脱离文档流，会浮于上层！
浮动：float
left 左浮动。 （可以并排到一行，紧挨着横向排列）
right 右浮动。
none 元素不浮动
inherit 规定应该从父元素继承 float 属性的值 （忽略）
清除浮动：clear
clear：both清除两边的浮动
4、BFC和IFC
BFC(Block formatting context)：块级格式化上下文。
触发BFC环境：①触发（声明）②overflow：hidden（在父级元素里边定义）
IFC(inline formatting context)：即行内格式化上下文。
overflow: hidden;
这里设置触发BFC环境，这样在用里边有块元素用了浮动或绝对定位的时候，脱离文档流的时候，也会把他正确的框起来，下边会有正确的格式显示
5、CSS 定位：position 属性（四种）
static ：静态定位，无定位
relative ：相对定位，相对于原来位置偏移，即相对于本身之前的位置
absolute ：绝对定位，相对最初的包含块进行定位，最近的那个定位元素，脱离文档流。
绝对定位，如果没有设置初始包含块，会相对于body部分
只有两个div中有三个div层叠在上边的时候才会用到
fixed ：固定定位，也会脱离文档流，针对屏幕进行定位。
小广告都是用的小广告
右边进度条在拉动的时候，还是显示在那个位置。
☆CSS定位属性
溢出属性：overflow: 默认会显示在边框外边
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 始终有进度条
auto 溢出出现进度条
垂直对齐方式：vertical-align 设置元素的垂直对齐方式。
堆叠顺序：z-index 设置元素的堆叠顺序。
透明度：opacity:0.0-1.0,在设置
背景透明：background：rgba,（0,0,0,0.5） a是0-1，模糊效果
写在hover效果里边
div {
background: url("京东LOGO.png");
width: 168px;
height: 81px;
}
div:hover{
opacity: 0.5;
}
鼠标样式：
cursor：move
可见：
visibility:hidden：即使不可见，仍然会占用空间
display：none，文档和空间都不存在，类似脱离了文档流，不会占用空间
国内设计喜欢用px，外国的喜欢用em和rem
IE无法调整使用px作为单位的字体大小
火狐浏览器能够调整px和em,rem但是90%中国网民使用IE，或者IE内核
em：相对body继承，换算麻烦
rem：不会继承，相对根元素HTML
中国：
手机端：px
PC端：rem，自适应屏幕大小
现在自适应各种屏幕大小，现在可以用autoSize.js（腾讯的）
1em = 16px;
1rem = 16px;
最大小宽度高度：
max-height
☆堆叠顺序：z-index 属性设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
靠上，左右居中
margin: 0 auto;
font-style: oblique;字体倾斜
font-weight: bolder;字体加粗
☆引用外部文件：引用外部文件 ./ 代表上一级（父级目录） ../代表上两级
☆导航
无序列表，去掉小圆点，浮动横向排列，
无序列表的行高设置为导航的 高度，设置鼠标移动效果
-----------------------------------------------------------------
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
nav{
width: 1000px;
height: 50px;
background: greenyellow;
}
ul{
margin: 0;
padding: 0;
}
li{
/*border: 1px solid red;*/
list-style: none;
float: left;
/*margin: 20px;*/
padding: 0 20px;
line-height: 50px;
}
li:hover{
background: royalblue;
}
</style>
</head>
<body>
<nav>
<ul>
<li>首页</li>
<li>家电</li>
<li>母婴</li>
<li>产品</li>
<li>联系我们</li>
</ul>
</nav>
</body>
-----------------------------------------------------------------
☆这些属性都可以在API里边CSS 参考手册：CSS属性
标签：
原文地址：http://www.cnblogs.com/chenyuanqiu2008/p/5463983.html
