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. javac编译提示错误需要为 class、interface 或 enum

    HelloWorld.java:1: 需要为 class.interface 或 enum锘缝ublic class HelloWorld{^1 错误 这个错误出现的原因主要是在中文操作系统中,使用一 ...

  2. Hacked VisualSVN Server by PHP to allow user change password

    index.php <?php$username = $_SERVER["PHP_AUTH_USER"]; //经过 AuthType Basic 认证的用户名$authed ...

  3. jmeter（psot） 表单提交 注意项

    Form表单提交:直接使用表单方式提交即可,此方式采取页面直接跳转的形式.用jmeter请求的时候,日志打印传的参数是空的.考虑到form提交和http的提交请求头可能是不一样的,所以优化了请求头: ...

  4. python3_列表、元组、集合、字典

    列表list #列表的基本操作 >>> a=[] #创建空列表 >>> a = [0,1,2,3,4,5] #创建列表并初始化,列表是[]包含由逗号分隔的多个元素组 ...

  5. ACM数论之旅12---康托展开（(*ﾟ▽ﾟ*)装甲展开，主推进器启动，倒计时3,2,1......）

    在我们做题中,搜索也好,动态规划也好,我们往往有时候需要用一个数字表示一种状态 比如有8个灯泡排成一排,如果你用0和1表示灯泡的发光情况 那么一排灯泡就可以转换为一个二进制数字了 比如 0110011 ...

  6. 关于Nginx+Gunicorn+uwsgi+后端框架到app架构梳理和思考

    今天下午在思考以前一直在疑惑的问题.也就是在拥有nginx这样的服务器存在了为什么还需要uwsgi这样的服务器.他们之间究竟是什么关系. 我一直在疑惑分层的问题,今天也在这里总结写出我的思考. 首先上 ...

  7. jvm学习三：自定义ClassLoader

    第一节我们说过一句话:所有的Java虚拟机实现必须在每个类或接口被Java程序“ 首次主动使用”时才初始化他们 但类加载器却不是这样:类加载器不需要等到某个类“被首次主动使用”时才加载类 两句话的区别 ...

  8. BZOJ3724 PA2014Final Krolestwo（欧拉回路+构造）

    如果没有长度为偶数的限制,新建一个点向所有奇点连边,跑欧拉回路即可,显然此时一定存在欧拉回路,因为所有点度数都为偶数. 考虑长度为偶数的限制,将每个点拆成两个点放进一个二分图里,那么每条原图中的边在二 ...

  9. BZOJ1304 CQOI2009叶子的染色（树形dp）

    令f[i]表示i子树内最少染色次数,加上012状态分别表示该子树内叶节点已均被满足.存在黑色叶节点未被满足.存在白色叶节点未被满足,考虑i节点涂色情况即可转移.事实上贪心也可以. #include&l ...

  10. 自学工业控制网络之路1.3-典型的现场总线介绍FF

    返回 自学工业控制网络之路 自学工业控制网络之路1.3-典型的现场总线介绍FF 1994年6月,ISP和WORLDFIP合并成立现场总线基金会FF.1998年,FF基金会开发了HSE 10/100Mb ...