zoukankan      html  css  js  c++  java
  • 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 {
                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 {
                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 {
                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;
                200px;
            }
    

      

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

     7、z-index

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

  • 相关阅读:
    高级架构进阶之HashMap源码就该这么学
    MySQL底层索引剖析
    一篇文章把本该属于你的源码天赋还给你
    不懂RPC实现原理怎能实现架构梦
    观《亿级流量网站架构核心技术》一书有感
    高效程序员如何优雅落地需求
    职场软技能:开启程序员的“破冰之旅”
    获取ScrollView的onScrollListener
    Android自定义控件之圆形进度条ImageView
    Android之內置、外置SDCard
  • 原文地址:https://www.cnblogs.com/skyflask/p/8847204.html
Copyright © 2011-2022 走看看