277 lines
6.5 KiB
Markdown
277 lines
6.5 KiB
Markdown
# css 基础（二）
|
||
|
||
## 块级元素和内联元素
|
||
|
||
- 块级元素
|
||
|
||
- 特点：
|
||
|
||
- 盒子横向会占据父元素所有的空间，默认情况下，盒子会和父元素一样宽
|
||
- 每个盒子都会换行
|
||
- width和height 都可以发挥作用
|
||
- padding , margin, border 会将其他元素从当前盒子周围推开
|
||
|
||
|
||
|
||
- 内联元素
|
||
|
||
- 特点：
|
||
- 盒子不会换行
|
||
- width和height 不能发挥作用
|
||
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
|
||
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。
|
||
|
||
> 块级元素display默认属性值为 block
|
||
>
|
||
> 内联元素 dipslay的属性默认值为inline
|
||
>
|
||
> 块级元素和内联元素可以通过display="inline"/"block" 实现互相转换
|
||
|
||
|
||
|
||
## 盒模型 （box model）
|
||
|
||
css 盒模型包括如下要素
|
||
|
||
- 元素内容 （content）
|
||
- 内边距 （border）
|
||
- 边框（border）
|
||
- 外边距（margin）
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
> 上图中 最内层的蓝色色块是 元素内容（content）
|
||
>
|
||
> 蓝色外侧的 绿色的是内边距（padding）
|
||
>
|
||
> padding外侧的橙黄色的部分是边框（border）
|
||
>
|
||
> border 外侧 也就是最外侧的部分是外边框（margin）
|
||
|
||
盒模型计算元素的总宽度和总高度：
|
||
|
||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||
>
|
||
> 元素的总高度=元素的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
|
||
|
||
|
||
|
||
出现的情况：
|
||
|
||
(一）
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
<html>
|
||
<head>
|
||
<style type="text/css">
|
||
* {
|
||
margin:0;
|
||
padding:0;
|
||
border:0;
|
||
}
|
||
|
||
#outer {
|
||
width:300px;
|
||
height:300px;
|
||
background-color:red;
|
||
margin-bottom: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
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
<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>
|
||
```
|
||
|
||
|
||
|
||
解决措施：
|
||
|
||
给外边距加上如下属性，可以解决外边距合并的问题
|
||
|
||
border-top: 1px solid white; 给父元素加上边框
|
||
|
||
overflow: hidden; 设置超出隐藏
|
||
|
||
padding-top:50px; 给父盒子加padding-top 可以实现同样的效果
|
||
|
||
|
||
|
||
margin 复合属性
|
||
|
||
上右下左
|
||
|
||
例如：
|
||
|
||
margin 一个值得时候定义的是上下左右四个方向的边距
|
||
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||
四个值得时候是上右下左的边距
|
||
|
||
|
||
|
||
|
||
|
||
|
||
padding复合属性
|
||
|
||
上右下左
|
||
|
||
例如：
|
||
|
||
padding一个值得时候定义的是上下左右四个方向的边距
|
||
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||
四个值得时候是上右下左的边距
|
||
|
||
|
||
|
||
|
||
|
||
练习1：
|
||
|
||
五环之歌 效果如下：
|
||
|
||
|
||
作业2：
|
||
|
||
分类菜单 效果如下
|
||
|
||
|
||
|
||
作业三：
|
||
|
||
效果如下：
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
注：
|
||
|
||
左下角录制工具的水印不用做
|
||
|
||
图片可以自定义 |