目录
盒子 模型（box-model）
● CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
● 如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆 放盒子。
● 我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
内容区：放置标签内容的区域
width和height它只是设置标签内容区的大小
内边距：内容区到边框以内发区域
边框：标签的最外边
标签大小=内容区大小+内边距大小+边框大小
盒子 模型-内容区
● 内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标 签都是存在于内容区中的。
● 通过width和height两个属性可以设置内容区的大小而不是整个盒子的大 小。
● 如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一 致的。
● width和height属性适用于块标签。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: aqua;
width: 176px;
height: 176px;
}
.box2{
width: 200px;
height: 200px;
background-color: hotpink;
</style>
</head>
<body>
<div class="box1">
盒子模型
</div>
<div class="box2"></div>
</body>
</html>运行
盒子 模型-内边距
● 内边距指的就是标签内容区与边框以内的空间。
● 内边距会影响整个盒子的大小。 使用padding属性来设置标签的内边距。
padding:10px 20px 30px 40p
上、右、下、左四个方向的内边距
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: aqua;
width: 176px;
height: 176px;
padding: 10px;/* 四个方向内边距相同 */
/* padding-top: 10px;
padding-left: 15px; */
/* padding: 5px 10px 15px 20px;上 右 下 左 顺时针 */
/* padding: 10px 20px;上下 左右 */
}
</style>
</head>
<body>
<div class="box1">
盒子模型
</div>
</body>
</html>运行
padding: 10px;
padding-top: 10px;
padding-left: 15px;
padding: 5px 10px 15px 20px;
padding: 10px 20px;
盒子 模型-边框
● 可以在标签周围创建边框，边框是标签可见框的最外部
可以使用border属性来设置盒子的边框：
可以使用border-top/left/right/bottom分别指定上右下左 四个方向的 边框。
● 边框可以设置样式：
dotted （点线）
dashed （虚线）
solid （实线）
double （双线）
groove （槽线）
border-radius设置四个角为圆角边框
border-top-left-radius设置左上为圆角边框
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: aqua;
width: 176px;
height: 176px;
border-top-width: 1px;
border-top-color: rebeccapurple;
border-top-style: solid;
/* border-top: 2px rebeccapurple solid;*/
/* border: 2px rosybrown solid; */
/* border-radius: 10px; */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
</head>
<body>
<div class="box1">
盒子模型
</div>
</body>
</html>运行
border-top-width: 1px;
border-top-color: rebeccapurple;
border-top-style: solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-top: 2px rebeccapurple solid;
border-radius: 10px;
border: 2px rosybrown solid;
盒子 模型-外边距
● 外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置 外边距。用法和padding类似，同样也提供了四个方向的 。
margin-top/right/bottom/left。
margin的值可以为负值。
margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为 auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。
● 外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子 的实际控制范围。
● 外边距不影响标签的大小.只是影响标签的位置 ,外边距是一个标签到另一个标签的距离
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box2{
width: 200px;
height: 200px;
background-color: hotpink;
margin-top: 10px;
margin-bottom: 10px;
/* margin-left: 100px; */
/* margin-left: auto;
margin-right: auto; */
margin:10px auto;
}
</style>
</head>
<body>
<div class="box2"></div>
</body>
</html>运行
margin-top: 10px;
margin-bottom: 10px;
margin:10px auto;
margin-left: 100px;
margin-left: auto;
margin-right: auto;
清除浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所 以为很多的标签都设置了一些默认的margin和padding，而它的这些默 认样式，正常情况下我们是不需要使用的。
我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统 的去掉。
*{ margin: 0;
padding: 0;
}
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
outline: none;
}
.box1{
background-color: aqua;
width: 176px;
height: 176px;
padding: 10px;/* 四个方向内边距相同 */
border: 2px rosybrown solid;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: hotpink;
margin-top: 10px;
margin-bottom: 10px;
margin:10px auto;
</style>
</head>
<body>
<div class="box1">
盒子模型
</div>
<div class="box2"></div>
<p>wwww</p>
<p>sss</p>
<h1>wwww</h1>
<h1>222</h1>
</body>
</html>运行
盒子模型练习
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: chartreuse;
width: 80px;
padding: 10px 60px;
}
.txt1{
width: 476px;
height: 32px;
padding: 2px 10px;
border: 2px green solid;
border-radius: 5px;
outline: none;
}
.txt1:hover{
border:2px magenta solid;
}
.txt1:focus{
border: 2px black solid;
}
</style>
</head>
<body>
<div class="box1">
公司介绍
</div>
<br/>
<input class="txt1"/>
</body>
</html>运行
文档流
网页默认是一个二维平面，在网页中一行行摆放标签
块标签会占一行，行标签只占自身的大小
这种情况下实现网页布局就比较麻烦了，需要通过一些方法改变默认的摆放顺序---网页布局
浮动
浮动指的是使标签脱离原来的文档流，在父标签中浮动起来
使用float属性
none ：不浮动
left ：向左浮动
right ：向右浮动
● 当一个标签浮动以后，其下方的标签会上移。
● 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮 动以后即完全脱离文档流,这时不会再影响父标签的高度,也就是浮动标签 不会撑开父标签。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: darkturquoise;
float: right;/* 可以让标签脱离原来的文档流（二维平面）,浮动后的标签默认是呢内容的大小，可以为其设置宽和高*/
width: 100px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<h1 style="background-color: cornflowerblue;">十里桃花</h1>
</body>
</html>运行
清除浮动
clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不 发生变化。
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动
浮动的标签不占用原来的文档流空间
下面的标签就会向上移动，会影响后面的网页布局
解决浮动问题：
1、为父级标签设置一个高度，把父级标签撑开
2、在浮动的标签后使用清除浮动属性
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.nav{
background-color:thistle;
float: left;
padding: 10px 54px;
}
.nav:hover{
background-color: lightcoral;
}
.nav_box{
background-color: darkorange;
width: 688px;
margin: 0px auto;
}
.middle_box{
width: 688px;
margin: 10px auto;
}
.middle_box_left,.middle_box_center,.middle_box_right{
float: left;
height: 200px;
}
.middle_box_left{
width: 100px;
background-color: darkcyan;
padding-left: 10px;
}
.middle_box_center{
width: 458px;
background-color: darkgoldenrod;
}
.middle_box_right{
width: 120px;
background-color: darkblue;
}
.middle_box_bottom{
background-color: aquamarine;
height: 50px;
}
</style>
</head>
<body>
<div class="nav_box">
<div class="nav">网站首页</div>
<div class="nav">产品案例</div>
<div class="nav">公司介绍</div>
<div class="nav">联系我们</div>
<div style="clear: left;"></div> <!-- 清除浮动的影响，自动撑开父级标签-->
</div>
<div class="middle_box">
<div class="middle_box_left">
<div>家电</div>
<div>家电</div>
<div>家电</div>
<div>家电</div>
</div>
<div class="middle_box_center">center</div>
<div class="middle_box_right">right</div>
<div style="clear: left;"></div>
<div class="middle_box_bottom">bottom</div>
</div>
</body>
</html>运行
CSS 定位(Position)
相对定位（relative）
首先要开启标签的定位功能，指定定位的类型
以自己原来的位置进行定位的
相对定位不会让标签脱离文档流
相对定位是一个非常容易掌握的概念. 相对于它 的起点进行移动，移动后原来的位置还被占用。
可以通过position:relative; 开启相对定位， 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: relative;
left: 100px;
top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
</body>
</html>运行
绝对定位（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: darkcyan;
}
.box3{
width: 200px;
height: 200px;
background-color: olivedrab;
position: relative;
}
</style>
</head>
<body>
<p>wwwww</p>
<p>wwwww</p>
<p>wwwww</p>
<p>wwwww</p>
<div class="box3">div3<div class="box1">div1</div></div>
<div class="box2">div2</div>
</body>
</html>运行
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
