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. ssh连接CentOS7服务器

    ssh原理: ssh是一种专为远程登陆会话和其他网络服务提供安全性的协议,主要用于远程登陆. ssh采用公钥加密,在远程连接时,远程主机接收到用户的登录请求,将自己的公钥发送给用户,用户使用这个公钥将 ...

  2. November 13th 2016 Week 47th Sunday The 1st Day

    Adventure may hurt you, but monotony will kill you. 也许冒险会让你受伤,但一成不变会让你灭亡. Just change a bit, let the ...

  3. APP案例分析-摩拜单车app

    第二次作业-App案例分析 本次案例分析选用的是 摩拜单车IOS5.7.5版本 测试环境为 IPhone 6s (IOS11.0.1,含有3DTOUCH功能).本次案例分析仅针对APP 而言,并不涉及 ...

  4. 对于socket发送数据时是否要加锁及write read的阻塞非阻塞

    偶尔讨论到了socket发送数据时是否应该加锁的问题,就在网上查了一下,下面是大神陈硕的答案 对于 UDP,多线程读写同一个 socket 不用加锁,不过更好的做法是每个线程有自己的 socket,避 ...

  5. EOS资料收集

    柚子(EOS)可以理解为Enterprise Operation System,即为商用分布式应用设计的一款区块链操作系统.EOS是EOS软件引入的一种新的区块链架构,旨在实现分布式应用的性能扩展.注 ...

  6. UVa 10214 - Trees in a Wood.（欧拉函数）

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. verilog实现VGA显示方块屏幕保护

    verilog实现VGA显示方块屏幕保护 输入和输出 时钟信号 clk 复位信号 reset rgb三颜色输出 [2:0] r,g, [1:0] b 行信号输出 hs 列信号输出 vs 参数设定 设定 ...

  8. JDBC 使用common-dbutiles

    一:第三方jar mysql-connector-java-5.1.45-bin.jar,需要关注的核心类: 1.DbUtils----操作数据库的连接注册和释放. 2:.QueryRunner--- ...

  9. Kafka设计解析（五）Kafka性能测试方法及Benchmark报告

    转载自 技术世界,原文链接 Kafka设计解析(五)- Kafka性能测试方法及Benchmark报告 摘要 本文主要介绍了如何利用Kafka自带的性能测试脚本及Kafka Manager测试Kafk ...

  10. 四步掌握CAN节点隔离设计

    四步掌握CAN节点隔离设计 “隔离”是模块为CAN节点设备提供可靠数据传输的首要保障,通常隔离模块的“隔离”是指模块上电后,能为节点提供信号隔离及电源隔离,隔离电压等级以2500VDC.3500VDC ...