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. git遇到问题

    简介 这里记录git使用过程中所涉及的问题,记录下解决方案. git 本地项目上传远程仓库[github] 已在远程建好仓库,在本地项目根目录下 $ git init $ git add . $ gi ...

  2. [EffectiveC++]item45：运用成员函数模板接受所有兼容类型

  3. Keepalived + haproxy双机高可用方案

    上一篇文章已经讲到了keepalived实现双机热备,且遗留了一个问题 master的网络不通的时候,可以立即切换到slave,但是如果只是master上的应用出现问题的时候,是不会 主动切换的. 上 ...

  4. CSS 构造表格

    表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; ...

  5. BZOJ 1040 骑士 基环树 树形DP

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1040 题目大意: Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫 ...

  6. git checkout -b

    创建分支: $ git branch mybranch切换分支: $ git checkout mybranch创建并切换分支: $ git checkout -b mybranch 更新master ...

  7. 你的安全设置不允许网站使用安装在你的计算机上的ActiveX控件

    在IE中,工具--INTERNET选项--安全--自定义级别--"下载未签名的ActiveX控件"选项改成"提示"或"允许"就好了.

  8. centos下安装myrocksdb

    承接上一篇,https://www.cnblogs.com/lunyu/p/10190364.html .编译安装myrocks的整个过程,特别是第2步和第7步,让人冗长难耐.因此编译安装成功后省去这 ...

  9. docker 下 mysql 集群的搭建

    下载程序&&创建docker容器 从mysql官网https://dev.mysql.com/downloads/cluster/上下载mysql集群库mysql-cluster-gp ...

  10. 学习笔记一：I2C协议学习和Verilog实现

    ////////////////////////////////////////////////// //clk = 20 MHz ,一个周期50ns //sck = 100 kHz (scl) ,一 ...