1、什么是标准文档流

<!--  什么是标准文档流

        宏观的将，我们的web页面和ps等设计软件有本质的区别

        web 网页的制作 是个“流”  从上而下 ，像 “织毛衣”

        而设计软件 ，想往哪里画东西 就去哪里画

        标准文档流下 有哪些微观现象？

        1.空白折叠现象

        2.高矮不齐，底边对齐

        3.自动换行，一行写不满，换行写

     -->

2、行内元素和块级元素转换

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

常用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素

<a> <span> <br> <i> <em> <strong> <label> 行内元素在一行显示，设置宽度，高度无效





常用的行内块状元素：

<img>   <input>





-------------------------------------------




<style type="text/css">

        .box1{

            /*将块元素转化成行内元素*/

            display: inline-block;

            width: 200px;

            height: 40px;

            border: 1px solid red;

        }

        .box2{

            margin-top: 20px;

            width: 200px;

            height: 40px;

            font-size: 40px;

            border: 1px solid green;

        }

        span{

            background-color: yellow;

            width: 100px;

            height: 40px;

            /*将行内元素转化成块级元素*/

            display: block;

            /*隐藏当前的标签 不占位置*/

            /*display: none;*/

            /*隐藏当前的标签，占位置*/

            visibility: hidden;

        }

        img{

            width: 300px;

            height: 300px;

            /*隐藏当前的标签*/

            /*display: none;*/

        }

    </style>

</head>

<body>

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

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

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

    <span>alex</span>

    <span>alex</span>

    <!-- form表单中 input textarea select -->

    <img src="./images/企业1.png" alt="">

    <img src="./images/企业2.png" alt="">

</body>


												


											
前端-CSS-7-标准文档流&行内元素和块级元素转换的更多相关文章
	

    
								
  1. 浅谈，html\css脱离标准文档流相关
		
    (个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...
    
		
    2. 
						
  2. HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)
		
    一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应 ...
    
		
    3. 
						
  3. CSS标准文档流     块级元素和行内元素
		
    标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
    
		
    4. 
						
  4. 前端css盒模型及标准文档流及浮动问题
		
    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
    
		
    5. 
						
  5. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
		
    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器  ...
    
		
    6. 
						
  6. {03--CSS布局设置}  盒模型 二 padding    bode   margin 标准文档流   块级元素和行内元素  浮动  margin的用法  文本属性和字体属性  超链接导航栏    background  定位   z-index
		
    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
    
		
    7. 
						
  7. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
		
    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
    
		
    8. 
						
  8. css标准文档流
		
    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...
    
		
    9. 
						
  9. css排版之-标准文档流
		
    标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素.       1.行内元素不占据单独的空间,依附于块级元素,行 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JVM监控
			
    jconsole 说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下 ...
    
			
    2. 
						
  2. 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ
			
    在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈.  ...
    
			
    3. 
						
  3. AppBox中main树节点单击事件JS（还有叶子的节点的页面链接）
			
    AppBox中main.aspx.csif (menu.IsTreeLeaf) {                        node.Leaf = true;                   ...
    
			
    4. 
						
  4. POJ2559最大矩形面积——单调栈
			
    题目:http://poj.org/problem?id=2559 #include<iostream> #include<cstdio> using namespace st ...
    
			
    5. 
						
  5. Web自动化测试框架Watir(基于Ruby) - 第2章 使用Watir写自动化测试脚本
			
    一.先来看一个小DEMO 通过上一篇博文<Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署>的介绍,我们已经有了完整Watir运行环境,现在我们可以来 ...
    
			
    6. 
						
  6. socket()函数介绍
			
    socket()函数介绍 socket函数介绍 函数原型 domain type protocol errno 示例 函数原型 socket()函数的原型如下,这个函数建立一个协议族为domain.协 ...
    
			
    7. 
						
  7. ExtJS  xtype 一览
			
    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...
    
			
    8. 
						
  8. java枚举使用详解,整理的很好，只能收下。。。
			
    java枚举使用详解 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素 ...
    
			
    9. 
						
  9. lwip编译选项
			
    修改默认选项时,不要修改opt.h文件,通过lwipopts.h修改. 和内存管理以及TCP发送性能相关的选项 // 为1时使用系统库malloc/free进行内存管理 #ifndef MEM_LIB ...
    
			
    10. 
						
  10. windows下使用RedisCluster集群简单实例
			
    一.开发环境 ruby环境准备 下载 64位的 RubyInstaller并安装 地址http://rubyinstaller.org/downloads/勾选下面三个不用配置环境变量 Image.p ...
    
			
    11.