HTML&CSS基础-内联元素的盒模型

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>内联元素的盒模型</title>

        <style type="text/css">

            span{

                background-color: red;

            }

            .box1{

                width: 300px;

                height: 300px;

                background-color: yellow;

            }

            .s1{

                /**

                 *     内容区:

                 *         内联元素不能设置,因为计时设置了也没有任何的效果

                 */

                width: 200px;

                height: 300px;

                /**

                 *     水平内边距:

                 *         内联元素是可以设置水平方向的内边距

                 */

                padding-left: 100px;

                padding-right: 100px;

                /**

                 *     垂直内边距:

                 *         内联元素可以设置垂直方向内边距，但是不会影响页面的布局,只不过显示效果会有所不同而已(它可以把它垂直方向的元素区域给覆盖而不会挤压)。

                 */

                padding-top: 50px;

                padding-bottom: 50px;

                /**

                 *     边框设置:

                 *         内联元素可以设置边框，虽然水平方向是可以影响到页面布局，但是垂直方向依旧是不会影响页面的布局哟~

                 */

                border: 50px blue solid;

                /**

                 *     水平外边距:

                 *         内联元素支持水平方向的外边距

                 */

                margin-left: 30px;

                margin-right: 100px;

                /**

                 *     垂直外边距:

                 *         内联元素不支持垂直外边距

                 */

                margin-top: 200px;

                margin-bottom: 200px;

            }

            .s2{

                /**

                 *     为右边的元素设置一个左外边距:

                 *         水平方向的外边距不会重叠，而是求和。

                 */

                margin-left: 100px;

            }

        </style>

    </head>

    <body>

        <span class="s1">我是一个span标签</span>

        <span class="s2">我是一个span标签</span>

        <span >我是一个span标签</span>

        <span >我是一个span标签</span>

        <div class="box1"></div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

Nginx的基本配置案例的更多相关文章

  1. Nginx防盗链配置案例配置,Nginx的知识分享

    防盗链的含义:网站内容不在自己服务器上,而通过技术手段,绕过别人放广告有利益的最终页,直接在自己的有广告有利益的页面上向最终用户提供此内容. 常常是一些名不见经传的小网站来盗取一些有实力的大网站的地址 ...

  2. Nginx插件之openresty反向代理和日志滚动配置案例

    Nginx插件之openresty反向代理和日志滚动配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.openresty介绍 1>.Nginx介绍 Nginx是一款 ...

  3. Nginx动静分离经典案例配置

    随着Nginx高性能Web服务器大量被使用,目前Nginx最新稳定版为1.2.6,张宴兄在实际应用中大量使用Nginx,并分享Nginx高性能Web服务器知识,使得Nginx在国内也是飞速的发展.那今 ...

  4. nginx虚拟主机配置

    nginx虚拟主机配置   虚拟主机的概念虚拟主机,就是把一台物理服务器划分成多个"虚拟"的服务器,每一个虚拟主机都可以有独立的域名和独立的目录nginx虚拟主机的配置nginx的 ...

  5. nginx简介与配置

    nginx简介 nginx(发音同engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行. nginx由俄罗斯的程序 ...

  6. https和server-status配置案例

    https和server-status配置案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.https协议 我们知道http协议是明文的,所以,你的数据发送不管是请求报文(r ...

  7. Flume 高可用配置案例+load balance负载均衡+ 案例:日志的采集及汇总

    高可用配置案例 (一).failover故障转移 在完成单点的Flume NG搭建后,下面我们搭建一个高可用的Flume NG集群,架构图如下所示: (1)节点分配 Flume的Agent和Colle ...

  8. 《nginx 二》深入理解nginx的各项配置

    Nginx应用场景 1.http服务器.Nginx是一个http服务可以独立提供http服务.可以做网页静态服务器. 2.虚拟主机.可以实现在一台服务器虚拟出多个网站,例如个人网站使用的虚拟机. 3. ...

  9. 服务发现之consul理论整理_结合Docker+nginx+Tomcat简单部署案例

    目录 一.理论概述 服务发现的概念简述 consul简述 二.部署docker+consul+Nginx案例 环境 部署 三.测试 四.总结 一.理论概述 服务发现的概念简述 在以前使用的是,N台机器 ...

随机推荐

  1. PHP7添加opcache.so模块

    启动php报错如下: # /usr/local/php7/sbin/php-fpm [-Apr- ::] NOTICE: PHP message: PHP Warning: PHP Startup: ...

  2. HashMap 源码解析(一)之使用、构造以及计算容量

    目录 简介 集合和映射 HashMap 特点 使用 构造 相关属性 构造方法 tableSizeFor 函数 一般的算法(效率低, 不值得借鉴) tableSizeFor 函数算法 效率比较 tabl ...

  3. Ps矩形工具的运用

    矩形工具 1.标识位置以及快捷键 位于左侧工具栏中,快键键是u,根据需求选择里面包含的工具 2.使用方法 鼠标左键点击工具,直接在图层使用,点击后拖住不放选择想要的图形后松手即可. 可以根据自身的需求 ...

  4. 英特尔帮助优化 Epic 的《堡垒之夜》* 和 Unreal Engine*

    您可能知道,Epic 的游戏<堡垒之夜>是 Unreal Engine* 技术的绝佳示例,<堡垒之夜>的开发团队正不断改进游戏,增加支持平台的数量并将信息反馈给引擎.为此,英特 ...

  5. 华为云对Kubernetes在Serverless Container产品落地中的实践经验

    华为云容器实例服务,它基于 Kubernetes 打造,对最终用户直接提供 K8S 的 API.正如前面所说,它最大的优点是用户可以围绕 K8S 直接定义运行应用. 这里值得一提是,我们采用了全物理机 ...

  6. A - 摆仙果

    题目描述 Adrian, Bruno与Goran三人参加了仙界的宴会,宴会开始之前先准备了一些仙果供三人品尝,但是仙果的摆放有顺序要求,如果把仙果摆错了位置,仙果就会消失而无法品尝到. 由于三人是第一 ...

  7. Ubuntu环境如何上传项目到GitHub网站？

    http://blog.csdn.net/ajianyingxiaoqinghan/article/details/70544159

  8. 就qq软件的优缺点

    qq对于现在的人来说,可谓是无所不知的,这也使得它迅速融入到人们的生活中,但它也是一把双刃剑,就优缺点我进行一下举例说明: 它的优点:qq由最初设计的一种聊天工具现在已经发展成为一个很全面多用途的工具 ...

  9. 重温jsp③

    Jsp详细   九大内置对象 Out jsp的输出流,用来向客户端响应 page 当前jsp对象!他的引用类型是object,即真身中有如下代码:object page=this: Session h ...

  10. python获取命令行参数的方法（汇总）

    介绍python获取命令行参数的方法:getopt模和argparse模块. python版本:2.7 一.getopt模块 主要用到了模块中的函数: options, args = getopt.g ...