CSSday06笔记

作者: 兔子和猪 | 来源:发表于2017-02-25 21:19 被阅读4次

    一、外边距

    1. 外边距属性

    margin属性用于设置内边距,也是复合属性,相关设置如下

    margin-top:上内边距;padding-right:右内边距

    margin-bottom:下内边距;padding-left:左内边距

    margin:上内边距[右内边距下内边距左内边距]

    2. 对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中,实际工作中常用这种方式进行网页布局,示例代码如下:

    .header{ width:960px; margin:0 auto;}

    为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:

    *{

           padding:0;/*清除内边距*/

            margin:0;/*清除外边距*/

    }

    3.注意:

    行内元素不要给上下的margin和padding上下margin和padding会被忽略。

    左右margin和padding会起作用。

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

    二、盒子的宽和高

    使用宽度属性width和高度属性height可以对盒子的大小进行控制。

    width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。

    大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:

    盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和

    盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

    注意:

    相关文章

      网友评论

        本文标题:CSSday06笔记

        本文链接:https://www.haomeiwen.com/subject/etunwttx.html