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. [BZOJ4144][AMPPZ2014]Petrol[多源最短路+MST]

    题意 题目链接 分析 假设在 \(a \rightarrow b\) 的最短路径中出现了一个点 \(x\) 满足到 \(x\) 最近的点是 \(c\) ,那么我们完全可以从 \(a\) 直接走到 \( ...

  2. 内存和CPU资源控制

    数据库系统的资源是指内存和CPU(处理器)资源,拥有资源的多寡,决定了数据查询的性能.当一个SQL Server实例上,拥有多个独立的工作负载(workload)时,使用资源管理器(Resource ...

  3. TICTOC: Header Only C++ Timer

    感觉最近的更新频率略高啊-哈哈- 这次的带来的是一个十分简单便利的C++计时库. 项目地址:https://github.com/miaoerduo/tictoc 欢迎Start和提MR. 项目中有详 ...

  4. 《Effective Java》学习笔记 —— 通用程序设计

    本章主要讨论局部变量.控制结构.类库.反射.本地方法的用法及代码优化和命名惯例. 第45条 将局部变量的作用域最小化 * 在第一次使用的它的地方声明局部变量(就近原则). * 几乎每个局部变量的声明都 ...

  5. 如何有效的报告bug?

    对于比较棘手的bug,反馈务须清晰.详细.精确,我们给出以下6个建议: 1.现场演示:重复bug出现的操作步骤.这个适用于公司内部人员.   2.详细描述:在什么系统使用哪个版本的YoMail,做了什 ...

  6. 一个web应用的诞生(3)--美化一下

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的b ...

  7. Python3.7 + jupyter安装(CentOS6.5)

    Python3.7 + jupyter安装(CentOS6.5) 方法一(anaconda): anaconda是一个开源的Python发行版本 包含conda,python等大量的科学包以及依赖 优 ...

  8. spring boot 2.0 源码分析(五)

    在上一篇文章中我们详细分析了spring boot是如何准备上下文环境的,今天我们来看一下run函数剩余的内容.还是先把run函数贴出来: /** * Run the Spring applicati ...

  9. 2-Sixteenth Scrum Meeting-20151216

    任务安排 成员 今日完成 明日任务 闫昊 写完学习进度记录的数据库操作  写完学习进度记录的数据库操作 唐彬 编写与服务器交互的代码  编写与服务器交互的代码 史烨轩 获取视频url   余帆  本地 ...

  10. 【读书笔记】Linux内核设计与实现(第十八章)

    18.1 准备开始 需要: 1.一个确定的bug.但是,大部分bug通常都不是行为可靠定义明确的. 2.一个藏匿bug的内核版本. 18.2 内核中的bug bug发作时的症状: 明白无误的错误代码( ...