CSS基础-DAY2

技术分享

margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

padding: 用于控制内容与边框之间的距离;

Border(边框): 围绕在内边距和内容外的边框。

Content(内容): 盒子的内容,显示文本和图像。

margin属性

技术分享技术分享
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

单边外边距属性

技术分享技术分享
margin:10px 20px 20px 10px;

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

简写属性

技术分享技术分享
margin: 0 auto;

居中

padding属性

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。

设置同margine;

技术分享技术分享
!DOCTYPE html
html lang="en"
head
    meta charset="UTF-8"
    titleTitle/title

    style
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }


       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }


       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }


    /style
/head
body

div class="outer"

div class="content"/div

div class="page-area"

             ul

                 lispan class="current_page"1/span/li
                 lia href="#" class="page-a"2/a/li
                 lia href="#" class="page-a"3/a/li
                 lia href="#" class="page-a"4/a/li
                 lia href="#" class="page-a"5/a/li
                 lia href="#" class="page-a"6/a/li
                 lia href="#" class="page-a"7/a/li
                 lia href="#" class="page-a"8/a/li
                 lia href="#" class="page-a"9/a/li
                 lia href="#" class="page-a"10/a/li
                 lia href="#" class="page-a page-next"下一页/a/li

             /ul

/div

/div


/body
/html

页码实例

思考1:body的外边距

边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下, body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框了,为了验证这一点,加上:

body{
    border: 1px solid;
    background-color: cadetblue;
}

解决方法:

body{
    margin: 0;
}

思考2:margin collapse(边界塌陷或者说边界重叠)

1、兄弟div:
上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值

2、父子div:
if 父级div中没有border,padding,inlinecontent,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content中的其中一个,然后按此div 进行margin;

技术分享技术分享
!DOCTYPE html
html lang="en"
head
    meta charset="UTF-8"
    titleTitle/title
    style

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    /style
/head
body
div/div

div class="div1"

   div class="div2"/div
   div class="div3"/div
/div

/body

/html

View Code

解决方法:

overflow: hidden; 

CSS基础-DAY2

原文地址:http://www.cnblogs.com/zero527/p/7275841.html


最新回复(0)
/jishuVJU_2Ff9ZbIBsxJA7oPn6Bnxgm13FTTbRzy7O7Zw_3D_3D4719232
8 简首页