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. java-过滤器、拦截器

    1.基础知识 1.1面向对象编程(OOP).面向切面编程(AOP) 面向对象编程: 将需求功能划分为不同的.相对独立的和封装良好的类,使他们有属于自己的行为,依靠继承和多态等来定义彼此的关系. 面向切 ...

  2. 软件工程导论课后习题Github作业（把一个英文句子中的单词次序逆序，单词中字母正常排列）

    Java源代码    package yly; import java.util.Scanner; public class ruanjian { public static void main(St ...

  3. [Intellij IDEA]_eclipse项目导入

    http://www.cnblogs.com/lindp/p/4484390.html

  4. Python 中的字符串（str）、字典（dict）详解及操作方法

    一.字符串 在python中字符串是一种重要数据类型.其他数据类型分别为: 数字-number -------- int.long.float.complex这几种 字符串-string ------ ...

  5. Difference between prop and attr in different version of jquery

    jQuery <1.9$('#inputId').attr('readonly', true); jQuery 1.9+$('#inputId').prop('readonly', true); ...

  6. Oracle的简单的创建dblink以及进行数据迁移的方法

    1. 创建dblink 语法如下: create public database link zhaobsh connect to lcoe739999 identified by Test6530 u ...

  7. pandas聚合aggregate

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

  8. 关于miniconda的安装，配置以及包批量安装和使用

    由于时间很晚了.就不写废话了. conda官方文档地址:http://conda.pydata.org/docs/ 一切其实都可以从miniconda的文档找到,这里只纪录自己操作的时候遇到的值得一说 ...

  9. loadrunner基础学习笔记二

    virtual user generator(vugen) 在测试环境中,loadrunner在物理计算机上使用vuser代替实际用户.vuser以一种可重复.可预测的方式模拟典型用户的操作,对系统施 ...

  10. python之tkinter使用-文件系统遍历

    # tkinter:文件系统遍历 import tkinter as tk, os from time import sleep class DirList(object): def __init__ ...