HTML&CSS基础-文档流

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

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

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文档流</title>

    </head>

    <body>

        <!--

            文档:

                指定的就是网页，每一个页面都是一个文档。

            文档流:

                文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

                元素在文档流中的特点:

                    块元素：

                        1>.块元素在文档流中会独占一行，块元素会自上向下排列;

                        2>.块元素在文档流中默认宽度是父元素的100%,宽度值是auto,当元素的宽度值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距;

                        3>.块元素在文档流中高度默认被内容撑开;

                    内联元素:

                        1>.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右;

                        2>.内联元素的高度和宽度默认都被内容撑开;

       -->

       <style type="text/css">

               .box1{

                   background-color: red;

                   padding-left: 500px;

                   font-size: 100px;

               }

               .box2{

                   width: 100px;

                   height: 100px;

                   background-color: yellow;

               }

               span{

                   background-color: deeppink;

                   font-size: 32px;

               }

       </style>

    </body>

        <div class="box1">我是box1的div元素</div>

        <div class="box2"></div>

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

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

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

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

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

</html>

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

Python3.x文件处理详解的更多相关文章

  1. Scrapy框架——介绍、安装、命令行创建，启动、项目目录结构介绍、Spiders文件夹详解（包括去重规则）、Selectors解析页面、Items、pipelines（自定义pipeline）、下载中间件（Downloader Middleware）、爬虫中间件、信号

    一 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可 ...

  2. 【Linux学习】Linux下用户组、文件权限详解

    原文地址:http://www.cnblogs.com/123-/p/4189072.html Linux下用户组.文件权限详解 用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在li ...

  3. 史上最全的maven pom.xml文件教程详解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  5. C++文件读写详解（ofstream,ifstream,fstream）

    C++文件读写详解(ofstream,ifstream,fstream) 这里主要是讨论fstream的内容: #include <fstream> ofstream //文件写操作 内存 ...

  6. 转载 Spring、Spring MVC、MyBatis整合文件配置详解

    Spring.Spring MVC.MyBatis整合文件配置详解   使用SSM框架做了几个小项目了,感觉还不错是时候总结一下了.先总结一下SSM整合的文件配置.其实具体的用法最好还是看官方文档. ...

  7. http头文件User-Agent详解【转载】

    原文地址:http://blog.csdn.net/andybbc/article/details/50587359 http头文件User-Agent详解 什么是User-Agent User-Ag ...

  8. Spring MVC、MyBatis整合文件配置详解

    Spring:http://spring.io/docs MyBatis:http://mybatis.github.io/mybatis-3/ Building a RESTful Web Serv ...

  9. PHP之PHP文件引用详解

    HP的文件引用涉及到四个函数: 文件引用 1.include()2.include_once()3.require()4.require_once() 这四个函数常常会给PHP初学者造成困扰,总的来说 ...

随机推荐

  1. JAVA eclipse Maven项目红叹号解决方案

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

  2. [Luogu5048] [Ynoi2019模拟赛]Yuno loves sqrt technology III[分块]

    题意 长为 \(n\) 的序列,询问区间众数,强制在线. \(n\leq 5\times 10^5\). 分析 考虑分块,暴力统计出整块到整块之间的众数次数. 然后答案还可能出现在两边的两个独立的块中 ...

  3. Linux部署DotNetCore记录

    一.背景 最近半年或最近三个月来,公司在计划大刀阔斧的规划重构新的产品.按目前的计划和宣传还是很令人期待的.前端预计应用现在很流行的前端框架,有Vue.ElementUI等,后端宣传了很多微服务.持续 ...

  4. 3dmax2020下载安装3dmax2020破解中文版下载安装

    3dmax在室内设计.建筑设计领域是最专业的效果图制作软件,也是在游戏动画等领域中在场景方面最专业的软件,目前最新3dmax2020版本已出,我分享亲测好用的软件包,拿走不谢! 3dmax2020安装 ...

  5. Siki_Unity_2-9_C#高级教程(未完)

    Unity 2-9 C#高级教程 任务1:字符串和正则表达式任务1-1&1-2:字符串类string System.String类(string为别名) 注:string创建的字符串是不可变的 ...

  6. EOS开发基础之一：源代码下载与开发环境搭建

    区块链最近挺火的,我又是个非常缺钱的人,所以紧跟了潮流一头扎进区块链的研究中. 这EOS项目是目前比较火的一个项目,相信很多朋友拿到这份EOS的源代码后都会一脸懵逼,因为……这代码写得太高级了,老纸看 ...

  7. 微软职位内部推荐-Principal Software Eng Mgr

    微软近期Open的职位: Job Title: &nbsp Principal Software Eng Mgr Work Location: Shanghai, China Job Desc ...

  8. BugPhobia开发篇章：Beta阶段第V次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第五次Scrum Meeting 敏捷开发起始时间 2015/12/17 00:00 A.M. 敏捷开发终止时间 2015/12/17 23 ...

  9. Linux内核分析作业第二周

    操作系统是如何工作的 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.函数调用堆栈 1.计算机工作三 ...

  10. Alpha冲刺-第一天

    1.1 今日完成任务情况以及遇到的问题. 完成任务情况 杜世康:弹幕的爬取 刘丹,李玉莹:系统统计功能实现 曹莹雯,尹楠: 主播管理功能实现 王静雅 :团队编码规范说明与本次博文撰写 遇到的问题 在爬 ...