第一节:盒模型基本概念
盒模型:
相框边框 - > border
画和相框边框的距离 -> padding
相框之间的距离 -> marg
border-width 边框宽度(粗细)
border-color 边框颜色
border-style 边框样式
用 padding 设置内边距
用 margin 设置外边距
第二节:网页布局与盒模型
第三节:盒子在标准流中的定位
、
盒子的浮动与定位
盒子浮动float
<style type="text/css">
.parent{
padding:5px;
background-color: yellow;
border: 1px solid red;
}
.d1{
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
margin:5px;
background-color: blue;
border: 1px solid blue;
}
p{
margin:5px;
background-color: green;
border: 1px solid green;
}
</style>
<div class="parent">
<div class="d1">盒子A</div>
<div class="d2">盒子B</div>
<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台(即JavaSE, JavaEE, JavaME)的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性,广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网,同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下,Java更具备了显著优势和广阔前景。</p>
</div>
默认 float:none d1和d2float没设置或者设置为none
.d1{
float:none;
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
float:none;
margin:5px;
background-color: blue;
border: 1px solid blue;
}
效果图如下
.d1{
float:left;
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
float:none;
margin:5px;
background-color: blue;
border: 1px solid blue;
}
效果图:
.d1{
float:left;
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
float:right;
margin:5px;
background-color: blue;
border: 1px solid blue;
}
使用clear清除浮动
clear:none 默认,左右浮动都不会清除
clear:left 清除左边浮动
clear:right 清除右边浮动
clear:both 左右浮动都清除
p{
clear:left;
margin:5px;
background-color: green;
border: 1px solid green;
}
.d2{
float:right;
margin:5px;
height:50px;
background-color: blue;
border: 1px solid blue;
}
改下高度,效果明显一些
效果图:
改为
p{
clear:right;
margin:5px;
background-color: green;
border: 1px solid green;
}
改下d1的高度
.d1{
float:left;
margin:5px;
height:100px;
background-color: gray;
border: 1px solid gray;
}
效果图
p{
clear:both;
margin:5px;
background-color: green;
border: 1px solid green;
}
效果图:
第三节:盒子定位position
<style type="text/css">
.parent{
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:static;//按照标准流定位
padding:10px;
background-color: blue;
border: 1px solid gray;
}
</style>
<div class="parent">
<div class="son">儿子</div>
</div>
效果图:
、
.son{
position:relative;//相对定位 (相对于原来的标准位置偏移一定距离)
left:30px; //son这个div的相对于前面那个标准流的位置像右移动30px
top:30px; //son这个div的相对于前面那个标准流的位置像下移动30px
padding:10px;
background-color: blue;
border: 1px solid gray;
}
效果图:
.parent{
position:relative; //包含框中定位一定要是relative
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:absolute;//绝对定位
left:0px; //以它的包含框进行偏移
top:0px;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
注意:绝对定位是以它的包含框进行偏移,包含框中定位一定要是relative,不是的话继续向上找
.parent{
position:relative;
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:fixed; //固定定位,以浏览器窗口为基准进行偏移,与包含框没任何关系
left:0px;
top:0px;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
实例: 把苹果这个图片至于文字下面
<style type="text/css">
img{
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
}
</style>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<h1>这是一个苹果!</h1>
<img src="../apple.jpg"/>
行内元素
<div>d1</div>
<div>d2</div>
<div>d3</div>
<span>s1</span>
<span>s2</span>
<span>s3</span>
效果图:
<div style="display: inline;">d1</div>
<div style="display: inline;">d2</div>
<div style="display: inline;">d3</div>
<span style="display: block;">s1</span>
<span style="display: block;">s2</span>
<span style="display: block;">s3</span>
效果图: