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. 20135323符运锦期中总结----Linux系统的理解及学习心得

    一.网易云课堂 1.各章节总结 第一周:计算机是如何工作的http://www.cnblogs.com/20135323fuyunjin/p/5222787.html 第二周:操作系统是如何工作的ht ...

  2. Spring.Net快速入门:控制翻转、依赖注入、面向切面编程

    Spring.Net主要功能: 1.IoC:控制翻转(Inversion of Control)  理解成抽象工厂翻转控制:就是创建对象的权利由开发人员自己控制New,转到了由容器来控制. 2.DI: ...

  3. PAT 1041 考试座位号

    https://pintia.cn/problem-sets/994805260223102976/problems/994805281567916032 每个PAT考生在参加考试时都会被分配两个座位 ...

  4. Minor GC vs Major GC vs Full GC

    http://www.importnew.com/15820.html https://plumbr.io/blog/garbage-collection/minor-gc-vs-major-gc-v ...

  5. MySQL的basedir

    C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.7\Data

  6. ESXi安装时遇到不识别的硬件的处理

    1. 部门新购置了一台inspur 四路 NF8480M4的服务器. 上架之后发现ESXi的标准安装盘无法安装. 找不到磁盘安装介质. 2. 处理办法, 找浪潮专家服务,报上序列号,要上相关的一些软件 ...

  7. Git 换行符检查 CRLF 与 LF

    遇到的问题 在 git 提交或是签出时,提示如下问题: [git] warning: LF will be replaced by CRLF | fatal: CRLF would be replac ...

  8. os模块+sys模块+random模块+shutil模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdir ...

  9. big emoji & emoji

    big emoji & emoji font-size: 10 rem; https://www.clickemoji.com/ https://www.cnblogs.com/xgqfrms ...

  10. 掌上电脑设备可以使用Ubuntu MATE 18.10 Linux映像了

    就在几天前,Ubuntu 18.10发布了.操作系统被称为“Cosmic Cuttlefish”,有多种版本可供选择,除了常见的GNOME -- Xfce (Xbuntu), KDE (Kubuntu ...