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

                                          作者:尹正杰

版权声明:原创作品,谢绝转载!否则将追究法律责任。

一.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>内联元素的盒模型</title>
  6.  
  7. <style type="text/css">
  8.  
  9. span{
  10. background-color: red;
  11. }
  12.  
  13. .box1{
  14. width: 300px;
  15. height: 300px;
  16. background-color: yellow;
  17. }
  18.  
  19. .s1{
  20. /**
  21. * 内容区:
  22. * 内联元素不能设置,因为计时设置了也没有任何的效果
  23. */
  24. width: 200px;
  25. height: 300px;
  26.  
  27. /**
  28. * 水平内边距:
  29. * 内联元素是可以设置水平方向的内边距
  30. */
  31. padding-left: 100px;
  32. padding-right: 100px;
  33.  
  34. /**
  35. * 垂直内边距:
  36. * 内联元素可以设置垂直方向内边距,但是不会影响页面的布局,只不过显示效果会有所不同而已(它可以把它垂直方向的元素区域给覆盖而不会挤压)。
  37. */
  38. padding-top: 50px;
  39. padding-bottom: 50px;
  40.  
  41. /**
  42. * 边框设置:
  43. * 内联元素可以设置边框,虽然水平方向是可以影响到页面布局,但是垂直方向依旧是不会影响页面的布局哟~
  44. */
  45. border: 50px blue solid;
  46.  
  47. /**
  48. * 水平外边距:
  49. * 内联元素支持水平方向的外边距
  50. */
  51. margin-left: 30px;
  52. margin-right: 100px;
  53.  
  54. /**
  55. * 垂直外边距:
  56. * 内联元素不支持垂直外边距
  57. */
  58. margin-top: 200px;
  59. margin-bottom: 200px;
  60. }
  61.  
  62. .s2{
  63. /**
  64. * 为右边的元素设置一个左外边距:
  65. * 水平方向的外边距不会重叠,而是求和。
  66. */
  67. margin-left: 100px;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <span class="s1">我是一个span标签</span>
  73. <span class="s2">我是一个span标签</span>
  74. <span >我是一个span标签</span>
  75. <span >我是一个span标签</span>
  76. <div class="box1"></div>
  77. </body>
  78. </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. JAVA eclipse Maven项目红叹号解决方案

    我是通过 Windows --> show view --> problems 查看到发现 ch.qos.logback 1.1.1 出现了错误, 于是我换成了 ch.qos.logbac ...

  2. Unity3D Shader 学习笔记(一):初识Shader

    第一节:图形处理器简史 GPU发展简史 GPU英文全称Graphic Procssing Unit. T&L变换和光照流水线 可编程GPU GPU的优点和缺点 第二节:Unity Shader ...

  3. 冲刺Two之站立会议6

    今天继续了昨天的工作,对视频进行优化.因为昨天的工作没有达到预期的效果,所以又继续对音质和画面质量做了相应的优化.还对相应的聊天室界面进行了优化.

  4. 《实时控制软件设计》之Github提交作业步骤

    在掌握GIT/GITHUB基本操作后,接下来把第一次的编程作业提交到 https://github.com/RTCSD15/HOMEWORK1 ,把第二次的编程作业提交到https://github. ...

  5. c++实现计算器功能 -----初代

    由于时间问题,我就写的简单一点. 课程作业一 git链接: Operations 里面的Operations.cpp文件就是完成品. 1 我就简单的对我原来的代码进行了重构,原本的代码已经把函数都分得 ...

  6. VS社区版 使用 OpenCover 获取测试代码覆盖率

    注:暂不支持VS2017 Visual Studio 2015 社区版没有集成代码覆盖率的功能,所以想在VS社区版中获取单元测试的代码覆盖率等数据,需要使用到插件 OpenCover. 下载 Open ...

  7. 基于python的机器学习实现日元币对人民币汇率预测

    ## 导入所需的包 import pandas as pd import numpy as np import matplotlib.pyplot as plt import tensorflow a ...

  8. spring整合redis(jedis)

    真是一步一个坑阿,学点新技术,这么难,这个异常: java.lang.IllegalStateException: Could not load TestContextBootstrapper [nu ...

  9. 设置macbook休眠模式

    前言: macbook默认合上盖默认是进入混合休眠模式模式(mode 3),此时电脑还会供电.不想耗电的话关机的话当前的工作状态就丢失了. macbook实际上是可以进入休眠模式的,只是没开放出来,我 ...

  10. Android 自己写一个打开图片的Activity

    根据记忆中eoe的Intent相关视频,模仿,写一个打开图片的Activity 1.在主Activity的button时间中,通过设置action.category.data打开一个图片.这时代码已经 ...