6.5 KiB
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-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
<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：
分类菜单 效果如下
作业三：
效果如下：
注：
左下角录制工具的水印不用做
图片可以自定义