CSS快速入门-实用技巧

1、整体布局

大部分的布局都是由三部分组成，header、body、footer。

 

代码布局：写三个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="pg-header"></div>  #header
<div class="pg-body"></div>    #body
<div class="pg-footer"></div>  #footer
</body>
</html>

　　

 

2、默认margin

默认情况下body和document之间是有margin的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
        div {
            width:40px;
            height:40px;
            border:2px dashed red;
            margin-top:20px;
            padding-left:10px;
            padding-top:20px;
            padding-right:30px;
            padding-bottom:40px;

        }
    </style>
</head>
<body>
    <div>
        aaa
    </div>
</body>
</html>

　　

以上代码我并没有设置div的maring，但是它不是定格，你会发现它在上面和左边都有间距，这就是默认距离。

一般情况下，我们需要去掉这个默认距离：

body{

　　margin:0;

}

3、div居中

一般用户制作header时，比如淘宝：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width:1000px;
            background-color:red;
            margin:0 auto;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="div1">
        我是div内容。
    </div>
</body>
</html>

　　

效果图：

 4、块级标签中内容居中

 

 

实现：line-height行高设置成div的高度。

<div style="height:50px;line-height:50px">asdfasdf</div>

效果图：

 

5、background-position

应用场景：这种图片都是一块打的图片，通过设置position可以获取自己想要的图片。

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width:1000px;
            height:100px;
            background-color:red;
            margin:0 auto;
            text-align:center;
            background-image:
            url(//misc.360buyimg.com/mtd/pc/index_2017/2.0.1/static/images/ico_service@2x.png);
            background-position: 30px 171px;
        }
    </style>
</head>
<body>
    <div id="div1">
        我是div内容。
    </div>

</body>

</html>

　　

 

效果图：

随着调整background-position参数，背景图片会移动。

 

6、内联标签转块标签

块级标签：div,p,h1-h6,ul,li,dl,dt,dd

内联标签：a，span,strong,u,em

<span>我是span</span>

 #sp{
            background-color:green;
            display:inline-block;
            width:200px;
        }

　　

默认情况下span设定宽度不会生效，但是设定为inline-block后，可以设定宽度。

 7、z-index

z-index标签主要用于场景为模态框，我们使用模态框时，会有几层div，这时就可以通过z-index设定哪个div位于上面，哪个div位于下面。

 

posted @ 2018-04-15 13:31  skyflask  阅读(370)  评论(0)  编辑  收藏  举报