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. flynn 开源paas 平台安装试用
			
    flynn 是一个不错的开源paas 平台,基于git 以及容器技术,开发模型与 heroku 基本一样,同时构建方式就是基于heroku 的buildpacks 安装 官方文档提示说明是ubuntu ...
    
			
    2. 
						
  2. tomcat源码阅读之Catalina和Bootstrap解析
			
    一.Cataling类分析: 1.Catalina类是启动类,用于启动或者关闭Server对象,它包含一个Digester对象,用于解析tomcat配置文件:conf/server.xml;调用pro ...
    
			
    3. 
						
  3. HttpCookieCollection类
			
    一.最近在研究HttpRequest类的时候,发现返回的cookie集合是存在放这个类的对象的.而实际上这个类只是一个HttpCookie对象的集合,关于HttpCookie类可以查看http://w ...
    
			
    4. 
						
  4. Input输入控制
			
    1.Input只能输入正整数 <html> <head> <title>只能输入正整数</title> </head> <body&g ...
    
			
    5. 
						
  5. ALGO-2_蓝桥杯_算法训练_最大最小公倍数
			
    问题描述 已知一个正整数N,问从1~N中任选出三个数,他们的最小公倍数最大可以为多少. 输入格式 输入一个正整数N. 输出格式 输出一个整数,表示你找到的最小公倍数. 样例输入 样例输出 数据规模与约 ...
    
			
    6. 
						
  6. 在VS2010中配置ICE插件的步骤
			
    ICE为不同的IDE都提供了插件.本文介绍VS2010下的配置. 首先建立一个控制台工程,以此为例,进行介绍. 1.激活插件 选择工具-> IceConfiguration或者在工程右键选择Ic ...
    
			
    7. 
						
  7. [转]SendKeys.Send 方法
			
    SendKeys.Send 方法 向活动应用程序发送击键. 转载自: https://msdn.microsoft.com/zh-cn/library/system.windows.forms.sen ...
    
			
    8. 
						
  8. RBAC相关的配置
			
    一.什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注. 在RBAC中,权限与角色相关联,用户通 ...
    
			
    9. 
						
  9. 【Codeforces】CF 467 C George and Job（dp）
			
    题目 传送门:QWQ 分析 dp基础题. $ dp[i][j] $表示前i个数分成j组的最大和. 转移显然. 吐槽:做cf题全靠洛谷翻译苟活. 代码 #include <bits/stdc++. ...
    
			
    10. 
						
  10. java编译器
			
    编译: .java变成.class        前端编译   Sun javac Eclipse ECJ .class变成机器码      运行期编译 等HostSpot VM c1,c2 .jav ...
    
			
    11.