在网页中，一切皆盒子
盒子
- CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里
- 如果把所有的元素都想象成盒子，那么对网页的布局就相当于是摆放盒子
- 只需要将相应的盒子摆放到网页中的相应的位置即可完成网页的布局
盒子模型
一个盒子分成几个部分：
- 内容区(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
边框
设置边框
设置边框需要同时设置三个样式，缺一不可
- border-width 边框的宽度
- border-color 边框的颜色
- border-style 边框的样式
可选值：
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
设置规则
可以同时设置四个边框，也可以分别设置
- 一个值
border-width: 上下左右;
- 两个值
border-width: 上下 左右;
- 三个值
border-width: 上 左右 下;
- 四个值
border-width: 上 右 下 左;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
/*border-width: 10px 20px 30px 40px;*/
/*border-width: 10px 20px 30px;*/
/*border-width: 10px 20px;*/
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
单独设置
border-xxx-width:
border-xxx-color:
border-xxx-style:
xxx
top
right
bottom
left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: #bfa;
/*border-width: 10px 20px 30px 40px;*/
/*border-width: 10px 20px 30px;*/
/*border-width: 10px 20px;*/
border-width: 10px;
/*border-left-width: 100px;*/
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
border-color: red;
/*border-style: double;*/
border-style: solid dotted dashed double;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
边框的简写属性
- border
无顺序区分
border: 10px red solid;
- border-left
order-left: 10px red solid;
- border-top
border-top: 10px red solid;
- border-right
border-right: 10px red solid;
- border-bottom
border-bottom: 10px red solid;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #bfa;
/*border-width: 10px;
border-color: red;
border-style: solid;*/
/*border: 10px red solid;*/
/*border-top: 10px red solid;*/
/*border-left: 10px red solid;*/
/*border-top: 10px red solid;
border-left: 10px red solid;
border-bottom: 10px red solid;*/
border: 10px red solid;
border-right: none;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
内边距(padding)
内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小
盒子的可见框大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
盒子中一共有四个方向的内边距
- padding-top
padding-top: 100px;
- padding-right
padding-right: 100px;
- padding-bottom
padding-bottom: 100px;
- padding-left
padding-left: 100px;
- padding
一个值
padding:上下左右
两个值
padding:上下 左右
三个值
padding:上 左右 下
四个值
padding:上 右 下 左
<!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: 100px;
padding-right: 100px;
padding-left: 100px;
padding-bottom: 100px;*/
/*padding: 100px;*/
/*padding: 100px 200px;*/
/*padding: 100px 200px 300px;*/
padding: 100px 200px 300px 400px;
}
/*
创建一个子元素box2占满box1
* */
.box2{
width: 100%;
height: 100%;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
外边距
外边距 盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置
四个方向的外边距
- margin-top
margin-top: 100px;
- margin-right
margin-right: 100px;
- margin-bottom
margin-bottom: 100px;
- margin-left
margin-left: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/*margin-top: 100px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;*/
/*margin-left: -100px;
margin-top: -100px;
margin-bottom: -100px;*/
/*margin-bottom: -100px;*/
/*margin-left: auto;
margin-right: auto;*/
margin: 0 auto;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
margin值
可以设置为auto, auto一般只设置给水平方向
-
如果只指定左外边距或右外边距的margin为auto ， 则会将外边距设置为最大值
-
垂直方向外边距设置为auto，则外边距默认值为0
-
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中水平居中
margin-left: auto;
margin-right: auto;
margin简写
规则和padding一致
margin: 10px 20px 30px 40px;
margin: 0 auto;
垂直外边距的重叠
相邻的垂直外边距会发生重叠现象
- 兄弟元素之间的相邻垂直外边距取最大值
- 父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素
水平外边距不会重叠，而是取和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}
.box3{
width: 200px;
height: 100px;
background-color: yellow;
padding-top: 100px;
}
.box4{
width: 100px;
height: 100px;
background-color: yellowgreen;
/*margin-top: 100px;*/
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多元素都设置了一些默认的margin和padding ，而它的这些默认样式，正常情况下不需要使用
在编写样式之前需要将浏览器中的默认的margin和padding都去掉
清除浏览器的默认样式
*{
margin: 0;
padding: 0;
}
内联元素的盒子模型
内容区
- 内联元素不能设置 width和 height
内边距(padding)
-
内联元素 支持水平方向的 padding
-
内联元素可以设置垂直方向的padding，但是不会影响布局
边框(border)
- 内联元素 支持四个方向边框，但是垂直的边框不会影响布局
外边距(margin)
-
内联元素 支持水平方向外边距，水平方向的外边距不会重叠，而是求和
-
内联元素 不支持垂直方向的外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
padding-left: 100px;
padding-right: 100px;
/*padding-top: 50px;
padding-bottom: 50px;*/
border: 1px blue solid;
margin-left: 100px;
margin-right: 100px;
/*margin-top: 200px;
margin-bottom: 200px;*/
}
.s2{
margin-left: 100px;
}
</style>
</head>
<body>
<span class="s1">我是一个span</span>
<span class="s2">我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>
<div class="box1"></div>
</body>
</html>
盒模型相关的样式
display
display 可以设置元素的显示类型
可选值：
none 此元素不会被显示，并且在页面中不占位置
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
inline-block 说明
既具有内联元素的特点也具有块元素的特点
- 可以设置宽高
- 不独占一行
visibility
设置元素是否在页面中显示
可选值：
visible 默认值。元素是可见的。
hidden 元素是不可见的， 但仍然占有页面的位置
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: none;
width: 500px;
height: 500px;
background-color: #bfa;
}
.box{
width: 100px;
height: 100px;
background-color: orange;
/*display: none;*/
visibility: hidden;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#">我是一个大大的超链接</a>
<span>hello</span>
</body>
</html>
overflow
设置元素如何处理溢出内容
子元素默认是存在于父元素的内容区中
理论上子元素最大可以等于内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示
超出父元素的内容称为溢出的内容
可选值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容(不管是否溢出，都会添加水平和垂直滚动条)
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容(根据需求自动添加滚动条)
inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color:#bfa ;
overflow: auto;
}
.box2{
width: 100px;
height: 500px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。
</div>
</body>
</html>
文档流
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素
- 块元素在文档流中自上向下排列,在文档流中独占一行
- 块元素在文档流中宽度默认是父元素的100%
- 块元素在文档流中高度默认被内容(子元素)撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，会自动修改宽度，以适应内边距
内联元素
- 内联元素在文档流中自左向右排列，在文档流总只占自身的大小，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
- 内联元素在文档流中宽度和高度默认都被内容撑开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color: #bfa;">
<div style="height: 500px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
</body>
</html>
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
