CSS盒模型是CSS 可视化格式化系统的基石，它是理解样式表如何工作的核心概念。盒模型用于元素定位和页面布局。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
基本语法格式: <style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;
}
</style>
<body>
<div>
我是盒子
</div>
通过上述的代码可以得到一个最基本的盒子模型
二 、内边距padding
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性
CSS padding 属性定义元素边框与元素内容之间的空白区域
padding的使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
切记padding的赋值不能为负数
例:
padding: 10px;//四个方向
padding: 10px 20px; //上下 左右
padding: 10px 20px 30px;//上 左右 下
padding: 10px 20px 30px 40px;//上 右 下 左
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
padding: 0 20px;
margin: 50px;
三 、边框border
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线
切记border的赋值可以为负数
Border常用属性border-style,boder-width,border-color
例:
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;
}
制作三角形的小技巧:如果将width 和height改为0,并选择border-left, border-right, border-top的颜色为透明,则会显示一个三角形。
四、外边局合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
例：<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.div1{
margin-bottom: 100px;
}
.div2{
margin-top: 50px;
}
</style>
<body>
<div class="div1">篮球</div>
<div class="div2">足球</div>
</body>
结果显示为篮球和足球的外边距为100px，取了较大值作为连个边框的距离。
五、布局
默认的浏览器中，文档的布局是将文件元素从上到下、从左到右的格式布局，块级元素从上到下，行内元素从左到右依次排列。
例：<style type="text/css">
.out{
width: 1000px;
height: 150px;
border: 1px solid red;
margin: 50px 50px;
}
.in{
height: 120px;
background: green;
padding:10px;
}
</style>
<body>
<div class="out">
<div class="in">内容</div>
</div>
结果显示为in的框套在out框的里面，切in在没有写入width的情况下，默认与其父级元素的width一致
六、CSS 定位机制
CSS块级元素和行内元素的转换
div{
display:none 不显示
display:block 1.转换为块级元素2.显示
display:inline 转换为行内元素
display:inline-block 不常用
}
CSS 有三种基本的定位机制：普通流、浮动和绝对定位
CSS positon属性
static 静态的
relative 相对(偏移)
absolute 绝对(脱离)
fixed 固定(脱离)
例:.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
/*//相对定位*/
position:relative;
top: 50px;
left: 50px;
/*//绝对定位*/
position: absolute;
top: 50px;
left: 50px;
}
.out{
padding: 100px;
border: 1px solid red;
height: 300px;
position: relative;
}
<body>
<div class="out">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
相对定位:框子转移后,原来的位置没有被占有.
绝对定位:框子转移后,原来的位置被占有且相对最初的包含块来定位完后成为一个块级元素.
固定定位
可以用于网页两边的固定栏
例：<style type="text/css">
.left,.right{
width: 100px;
height: 100px;
border: 1px solid black;
}
.left{
float: left;
position: fixed;
top: 100px;
left: 0;
}
.right{
float: right;
position: fixed;
bottom: 100px;
right: 0;
}
</style>
结果显示为左右两个不动的框
CSS水平和垂直居中的几种实现方法
水平居中：text-align,margin 0 auto,定位
垂直居中：line-height，vertical-align，margin,定位
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，它会脱离文档流
语法规则：.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
clear: both;
}
其中clear以清除元素为中心，将后面的元素换行，拉倒其后面