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位于下面。

CSS快速入门-实用技巧的更多相关文章

  1. webpack快速入门——实战技巧：watch的正确使用方法，webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——实战技巧：开发和生产并行设置

    package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...

  3. webpack快速入门——实战技巧：webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  4. webpack快速入门——实战技巧：优雅打包第三方类库

    下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...

  5. webpack快速入门——实战技巧：webpack优化黑技能

    1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...

  6. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  7. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  8. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  9. Html与CSS快速入门03-CSS基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...

随机推荐

  1. Allure 安装及使用

    linux下安装方法 Allure requires Java 8 or higher    npm install -g allure-commandline --save-dev (如果npm不能 ...

  2. Celery学习---Celery 与django结合实现计划任务功能

    项目的目录结构: 项目前提: 安装并启动Redis 安装Django和Celery的定时任务插件 安装方法一: pip直接安装[安装了pip的前提下] omc@omc-virtual-machine: ...

  3. RAC数据库的RMAN备份异机恢复到单节点数据库

    1.首先在rac环境用rman备份数据库.[oracle@rac1 admin]$ rman target /run{allocate channel c1 device type disk conn ...

  4. Sharepoint 2013 - 直接显示Doclib中的html page

    缺省的HTML不能直接显示,会被要求存盘.以下操作可以修改 Go to Central Administration Select Manage web applications Select the ...

  5. AOP的核心：代理与织入

    分为两步: 1.动态生成代理类: 2.织入: 2.6 织入(Weaving) 织入是将增强添加到目标的具体连接点上的过程 . AOP 织入方式: 方式 实现 应用编译期织入 特殊的 Java 编译器. ...

  6. 【题解】洛谷P1070 道路游戏（线性DP）

    次元传送门:洛谷P1070 思路 一开始以为要用什么玄学优化 没想到O3就可以过了 我们只需要设f[i]为到时间i时的最多金币 需要倒着推回去 即当前值可以从某个点来 那么状态转移方程为: f[i]= ...

  7. K2 4.7 升级 数据库排序规则更改

    介绍 在过去,K2没有指定安装过程中要在其数据库上使用的标准排序规则.然而,现在K2引入了标准排序规则,以便在之后使用(如果我没有错的话,它是在4.7). 因此, 问题出现在数据库的排序规则不是Lat ...

  8. C++中的随机函数

    一.random函数不是ANSI C标准,不能在gcc,vc等编译器下编译通过. 可改用C++下的rand函数来实现.      1.C++标准函数库提供一随机数生成器rand,返回0-RAND_MA ...

  9. ucos串口通讯模块设计

    在嵌入式应用中,使用RTOS的主要原因是为了提高系统的可靠性,其次是提高开发效率.缩短开发周期.uCOS-II是一个占先式实时多任务内核,使用对象是嵌入式系统,对源代码适当裁减,很容易移植到8~32位 ...

  10. Error message: “'chromedriver' executable needs to be available in the path”

    下载一个chromedriver(https://chromedriver.storage.googleapis.com/index.html?path=2.44/) 直接把chromedriver. ...