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. 【第十课】Tomcat入门

    目录 1.Tomcat介绍 2.Tomcat安装部署和配置 (1)tomcat下载和解压 (2)jdk环境变量配置 (3)设置tomcat以普通用户启动 (4)查看tomcat的配置 (5)tomca ...

  2. 记录一次 @Autowired 无法注入（ spring依赖正常 idea显示有spring已注入的图标）导致空指针异常的原因

    首先,参考 https://blog.csdn.net/weixin_40475523/article/details/81085990 然后发现 是因为我把自己的这个类加上了 @Service 注解 ...

  3. Java关键字 Finally执行与break, continue, return等关键字的关系

    长文短总结: 在程序没有在执行到finally之前异常退出的情况下,finally是一定执行的,即在finally之前的return语句将在finally执行之后执行. finally总是在控制转移语 ...

  4. 简单测评拨号VPS——云立方&淘宝卖家

    做爬虫的同学不可避免地要使用代理IP,除了各网站公布的免费代理IP外,我们还可以选择拨号VPS,本文简单对两家(类)拨号VPS提供商进行测评,如有差错,欢迎指出,非常感谢. 使用过程 云立方 第一次听 ...

  5. [Hanani]JAVA大数相关学习记录

    1.Basic remains 题目链接 涉及内容: |大数读入|大数模|大数进制读入时转化为十进制|大数输出时转化为其他进制输出| import java.io.*; import java.mat ...

  6. Notes of Daily Scrum Meeting（12.8）

    今日团队任务总结: 团队成员 今日团队工作 陈少杰 使用例子对json数据进行解析 王迪 确定搜索功能的接口 金鑫 对布局文件进行协助修改 雷元勇 开始进行搜索功能的代码实现 高孟烨 按照学长的样本对 ...

  7. “数学口袋精灵”App的第一个Sprint计划（总结）

    “数学口袋精灵”App的第一个Sprint计划 ——11.20  星期五(第十天)第一次Sprint计划结束   第一阶段Sprint的目标以及完成情况: 时间:11月11号~11月20号(10天) ...

  8. Spark 实践——基于 Spark MLlib 和 YFCC 100M 数据集的景点推荐系统

    1.前言 上接 YFCC 100M数据集分析笔记 和 使用百度地图api可视化聚类结果, 在对 YFCC 100M 聚类出的景点信息的基础上,使用 Spark MLlib 提供的 ALS 算法构建推荐 ...

  9. [转帖]DRAM芯片战争，跨越40年的生死搏杀

    DRAM芯片战争,跨越40年的生死搏杀 超级工程一览 ·2017-08-20 12:50·半导体行业观察 阅读:1.4万 来源:内容来自超级工程一览 , 谢谢. DRAM是动态随机存储器的意思,也就是 ...

  10. php 的优缺点

    1.优点:开源 免费性 快捷性 [程序开发快,运行快,技术本身学习快] 插件丰富,网上的解决方案有很多,而且还有庞大的开源社区可以提供帮助. 跨平台性强  效率高   图像处理 面向对象 [在php4 ...