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. Django ImportError 模块路径正确，且将文件夹设置为Source Root

    问题描述: 在用PyCharm进行Django项目开发时,由于业务需求需要增加一个外键字段,但在引入外键关联的model时,报错ImportError 解决方案: 无奈中,尝试更改导入模块语句的位置, ...

  2. 1415. [NOI2005]聪聪和可可【记忆化搜索DP】

    Description Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点 ...

  3. DRCNN超分辨重建2016年

    论文疑点: Embedding层是怎么操作的? https://gshtime.github.io/2018/06/01/tensorflow-embedding-lookup-sparse/ 这篇文 ...

  4. Appium移动自动化测试（一）--Mac安装Appium

    一.Appium安装 1. 直接安装:Appium官网下载:https://bitbucket.org/appium/appium.app/downloads/ 这里mac系统升级到 Sierra后, ...

  5. 如何向女朋友解释int==Integer为true

    原:https://juejin.im/post/5c7f3cb25188251b883cada2 int==Integer为什么返回true 先看现象吧 执行下面的代码及输出结果: int a = ...

  6. 基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

    基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块 前言 最近学习了 HT for Web flow 插件,除了正常的 flow 效果,其中还有两个十分好用的两个接口 getPercen ...

  7. iOS 开发之UIStackView的应用

    ————————————————UIStackView的应用———————————————— 一:先讲下优势: 对于排布列表式控件的布局需求,用UIStackView控件,开发中为我们省去了繁琐的代码 ...

  8. 基于BM3803处理器平台的PCI软硬件调试问题汇总（持续更新中）

    一:相关基本配置: FPGA:  XILINX XC5VFX130T-1FFG1738 PCI接口部分使用XILINX提供的pci32_v4_8硬核:PCI控制器由FPGA逻辑实现,主要完成PCI设备 ...

  9. JavaWeb基础—dbutils的简单入门

    简明入门教程,参考:https://www.cnblogs.com/CQY1183344265/p/5854418.html 进行此章节之前,介绍一个JdbcUtils的再次的简单封装 (例如后面需要 ...

  10. VB6 写文件

    Private Sub Form_Load() Dim nHandle As Integer Dim FilePath As String FilePath = "c:\wgscd\17.t ...