目录
0.学习目标
1:文档流的概念，块元素，行内元素在文档流中的特点
2:盒子模型的组成部分,可见宽的大小由哪几部分组成
3:边框，内边距，外边距的设置
4:元素在其父元素中水平方向的位置由一下几个属性共同决定
5:何为过度约束，水平布局中，可以设置auto的三个值，设置后，浏览器如何调整
6:垂直布局溢出，用什么属性解决，有什么属性值
7:兄弟元素，父子元素外边距重叠的情况
8:盒子大小，盒阴影，圆角用什么属性设置？
01.文档流
文档流（normal flow）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：
1.在文档流中
2.脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
1、可以设置宽高
2、而且不会独占一行
元素脱离文档流后，就不再区分块元素，行内元素，也就不具有元素在文档流中具有的特点
脱离文档流的元素会更加类似行内块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style></style>
</head>
<body>
<div>导不快。</div>
<p>第四而</p>
<span>和下承五杀，玉文不。</span>
</body>
</html>
02.盒子模型
把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形盒模型、盒子模型、框模型（box model）
内容区 content
内边距 padding
边框 border
外边距 margin盒子模型的大小 跟内容区，内边距 边框有关系
跟外边距没有关系
1:内容区(content) 元素中所有的子元素和文本内容都在内容区中排列
width 设置内容区的宽度
height 设置内容区的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.1.盒子模型_边框
边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式
大小 样式 颜色
1:border-width 默认值一般是3px
使用border-width可以分别指定四个边框的宽度
可以跟多个值
4个值 上 右 下 左
3个值 上 左右 下
2个值 上下 左右
1个值 上下左右
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度2:border-color 设置边框的颜色 默认值是黑色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color补充小箭头的写法
3:border-style 设置边框的样式
可选值：
none，默认值，没有边框
solid 实线
double 双线
dashed [dæʃt] 虚线
dotted ['dɔtid] 点状边框
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边border
- 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
- 而且没有任何的顺序要求
- border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 100px;
height:100px;
background-color: rgb(222, 255, 170);
/* 设置边框的宽度 */
/* border-width: 1px; */
/* border-top-width:10px ; */
/* 设置边框的颜色 */
/* border-color: red transparent transparent transparent; */
/* border-color: red; */
/* border-top-color: red; */
/* 设置边框的样式 */
/* border-style:double; */
border: red 10px dashed ;
border-bottom: none;
/* border-top: 5px green solid;
border-right: 5px red solid ;
border-bottom: 5px yellow solid;
border-left: 5px blue solid; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2.盒子模型_内边距
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距总结：
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
使用padding可以同时设置四个边框的样式，规则和border-width一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
/* padding-top:50px ;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px; */
padding:10px ;
}
/*
* 创建一个子元素box2占满box1，box2把内容区撑满了
*/
.box2{
width: 100%;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2.3盒子模型_外边距
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。盒子有四个方向的外边距：（边演示，边总结）
margin-top
上外边距，设置一个正值，元素会向下移动,设置一个负值，元素会向上移动
margin-right
默认情况下设置margin-right不会产生任何效果
margin-bottom
下外边距，设置一个正值，自己不动，其下边的元素会向下移动，挤别人
margin-left
左外边剧，设置一个正值，元素会向右移动,设置一个负值，元素会向左移动
由于页面中的元素都是靠左靠上摆放的，
所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（挤别人）外边距也可以指定为一个负值，
如果外边距设置的是负值，则元素会向反方向移动外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
border: 10px solid orange;
padding: 50px;
/* margin-top: 50px;
margin-left: 50px;
margin-bottom: -50px;
margin-right: 500px; */
margin: 10px 20px 30px 50px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
}
.s1 {
margin-right: 50px;
}
</style>
</head>
<body>
<div class="box1 box"></div>
<div class="box2 box"></div>
<span class="s1">低夭过</span>
<span>你看我动没动</span>
</body>
</html>
03.默认样式
默认样式：
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
方式一：
清除浏览器的默认样式
方式二：
引入重置样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 重置样式表，专门用来对浏览器的样式进行重置 -->
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./index.css" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
*/
.box1 {
width: 100px;
height: 100px;
background-color: #bfa;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
</html>
4945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
