CSS设计简介
第0章：css设计简介。
第1章：介绍(X)HTML和CSS相关的核心基础知识。
第2章：深入讲解CSS的核心机制——盒子模型。
第3章：讲解CSS布局的重点和难点——浮动和定位。
第4章：介绍了链接和导航。
第5章: 竖x;
border-color:#000000;
margin:20px; padding:5px;
background-color:#FFFFCC;
}
第2课 深入理解盒子模型
属性值的简写形式
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；
如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；
如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。
第2课 深入理解盒子模型
属性值的简写形式
border-color: red green
border-width:1px 2px 3px;
border-style: dotted dashed solid double;
第2课 深入理解盒子模型
内边距（padding）
#outerBox{
width: 128px;
height: 128px;
padding: 20px 20px 10px; /*上 左右 下*/
padding-left: 10px;
border: 10px gray dashed;
}
第2课 深入理解盒子模型
外边距（margin）
#outerBox{
width: 128px;
height: 128px;
padding: 20px 20px 10px; /*上 左右 下*/
padding-left: 10px;
border: 10px gray dashed;
}
body{
border:1px black solid;
background:#cc0;
}
第2课 深入理解盒子模型
HTML与DOM
第2课 深入理解盒子模型
标准文档流
第2课 深入理解盒子模型
<div>标记与<span>标记
div：块级元素 （block）
span：行内元素（inline）
第2课 深入理解盒子模型
盒子在标准流中的定位原则
实验1——行内元素之间的水平margin
{
margin-right:30px;
background-color:#a9d6ff;
}
{
margin-left:40px;
background-color:#eeb0b0;
}
span 2
span 1
margin-right
margin-left
第2课 深入理解盒子模型
盒子在标准流中的定位原则
实验2——块级元素之间的竖直margin
<body>
<div style="margin-bottom:50px;">块元素1</div>
<div style="margin-top:30px;">块元素2</div>
</body>
块元素2
块元素1
块元素1
块元素2
margin-bottom:50px
margin-top:30px
第2课 深入理解盒子模型
盒子在标准流中的定位原则
实验3——嵌套盒子之间的margin
第2课 深入理解盒子模型
<body>
<ul>
<li>第1个列表的第1个目内容</li>
<li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
</ul>
<ul>
<li>第2个列表的第1个项目内容</li>
<li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li>
</ul>
</body>
CSS中的几何题
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
}
li {
color: black;
background: #aaa
CSS课件 来自淘豆网m.daumloan.com转载请标明出处.
