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. 用户态监控网络接口up、down事件
			
    网上搜索(https://blog.csdn.net/qq123386926/article/details/50695725)可以直接使用netlink现成的接口实现: #include <s ...
    
			
    2. 
						
  2. 使用prolog逻辑语言解决爱因斯坦斑马难题
			
    如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/06/28/sevenlang-prolog/. 目 ...
    
			
    3. 
						
  3. MQ中间件选型
			
    如果Java项目,数据量不大,用ActiveMQ,相对简单.支持JMS. 如果对性能.可靠性有一定要求,用RabbitMQ. 如果对性能有很高要求,甚至可牺牲一些可靠性,选kakfa. 在当前大数据时 ...
    
			
    4. 
						
  4. async（await）知识点
			
    async 函数是 Generator 函数的语法糖. async 函数对 Generator 函数的改进体现在: async 内置执行器. Generator 函数的执行必须靠执行器,需要调用 ne ...
    
			
    5. 
						
  5. 阿里巴巴Java开发手册- 控制语句
			
    1. [强制]在一个 switch 块内,每个 case 要么通过 break / return 等来终止,要么注释说明程序将继续执行到哪一个 case 为止 : 在一个 switch 块内,都必须包 ...
    
			
    6. 
						
  6. CXF运行wsdl2java :找不到系统路径
			
    已经配置好cxf的环境变量出现 解决方法:一定要设置JAVA_HOME这个变量
    
			
    7. 
						
  7. UI设计心得
			
    旁观型ui.追求一种无所不在,同时低调退隐的,奢华的存在感.内容由用户自己去搜索,浏览,构建,召唤,或是随着信息世界的某种外界趋势自然产生,ui作为始终凌驾于用户之上的高高在上的守护神,随时起到中承, ...
    
			
    8. 
						
  8. 用pyenv 和 virtualenv 搭建单机多版本python 虚拟开发环境
			
    作为主流开发语言, 用python 开发的程序越来越多. 方便的是大多linux系统里面都默认集成了python, 开发可以随时随地开始. 但有时候这也成为了一个短板, 比如说有时候我们需要开发和调试 ...
    
			
    9. 
						
  9. bzoj 1414: [ZJOI2009]对称的正方形
			
    Description Orez很喜欢搜集一些神秘的数据,并经常把它们排成一个矩阵进行研究.最近,Orez又得到了一些数据,并已经把它们排成了一个n行m列的矩阵.通过观察,Orez发现这些数据蕴涵了一 ...
    
			
    10. 
						
  10. pandas的map函数与apply函数的区别
			
    import pandas as pd import numpy as np df = pd.DataFrame(np.random.randn(4,3),columns=list("ABC ...
    
			
    11.