1、概述
1、盒子模型：元素什么样
页面元素的大小
边框
与其他元素的距离
2、定位机制：元素放哪儿
文档流
浮动定位
层定位2、盒子模型、overflow属性、border属性
1、盒子模型
页面上的区域、图片、导航、列表、段落，都可以是盒子
盒子模型的组成：height，width，border，padding，margin content
除了content都是盒子的属性
#box{
width：100px;
height:100px;
border: 1px solid;
padding:20px;
margin:10px;
}
盒子的border,padding,margin的四周可以单独设置
2、overflow属性：当内容溢出盒子框时，overflow属性取值
hidden:超出部分不可见
scroll：显示滚动条
auto：如果有超出部分，再显示滚动条，没有就不显示
3、border属性
border：width style color 按这个顺序直接列出border的所有属性
border-width:px,thin,medium,thick
border-style:dashed,dotted,solid,double
border-color:
可以分别设置四个方向上的border属性：top,right,bottom,left
div{
border-bottom:1px,solid,red;
}
水平分割线可以通过设置高度为1的border来实现：
.line{
width:500px;
height:1px;
border-top:1px solid #e5e5e5
}
3、padding和margin属性
1、对浏览器的默认padding和margin属性清零
*{
margin：0;
padding：0;
}
2、padding和margin可以取值px，%
padding: 1px 2px 3px 4px 按照上右下左的顺序
padding：1px 2px 上下是1px，左右是2px
3、margin的合并：垂直方向上合并，水平方向不合并
合并的时候两个盒子取大的那个margin
4、将盒子中的content水平居中
图片，文字水平居中 text-align:center;
div水平居中 margin：0 auto; 浏览器自动计算
如果盒子position：absolute 则失效
5,、消除盒子间空隙的方法：
font-size:0;
4、CSS定位机制——文档流定位
1、元素的分类
1)block:独占一行，元素的height,width,margin,padding都可以设置
常见的block元素：<div> <p> <h1>~<h6> <ol> <ul> <table> <form>
display:block;
2)inline:
不单独占一行
width，height不可设置
width就是它包含的文字或者图片的宽度，不可改变
常见的inline元素：<span> <a>
display:inline;
inline元素之间有一个间距问题
3）inline-block:同时具有inline元素，block元素的特点
不单独占一行
元素的height,width,padding,margin都可以设置
常见元素：<img>
display:inline-block;
2、元素的互相转换
display:none; 元素不会被显示
display:block;
display:inline;
display:inline-block;
总结：文档流就是，从上到下，从左到右，输出文档内容
block：从上到下，独占一行
inline：从左到右，占据一行例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
#nav{
margin: 0 auto;
width: 300px;
font-size: 0;
}
a{ /*否则无法设置高度宽度等*/
display: inline-block;
/*盒子的样式*/
width: 80px;
height: 30px;
border-bottom: 1px solid #ccc;
/*超链接文本*/
font-size: 14px;
text-align: center;
line-height: 30px;
text-decoration: none;
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-left-color: orange;
border-top-color: orange;
border-right-color: orange;
}
/*父元素定义font-size:0 去掉行内块元素水平方向空白；子元素定义vertical-align 属性去掉行内块元素垂直方向空白*/
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>5、CSS定位机制——浮动定位
1、float属性：left,right，none
none不浮动
实现两个盒子的并列显示
2、clear属性：left，right，both
用于将div安置到期望的位置，不受浮动元素的影响
example:实现整个页面的四行三列
6、CSS定位机制——层定位
1、position属性：对每个图层进行精准定位操作
position：static; 没有定位，元素出现在正常的流中,所有定位属性无效
position：fixed; 固定定位，相对于浏览器窗口的定位，不会随着滚动条滚动，广告
position：relative; 相对定位，相对于其直接父元素定位，其文档流中的原位置仍存在
position: absilute; 绝对定位，相对于定义为absolute或者relative的第一个父元素定位，
如果没有，则相对于body定位，文档流原位置不存在
2、通过这些属性定位：
top,bottom,left,right,z-index
一般做法就是，父元素为realative，子元素为absolute,这样子元素可以随着父元素移动，而相对位置不变