一,盒子模型
盒子模型
每个标签都象是个盒子,网页布局本质就是摆放盒子
每个盒子又分为4个区域
内容区:存放内容的区域
内边距:内容区到边界的距离
边框:标签的最外层
外边距:一个标签距离另一个标签之间的距离
注意:
- 如果没有为标签设置内边距和边框,则内容区大小 默认和盒子大小是一致的。
- width和height属性适用于块标签。
1.内容区
width,height:不是设置标签总大小,当标签没有内边距和边框时,内容区大小才可以认为就是标签的大小,标签中的内容都放在内容区中
2.内边距
这设置内边距
- padding-top: 20px;上
- padding-bottom: 20px;下
- padding-left: 20px;左
- padding-right: 20px;右
- padding:10px 20px 30px 40px;上 右 下 左
- padding:10px 20px;上下 左右
- padding:10px ;全部
3.边框
在标签周围创建边框,边框时标签可见狂的最外部
使用border属性来设置盒子的边框可以在标签周围创建边框,边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框:
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。
边框可以设置样式:
dotted (点线) dashed (虚线) solid (实线) double (双线)groove (槽线)
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
4.外边距
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似,同样也提供了四个方向的 。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto,设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto。
外边距不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围。
5.清除浏览器的默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设置了一些默认的 margin 和 padding ,而它的这些默认样式,正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的 margin 和 padding 统统的去掉。
*{
margin: 0;
padding: 0;
}
使用通配选择器原因:优先级别最低,很容易被覆盖
二,文档流
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ,并在每行中按从左至右的顺序排放标签,即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边,如果右边不足以放下标签,标签则会另起一行,在新的一行中继 续从左至右摆放。
这样一来每一个块标签都会另起一行,那么我们如果想在文档 流中进行布局就会变得比较麻烦。
三,浮动
所谓浮动指的是使标签脱离原来的文档流,在父标签中浮动起来。
浮动使用 float 属性。
可选值:
none :不浮动
left :向左浮动
right :向右浮动
当一个块级标签浮动以后,宽度会默认是内容的宽度,所以当漂浮一个块级标签时我们 都会为其指定一个宽度。
当一个标签浮动以后,其下方的标签会上移。
浮动会使标签完全脱离文档流,也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流 , 这时不会再影响父标签的高度 , 也就是浮动标签不会撑开父标签。
标签浮动后会带来影响
浮动后的标签,不占用原来文档流的空间,即使添加了父标签,父标签也不会被撑开,其高度为0,会影响后面的标签布局
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值:
left : 忽略左侧浮动
right :忽略右侧浮动
both :忽略全部浮动
使用样例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.main_box{
background-color: aqua;
width: 1000px;
height: 600px;
margin: 0px auto;
}
.main_box_left,.main_box_center,.main_box_right{
padding: 20px;
height: 360px;
float: left;
}
.main_box_left{
width: 260px;
background-color: antiquewhite;
}
.main_box_center{
width: 360px;
background-color: aqua;
}
.main_box_right{
width: 260px;
background-color: black;
}
.main_box_bottom{
width: 1000ppx;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main_box">
<div class="main_box_left">左</div>
<div class="main_box_center">中</div>
<div class="main_box_right">右</div>
<div style="clear: left;"><!-- 清除浮动 -->
<div class="main_box_bottom">下</div>
</div>
</body>
</html>
四,定位
1.相对定位:
定义:相对定位是相对于他的起点进行移动,移动后原来的位置还被占用。可以过 position:relative;开启相对定位,left,right,top,bottom四个属性来设置标签的偏移量
特点:(当标签的position属性设置为relation时,则开启了标签的相对定位)
1.当开启了标签的相对定位后,而不设置偏移量时,标签不会发生任何变化
2.相对定位时相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
float: left;
position: relative;
left: 150px;
}
.box2{
background-color: aqua;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>
2.绝对定位
定义:绝对定位时不占空间的,运用了绝对定位的标签会脱离原来的文档流,浮动起来,因此在视觉上会与其他标签重叠起来
可以通过position:absolute;开启绝对定位
left,right,top,bottom四个属性来设置偏移量
特点:
1.开启绝对定位,会使标签脱离文档流
2.开启绝对定位以后,如果不设置偏移量,则标签位置不会发生变化
3.绝对定位时相对于离他最近的开启了相对定位的祖先标签进行定位
注:一般情况下,开启了绝对定位都会同时开启父标签的相对定位
如果所有的祖先标签都为开启定位,则会相对于浏览器窗口进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
}
.box2{
background-color: aqua;
width: 100px;
height: 100px;
}
.box3{
background-color: aqua;
width: 220px;
height: 220px;
}
.main{
width: 200px;
height: 200px;
background-color: blanchedalmond;
position: relative;
}
</style>
</head>
<body style="margin-top: 1000px;">
<div class="box3">
<div class="main">
div3
<div class="box1">div1</div>
</div>
<div class="box2">div2</div>
</div>
<!--固定定位 -->
<div style="width: 50px; height: 50px; background-color: gold; position: fixed; right: 0%; top: 50%;">
客服
</div>
</body>
</html>