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. About Apache Cordova
			
    Apache Cordova is a set of device APIs that allow a mobile app developer to access native device fun ...
    
			
    2. 
						
  2. 防范SQL注入漏洞攻击
			
    原理:通过拼sql语句,在输入框里输入' ; SHOW TABLES;注入这样的代码, 防范:你把全部的特殊符号都过滤掉(如单引号,双引号),自然就不会被注入 使用mysql_real_escape_ ...
    
			
    3. 
						
  3. FastAdmin 系统配置中添加选项卡
			
    群里有小伙伴问怎么在系统配置中添加选卡,之前试过. 流程如下 刷新页面,然后就有了.
    
			
    4. 
						
  4. jvm 知识点
			
    双亲委派模型的工作流程是: 如果一个类加载器收到了类加载的请求,它首先不会自己去尝试加载这个类,而是把请求委托给父加载器去完成,依次向上,因此,所有的类加载请求最终都应该被传递到顶层的启动类加载器中, ...
    
			
    5. 
						
  5. Charles ：mac上的手机代理
			
    能在手机访问电脑上的网页. 配置: 下载 Charles,选中 Proxy => macOS Proxy Proxy => Proxy Setting 配置上端口 手机无线手动代理,配置上 ...
    
			
    6. 
						
  6. Spring Cloud 入门 之 Hystrix 篇（四）
			
    原文地址:Spring Cloud 入门 之 Hystrix 篇(四) 博客地址:http://www.extlight.com 一.前言 在微服务应用中,服务存在一定的依赖关系,如果某个目标服务调用 ...
    
			
    7. 
						
  7. php中二维数组排序问题方法详解
			
    PHP中二维数组排序,可以使用PHP内置函数uasort() 示例一: 使用用户自定义的比较函数对数组中的值进行排序并保持索引关联 回调函数如下:注意回调函数的返回值是负数或者是false的时候,表示 ...
    
			
    8. 
						
  8. [转]Nginx反向代理和负载均衡部署指南
			
    Nginx反向代理和负载均衡部署指南   1.        安装 1)         从Nginx官网下载页面(http://nginx.org/en/download.html)下载Nginx最 ...
    
			
    9. 
						
  9. Mono.Cecil 修改目标.NET的IL代码保存时报异常的处理。
			
    使用Mono.Cecil对目标.NET的DLL程序进行IL修改后保存时报“Failed to resolve assembly: ' xxxxxx, version=xxxxx,Culture=xxx ...
    
			
    10. 
						
  10. PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113
			
    PHP按最大宽高等比例缩放图片类 http://www.oschina.net/code/snippet_876708_21113 php 等比例缩小图片 http://www.111cn.net/p ...
    
			
    11.