发表于： 2019-02-17 18:16:39
1 805
今天完成的事情：
margin相关
我们来讲一下浮动中和margin相关的知识。
margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
盒子居中margin:0 auto;
margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
margin-left: auto;
margin-right: auto;
盒子居中的简写为：
margin:0 auto;
对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。
注意：
- （1）只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
- （2）使用margin:0 auto;的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
- （3）margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;
对上面的第三条总结一下：（非常重要）
margin:0 auto; //让这个div自己在大容器中的水平方向上居中。
text-align: center; //让这个div内部的文本居中。
顺便普及一下知识，text-align还有：
text-align:left; //没啥用，因为默认居左
text-align:right; //文本居右
具体内容在 浮动（前端大神博客）
通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：
p {margin: 0.5em 1em;}
这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
- 如果缺少左外边距的值，则使用右外边距的值。
- 如果缺少下外边距的值，则使用上外边距的值。
- 如果缺少右外边距的值，则使用上外边距的值。
下图提供了更直观的方法来了解这一点：
换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。
利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
如果希望除了左外边距以外所有其他外边距都是 auto（左外边距是 20px）：
p {margin: auto auto auto 20px;}
单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：
p {margin-left: 20px;}
您可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
注意：使用单边外边距属性时 不会进行值复制 padding也适用
margin 上下边距 一般不要设置为百分数 ， 可以根据蓝湖来设置 大小
明天计划的事情：
继续css任务4
收获：
1学习了插入图片的两种方式 （在html中加入标签img 或者 在css中通过
background: url(../css-task3/记录页_03.png) no-repeat; 该方法是以插入背景图的方式插入图片
）
2img是行级元素 内含行高 可以通过
font-size: initial;该方法用于消除img的影响（前提是img必须位于块元素内） 当然这里的img已经都转为block 该方法相当于从根本上改变了img 因为img本质上是属于行内元素
返回列表
评论