目录
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>