2021-01-05 09:18:22 +08:00
|
|
|
|
# css 基础（二）
|
|
|
|
|
|
|
|
|
|
|
|
## 块级元素和内联元素
|
|
|
|
|
|
|
|
|
|
|
|
- 块级元素
|
|
|
|
|
|
|
|
|
|
|
|
- 特点：
|
|
|
|
|
|
|
|
|
|
|
|
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
|
|
|
|
|
|
- 每个盒子都会换行
|
|
|
|
|
|
- width和height 都可以发挥作用
|
|
|
|
|
|
- padding , margin, border 会将其他元素从当前盒子周围推开
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 内联元素
|
|
|
|
|
|
|
|
|
|
|
|
- 特点：
|
|
|
|
|
|
- 盒子不会换行
|
|
|
|
|
|
- width和height 不能发挥作用
|
|
|
|
|
|
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
|
|
|
|
|
|
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
|
|
|
|
|
|
|
|
|
|
|
|
> 块级元素display默认属性值为 block
|
|
|
|
|
|
>
|
|
|
|
|
|
> 内联元素 dipslay的属性默认值为inline
|
|
|
|
|
|
>
|
|
|
|
|
|
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 盒模型 （box model）
|
|
|
|
|
|
|
|
|
|
|
|
css 盒模型包括如下要素
|
|
|
|
|
|
|
|
|
|
|
|
- 元素内容 （content）
|
|
|
|
|
|
- 内边距 （border）
|
|
|
|
|
|
- 边框（border）
|
|
|
|
|
|
- 外边距（margin）
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> 上图中 最内层的蓝色色块是 元素内容（content）
|
|
|
|
|
|
>
|
|
|
|
|
|
> 蓝色外侧的 绿色的是内边距（padding）
|
|
|
|
|
|
>
|
|
|
|
|
|
> padding外侧的橙黄色的部分是边框（border）
|
|
|
|
|
|
>
|
|
|
|
|
|
> border 外侧 也就是最外侧的部分是外边框（margin）
|
|
|
|
|
|
|
|
|
|
|
|
盒模型计算元素的总宽度和总高度：
|
|
|
|
|
|
|
|
|
|
|
|
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
|
|
|
|
|
>
|
2021-01-12 14:02:30 +08:00
|
|
|
|
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## css外边距合并（叠加）
|
|
|
|
|
|
|
|
|
|
|
|
定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并
|
|
|
|
|
|
|
|
|
|
|
|
而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
合并的结果计算：
|
|
|
|
|
|
|
|
|
|
|
|
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
|
|
|
|
|
|
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
|
|
|
|
|
|
两个外边距一正一负时，折叠结果是两者的相加的和。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
合并的原因：
|
|
|
|
|
|
|
|
|
|
|
|
而根据w3c规范，两个margin是邻接的必须满足以下条件
|
|
|
|
|
|
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
|
|
|
|
|
|
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
|
|
|
|
|
|
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
|
|
|
|
|
|
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
|
|
|
|
|
|
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
|
|
|
|
|
|
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
|
|
|
|
|
|
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
出现的情况：
|
|
|
|
|
|
|
|
|
|
|
|
(一）
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-12 14:02:30 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
* {
|
|
|
|
|
|
margin:0;
|
|
|
|
|
|
padding:0;
|
|
|
|
|
|
border:0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#outer {
|
|
|
|
|
|
width:300px;
|
|
|
|
|
|
height:300px;
|
|
|
|
|
|
background-color:red;
|
|
|
|
|
|
margin-top:20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#inner {
|
|
|
|
|
|
width:50px;
|
|
|
|
|
|
height:50px;
|
|
|
|
|
|
background-color:blue;
|
|
|
|
|
|
margin-top:10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="outer">
|
|
|
|
|
|
<div id="inner">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
|
|
|
|
|
|
div 的上外边距合并（叠加）。</p>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
（二）
|
|
|
|
|
|
|
|
|
|
|
|
多个子元素外边距合并：
|
|
|
|
|
|
|
|
|
|
|
|
div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定
|
|
|
|
|
|
|
|
|
|
|
|
如此例中，div1的margin 值为30
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
|
2021-01-12 14:02:30 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>
|
|
|
|
|
|
盒子模型
|
|
|
|
|
|
</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
*{
|
|
|
|
|
|
margin:0;
|
|
|
|
|
|
padding:0;
|
|
|
|
|
|
}
|
|
|
|
|
|
body{
|
|
|
|
|
|
text-align:center;
|
|
|
|
|
|
}
|
|
|
|
|
|
div{
|
|
|
|
|
|
width:200px;
|
|
|
|
|
|
height:200px;
|
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
#div1{
|
|
|
|
|
|
margin-top:10px;
|
|
|
|
|
|
background:red;
|
|
|
|
|
|
}
|
|
|
|
|
|
#div11{
|
|
|
|
|
|
margin-top:20px;
|
|
|
|
|
|
width:0;
|
|
|
|
|
|
height:0;
|
|
|
|
|
|
background:yellow;
|
|
|
|
|
|
}
|
|
|
|
|
|
#div12{
|
|
|
|
|
|
margin-top:30px;
|
|
|
|
|
|
width:50px;
|
|
|
|
|
|
height:50px;
|
|
|
|
|
|
background:blue;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="div1">
|
|
|
|
|
|
<div id="div11"></div>
|
|
|
|
|
|
<div id="div12"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
解决措施：
|
2021-01-12 14:02:30 +08:00
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
给外边距加上如下属性，可以解决外边距合并的问题
|
2021-01-12 14:02:30 +08:00
|
|
|
|
|
2021-01-18 18:11:23 +08:00
|
|
|
|
border-top: 1px solid white; 给父元素加上边框
|
|
|
|
|
|
|
|
|
|
|
|
overflow: hidden; 设置超出隐藏
|
|
|
|
|
|
|
|
|
|
|
|
padding-top:50px; 给父盒子加padding-top 可以实现同样的效果
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
margin 复合属性
|
|
|
|
|
|
|
|
|
|
|
|
上右下左
|
|
|
|
|
|
|
|
|
|
|
|
例如：
|
|
|
|
|
|
|
|
|
|
|
|
margin 一个值得时候定义的是上下左右四个方向的边距
|
|
|
|
|
|
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
|
|
|
|
|
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
|
|
|
|
|
四个值得时候是上右下左的边距
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
padding复合属性
|
|
|
|
|
|
|
|
|
|
|
|
上右下左
|
|
|
|
|
|
|
|
|
|
|
|
例如：
|
|
|
|
|
|
|
|
|
|
|
|
padding一个值得时候定义的是上下左右四个方向的边距
|
|
|
|
|
|
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
|
|
|
|
|
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
|
|
|
|
|
四个值得时候是上右下左的边距
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
练习1：
|
|
|
|
|
|
|
|
|
|
|
|
五环之歌 效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业2：
|
|
|
|
|
|
|
|
|
|
|
|
分类菜单 效果如下
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业三：
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
注：
|
|
|
|
|
|
|
|
|
|
|
|
左下角录制工具的水印不用做
|
|
|
|
|
|
|
|
|
|
|
|
图片可以自定义
|
