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. filter运行出现 <filter object at 0x000001B68F052828> 判断素数

    刚接触filter时  运行总是出现<filter object at 0x000001B68F052828>  得不到想要的数据 后来发现是因为filter的结果是一个数组 需要 lis ...

  2. github 心得体会

     https://github.com/xu123/text 学习了很多知识感觉很有趣 git config :配置git git add:更新working directory中的文件至stagin ...

  3. 第三个spring冲刺第1天

    在第二阶段,我们的要实现的基本功能都已经基本是实现了,现在在第三阶段,我们会完善算法的改进.容错问题的兼容还有附加的其他功能,例如计时等

  4. docker+redis 持久化配置（AOF）

    RDB持久化与AOF持久化简单描述 RDB:RDB使用快照的方式存储数据库中的内容,直接将所有键值对数据全部存入二进制文件.建议使用BGSAVE来进行备份,整个过程会新fork一个子进程来执行,不影响 ...

  5. jQuery empty() vs remove()

    https://stackoverflow.com/questions/3090662/jquery-empty-vs-remove http://www.cnblogs.com/yeer/archi ...

  6. php多进程pcntl学习-僵尸进程

    上个月写的文章,php多进程pcntl学习(一)现在发现并不完整,因为虽然提到了关闭子进程,但是并没有回收子进程,简单的说就是当子进程比父进程先退出,而父进程没对其做任何处理的时候,子进程将会变成僵尸 ...

  7. canvas高斯模糊算法

    对于模糊图片这个效果的实现,其实css3中的filter属性也能够实现,但是这个属性的兼容性不是很好,所以我们通常不用这种方法实现,而使用canvas配合JS实现. <span style=&q ...

  8. python 协程库gevent学习--gevent数据结构及实战(三)

    gevent学习系列第三章,前面两章分析了大量常用几个函数的源码以及实现原理.这一章重点偏向实战了,按照官方给出的gevent学习指南,我将依次分析官方给出的7个数据结构.以及给出几个相应使用他们的例 ...

  9. Jest & React & Enzyme

    Jest & React & Enzyme auto units testing https://reactjs.org/docs/test-utils.html https://gi ...

  10. PHP IF ELSE简化/三元一次式的使用

    一般我们会这样写: <? if($_GET['time']==null) { $time = time(); } else { $time = $_GET['time']; } echo $ti ...