HTML&CSS基础-浏览器默认样式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.查看浏览器的默认样式

1>.编写测试HTML代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>默认样式</title>

        <style type="text/css">

            /**

             *     浏览器的默认样式:

             *         浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding；

             *         而浏览器的这些默认样式，正常情况下我们时不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉；

             *

             */

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

            }

            p{

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

    </body>

</html>

2>.打开浏览器查看效果

3>.打开debug模式

4>.查看div标签，并没有看到任何边距配置，如下图所示

5>.查看body标签，发现body竟然有默认的外边距，如下图所示

6>. 继续审查元素查看p标签，发现浏览器也为它设置了默认的上边距和下边距

二.去掉默认样式的代码

1>.编写二去掉默认样式的HTML代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>默认样式</title>

        <style type="text/css">

            /**

             *     浏览器的默认样式:

             *         浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding；

             *         而浏览器的这些默认样式，正常情况下我们时不需要使用的，所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统去掉；

             *

             */

            /**

             *     清除浏览器的默认样式，虽然说"*"这种同配选择器性能并不好，后面会为大家介绍更适合的方法

             */

            *{

                margin: 0;

                padding: 0;

            }

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

            }

            p{

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

        <p>我是一个p标签</p>

    </body>

</html>

2>.浏览器查看效果如下图所示

3>.打开浏览器的debug模式验证效果如下图所示

Nginx的介绍以及编译安装详解的更多相关文章

  1. centOS linux 下nginx编译安装详解

    Nginx的官方网站是 www.nginx.org   Nginx的下载地址是:http://nginx.org/en/download.html   由 于官网的设计非常简洁不大气不上档次,所以我们 ...

  2. linux 编译安装详解

    相信大家大多都听过linux 的编译安装,但它到底是怎么把源代码变为自己电脑里可以应用的软件哪?今天,小编就以httpd 为例详细讲解一下. 什么是编译安装--编译:将源代码变为机器可执行的代码文件. ...

  3. linux http服务源码编译安装详解

    相信大家大多都听过linux 的编译安装,但它到底是怎么把源代码变为自己电脑里可以应用的软件哪?今天,小编就以httpd 为例详细讲解一下. 什么是编译安装——编译:将源代码变为机器可执行的代码文件. ...

  4. hadoop2.2.0 centos 编译安装详解

    http://blog.csdn.net/w13770269691/article/details/16883663 废话不讲,直切正题. 搭建环境:Centos x 6.4 64bit 1.安装JD ...

  5. Linux—编译安装详解

    编译安装python3 1.python是通过C语言编写,所以在编译安装python3时需要在C语言环境 [root@localhost ~]# yum install -y gcc 2.python ...

  6. apache源码编译安装详解

    查看是否安装 rpm -qa httpd        如果已安装,则卸载:rpm -e 卸载  --nodeps 不考虑意外        下载 wget http://mirrors.sohu.c ...

  7. centOS linux 下PHP编译安装详解

    一.下载PHP源码包 wget http://php.net/distributions/php-5.6.3.tar.gz   二.添加依赖应用 yum install -y gcc gcc-c++ ...

  8. Bitcoin源代码编译安装详解

    一.安装准备 安装环境:虚拟机Ubuntu 16.04 内存:2G 错误1:如果这里内存分配为1G,则会产生如下错误: g++ : internal compiler error: Killed (p ...

  9. Mysql编译安装详解

    wget http://mirrors.cnnic.cn/apache/httpd/mysql-5.5.20.tar.gz root@Mysql-server ~]# yum install -y c ...

随机推荐

  1. .NET组件介绍系列

    一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)http://www.cnblogs.com/pengze0902/p/6122311.html 高效而稳定的企业级.NET Offi ...

  2. ubuntu——caffe配置deeplab

    1. 下载deeplab 2. 安装matio sudo apt-get install libmatio-dev 3. 修改Makefile文件 LIBRARIES += glog gflags p ...

  3. “数学口袋精灵”App的第三个Sprint计划----开发日记(第十一天12.17)

    项目进度: 基本完成一个小游戏,游戏具有:随机产生算式,判断对错功能.通过轻快的背景音乐,音效,给玩家提供一个良好的氛围.  任务分配: 冯美欣:设计"数学口袋精灵"App图标.整 ...

  4. 注解Annotation

    @java.lang.annotation.Target(value={java.lang.annotation.ElementType.TYPE}) @java.lang.annotation.Re ...

  5. Android中加解密算法大全

    Base64编码 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,本质上是一种将二进制数据转成文本数据的方案,对于非二进制数据,是先将其转换成二进制形式,然后每连续6比特(2的6次 ...

  6. Java日志输出问题

    以前有一个同事,说自己的Java控制台程序,输出的信息,打印信息以及错误信息,在windows的command line刷屏,想复制下来,想要自输出到日志文件里. 自己写文件太麻烦,他从网上只找到用重 ...

  7. curl用法一例 传递代理用户名密码

    curl -u bb0e1736d66744495b814b942fd04a80:0e11dda88048ed52cc8758caf06dc6b4 https://jinshuju.net/api/v ...

  8. children()与find()区别

    1.children() 返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历: 2.find() 返回被选元素的后代元素,一路向下直到最后一个后代.

  9. C1考试科目一知识总结

    第二 交通信号 交通信号灯 机动车信号灯(红灯停,路灯走,黄灯等) 车道信号灯(绿色箭头表示该车道通行,红色箭头和红叉表示该车道禁止通行) 方向指示信号灯(红色箭头表示该方向禁止通行,绿色箭头表示该方 ...

  10. BZOJ1030[JSOI2007]文本生成器——AC自动机+DP

    题目描述 JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生成一些文章―――总是生成一篇长度固 ...