盒子模型
盒子模型的概念
存在网页中的各种元素
div：容器，装有内容的盒子通过嵌套排列形成我们需要的页面
高度：height
宽度：width
内边距：padding
外边距：margin
元素：element
边框：border
宽度：长度值
max-width,min-width
宽度值是根据父元素的值来确定
高度：height
哪些文字可以设置width和height：
－块级元素
<p>,<div>,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt><dd>
-替换元素
该浏览器根据其标签的元素与属性来判断显示具体的内容
<img>,<input>,<textarea>等：如果既有属性设置，又有css，跟着css走
边框属性：
border-width
thin | mdium | thick | 长度值
border-color
border-style：默认情况是none
solid，dotted….
边框还可以用top,bottom,left,right来指定是哪边的边框
border:［宽度］［样式］［颜色值］
用空格隔开
padding属性：
长度值 ｜ 百分比
当有padding的时候，width和height也要加
padding：值1； //四个方向都为值1
padding：值1 值2； //上下＝值1，左右＝值2
padding：值1 值2 值3； //上＝值1，左右＝值2，下＝值3
padding：值1 值2 值3 值4； //上＝值1，右＝值2，下＝值3，左＝值4
margin值
可以为负数
分配方式和padding是一样的
margin：auto：根据它的父元素水平居中
margin会有一个合并，合并显示的是最大的那个div距离
盒子模型计算：
盒子在页面中所占的宽度：是由左边距＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边距组成
盒子在页面中所占的高度：是由上下边距＋上边框＋上填充＋内容高度＋下填充＋下边框＋下边距组成
IE模型的width和height是全部的width和height，和标准模型不一样
display属性
－inline
元素将显示为内联元素，元素前后没有换行符
－block
元素将显示为块级元素，元素前后没有换行符
行内元素不具有宽高
－inline-block
行内块元素，元素呈现为inline，具有block相应特性
－none
此元素不会被显示
<!DOCTYPE html>
<html lang=“en”>
<head>
<title></title>
<meta charset=“UTF-8”>
<style type=“text/css”>
.course{background-color: #f2f4f6;width: 220px;border:1px #ececec solid;margin:0 auto;}
.list1{width:100%;height:90px;background-color:#040a10;padding-top:60px;}
.content{font-size:20px;color:#fff;font-weight:bold;text-align:center;}
.list2{font-size:14px;border-bottom:1px #d9ded1 solid;margin:0px 15px;padding:10px 5px 5px 5px;line-height:1.5em;}
.special{color:#93999f;font-size:10px;}</head>
<body>
<div class=“course”></div>
<div class=“list1”>
<p class=“content”>前端课程排列</p>
</div>
<div class=“list2”>
<p>HTML＋CSS基础课程</p>
<span>466609</span>
</div>
<div class=“list2”>
<p>HTML＋CSS基础课程</p>
<span>466609</span>
</div>
<div class=“list2 special”>
<p>HTML＋CSS基础课程</p>
<span>466609</span>
</div></body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。