发表于: 2021-03-06 20:51:08

1 1067


今天完成的事情:提交了任务一,完成了任务二
明天计划的事情:学习任务三!了解切图和自适应布局,编写代码和调试代码!
遇到的问题:PhotoShop安装不上!
收获:学会了服务器的使用也上传了自己的网页。

深刻的了解到盒子模型的内外边距以及它们的使用:

    外边距(margin)的百分数是相对于父元素的 width 计算的

    margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。

     通过值复制,不必重复地键入四组数字。及如下:

1,如果缺少左外边距的值,则使用右外边距的值。

2,如果缺少下外边距的值,则使用上外边距的值。

3,如果缺少右外边距的值,则使用上外边距的值。

   如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。

   margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。

内边距的设置与外边距相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的

一:(上外边距)margin-top   (右外边距)margin-right  (下外边距)margin-bottom  (左外边距)margin-left

        auto - 浏览器来计算外边距 ;  length - 以 px、pt、cm 等单位指定外边距;   % - 指定以包含元素宽度的百分比计的外边距;   (继承)inherit - 指定应从父元素继承外边距

二:如果 margin 属性有四个值:

    margin: 25px 50px 75px 100px;

及:上外边距是 25px

    右外边距是 50px

    下外边距是 75px

    左外边距是 100px

三:如果 margin 属性设置三个值:

    margin: 25px 50px 75px;

及:上外边距是 25px

    右和左外边距是 50px

    下外边距是 75px

四:如果 margin 属性设置两个值:

    margin: 25px 50px;

及: 上和下外边距是 25px

     右和左外边距是 50px

五:如果 margin 属性设置了一个值:

    margin: 25px;

及:所有四个外边距都是 25px

六:auto 值

您可以将 margin 属性设置为 auto,以使元素在其容器中水平居中。

然后,该元素将占据指定的宽度,并且剩余空间将在左右边界之间平均分配。

七:inherit 值: 继承父元素的值

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。



返回列表 返回列表
评论

    分享到