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. JS 字符串转换为number

    // '+ "42"' --> + 加上数字字符串可转换成数值 console.log(typeof (+ "42")); // 输出为 number

  2. Git学习笔记 第二章

    文件相关操作 修改readme.txt文件,执行 git status 命令查看当前仓库状态 git status 位于分支 master 尚未暂存以备提交的变更: (使用 "git add ...

  3. myBatis插件（plugins）

    MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用.默认情况下,MyBatis 允许使用插件来拦截的方法调用包括: Executor (update, query, flushState ...

  4. shell脚本--逻辑判断与字符串比较

    涉及到比较和判断的时候,要注意 整数比较使用-lt,-gt,ge等比较运算符,详情参考:整数比较 文件测试使用 -d, -f, -x等运算发,详情参考:文件测试 逻辑判断使用    && ...

  5. ping命令返回的TTL值判断操作系统

    通过简单的ping命令,查看返回的TTL值来判断对方的操作系统 生存时间(TTL)是IP分组中的一个值,网络中的路由器通过察看这个值就可以判断这个IP分组是不是已经在网络中停留了很久,进而决定是否要将 ...

  6. Fuck me 忘记改REDO 造成复制用户超级慢

    . 一个用户的测试环境, 想着复制用户进行功能和单点性能测试. 但是用户数据量较大,见图 2. 发现在测试环境里面复制一个用户 大概耗时2小时20min的时间, 测试虚拟机的配置: 最开始注意到awr ...

  7. scipy积分 integral

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/5/24 15:03 # @Author : zhang chao # @Fi ...

  8. apache2.4.29安装脚本

    #!/bin/bash . /etc/init.d/functions yum install -y expat-devel gcc gcc-c++ zlib-devel openssl-devel ...

  9. codeforces548B

    Mike and Fun CodeForces - 548B Mike and some bears are playing a game just for fun. Mike is the judg ...

  10. Sql 标识列 增长1000

    Sql 标识列 增长1000 的解决办法: 1. Open "SQL Server Configuration Manager" 2. Click "SQL Server ...