目录
一、盒子模型
CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
一个盒子会分为：内容区（contect）；内边距（padding）；边框(border)；外边距(margin)
1.1 内容区
内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。
通过
width
和
height
两个属性可以设置内容区的大小而不是整个盒子的大小。
如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。
width
和
height
属性适用于块标签。
1.2内边距
内边距指的就是标签内容区与边框之间的空间。内边距会影响整个盒子的大小。
使用padding属性来设置标签的内边距。
例如：
padding-left:10px;
padding-right:10px;
padding:10px 20px 30px 40px;
这样会设置标签的上、右、下、左四个方向的内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/*
width和height只是设置内容区的大小, 不是标签整个的大小,除非标签没有内边距,边框 内容区大小才可以认为是标签的大小
*/
width: 180px;
height:180px;
background-color: red;
/*
内边距: 内容区到边框之间的距离, 会影响标签的大小
*/
/* padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px; */
padding: 10px; /* 上下左右 */
/* padding: 10px 20px; 上下 左右 */
/* padding: 5px 10px 15px 20px; 上 右 下 左*/
/*
标签实际大小 = 内容区大小+内边距大小+边框
*/
}
</style>
</head>
<body>
<div>
box
</div>
</body>
</html>1.3边框
可以在标签周围创建边框，边框是标签可见框的最外部。
可以使用border属性来设置盒子的边框：比如：
border:1px red solid;
上边的样式分别指定了边框的宽度、颜色和样式。
也可以使用 border-top/left/right/bottom 分别指定上右下左 四个方向的边框。
边框可以设置样式：
dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
1.4外边框
外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的 。margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为
auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
外边距不会影响整个盒子的大小，但是会影响盒子的位置，会影响整个盒子的实际控制范围
二、文档流
文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行一行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继续从左至右摆放。
这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。
三、浮动
所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。
浮动使用
float
属性。
可选值： none ：不浮动 left ：向左浮动 right ：向右浮动
当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。
当一个标签浮动以后，其下方的标签会上移。 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮动以后即完全脱离文档流,
这时不会再影响父标签的高度
,
也就是浮动标签
不会撑开父标签。
清除浮动：
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。
可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
在浮动的标签后,添加一个空标签, clear: left;"清除浮动 会撑开父标签
四、CSS定位
定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对于父标签、另一个标签甚至浏览器窗口本身而出现的位置。
4.1相对定位（relative）
相对于它的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量。
相对定位的特点
当标签的position属性设置为relative时，则开启了标签的相对定位
1.当开启了标签的相对定位以后，而不设置偏移量时，标签不会发生任何变化
2.相对定位是相对于标签在文档流中原来的位置进行定位
3.相对定位的标签不会脱离文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #1E90FF;
/* 开启相对定位 是以原来位置为参照物*/
position: relative;
/* 设置偏移量 */
left:100px;
}
.box2{
width: 100px;
height: 100px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
</body>
</html>
运行结果：
4.2绝对定位（absolute）
绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会与其他的标签重叠。
可以通过position: absolute; 开启绝对定位，
left right top bottom四个属性来设置标签的偏移量
绝对定位的特点
1.开启绝对定位，会使标签脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一般情况，开启了子标签
的绝对定位都会同时开启父标签的相对定位）
如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
/*
只要为标签开启了绝对定位,标签就会脱离文档流,漂浮起来
相对定位,是相对于离他最近的开启了定位的父级标签进行定位,
如果所有的父级标签都没有开启定位,那么就以浏览器的窗口为参照物进行定位.
一般情况下,开启一个标签的绝对定位,同时都会开启父级标签的相对定位
*/
position: absolute;
left: 100px;
top:100px
}
.box2{
width: 100px;
height: 100px;
background-color: red;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
</style>
</head>
<body>
<div class="box3">
box3
<div class="box1">
box1
</div>
</div>
<div class="box2">
box2
</div>
</body>
</html>运行结果：
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
