内外边距

1.1 css属性,height对行内元素不起作用,
     如span,可以转成行内块级元素,加入属性:display:inline-block;
     块级元素默认:display:block;
     行内块级元素:display:inline-block;
     行内元素:display:inline;
1.2 列表属性:
    list-style:none;    去掉项目符号
    list-style-type:square; 列表类型
    list-style-image:url(../img/...);   插入图片(直接居中的)
    list-style-position:inside/outside; 插入的图像在边框里/外
        复合:list-style:url(../img/...) outside;
1.3 段落属性:
    text-transform:capitalize(首字母大写)/lowercase(全部小写)/uppercase(全部大写)    用于英文网站
    letter-spacing:normal/nowrap;   字与字的距离
    word-spacing:10px;      单词与单词间距
    white-space:nowrap(不换行)/normal
1.4 盒模型:
    把所有标签都看做一个盒子
    盒子的组成部分:
        内容的宽+内边距(左右)+边框(左右)+外边距(左右)
        内容的高+内边距(上下)+边框(上下)+外边距(上下)
        width
        height
        border:(复合属性)
            border-left:
            border-right:
            border-top:
            border-bottom:
        四条边都一样:
            border-style:solid/dashed(虚线)/dotted(点线)/double(双线)
            border-color:#ff0000;
            border-width:1px;
            复合属性border:6px blue dashed;

        border-top:none/0;
图片链接在ie中有边框,解决办法img{border:none;}
内边距(padding):给外侧标签设置里面的距离,内容到边框的距离,会影响盒子的尺寸
            padding-left:
            padding:10px;   上下左右10px
            padding:10px 20px;  上下10px 左右20px
            padding:10px 20px 30px; 上10px 左右20px 下30px
            padding:10px 20px 30px 40px     上右下左
            padding:10px 0 0 0;

外边距(margin):标签与标签之间的距离,不影响盒子的尺寸
            margin-right:
            (复合写法同上)
盒子的实际宽度:
盒子的宽度+边框(左右)+内边距(左右)+外边距(左右)
默认情况下,所有标签都有内外边距
            p,img,body{
                margin:0;
            }
            ul{
                padding:0;  
            }

        css3新增属性:
            box-sizing:border-box(保证原来盒子的大小,表示忽略内边距和边框的大小)/content-box(表示不忽略,);
注:
    对块级元素来说:上下边距取最大值,左右边距是累加的
    对行内元素来说:上下的外边距不起作用
    对行内块级元素来说(img\input\select\textarea):上下左右边距都是累加的

你可能感兴趣的:(内外边距)