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. 详细说明php的4中开源框架（TP，CI，Laravel，Yii）

    ThinkPHP简称TP,TP借鉴了Java思想,基于PHP5,充分利用了PHP5的特性,部署简单只需要一个入口文件,一起搞定,简单高效.中文文档齐全,入门超级简单.自带模板引擎,具有独特的数据验证和 ...

  2. September 21st 2017 Week 38th Thursday

    What fire does not destroy, it hardens. 烈火摧毁不了的东西,只会变得更坚固. The true gold can stand the test of fire, ...

  3. 编程题1001.A+B Format (20)

    代码链接点击这里 由于有点久没写代码了,本次作业提交了三次才全部正解. 一开始以为是非常容易的题目,就没有带入多组数据,便以最简单的思路提交了代码. 发现了有特别多错误后,我并没有选择马上找同学帮忙, ...

  4. php 实现hash表

    hash表又称散列表,通过把关键字key经过hash函数映射到hash表中某个位置获取记录. 存放记录的数组又称为hash表,映射函数称为hash函数 下面是php中实现hash表的方法 <?p ...

  5. [李居丽][다이아몬드][Diamond]

    歌词来源:http://music.163.com/#/song?id=484056974 作曲 : Damon Sharpe/JOHN HO/JEFF SHUM [作曲 : Damon Sharpe ...

  6. Java设计模式16：常用设计模式之观察者模式（行为型模式）

    1. Java之观察者模式(Observer Pattern) (1)概述: 生活中我们在使用新闻app,当我们对某一栏比较感兴趣,我们往往会订阅这栏新闻,比如我对军事栏感兴趣,我就会订阅军事栏的新闻 ...

  7. Java Math类学习

    1.  java.lang.Math Math类其成员皆为静态成员(static),无需创建对象,直接用类名Math作为前缀使用它们即可. 2.  Math类有两个静态常量:E(自然对数)和PI(圆周 ...

  8. BZOJ3667:Rabin-Miller算法(Pollard-Rho)

    Description Input 第一行:CAS,代表数据组数(不大于350),以下CAS行,每行一个数字,保证在64位长整形范围内,并且没有负数.你需要对于每个数字:第一,检验是否是质数,是质数就 ...

  9. 手动安装sublime插件babel-sublime

    (一)手动安装babel 在开发reactjs开发使用sublime时,想要代码高亮显示,需要安装babel-sublime插件,在Preferences中的Package Control菜单搜索In ...

  10. springboot不使用内置tomcat启动，用jetty或undertow

    Spring Boot启动程序通常使用Tomcat作为默认的嵌入式服务器.如果需要更改 - 您可以排除Tomcat依赖项并改为包含Jetty或Undertow: jetty配置: <depend ...