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. Understanding Safari Reader
			
    Interesting enough to find out the Reader function in Safari is actually Javascript and there are ma ...
    
			
    2. 
						
  2. netty 知识点
			
    Netty:异步.事件驱动的NIO(非阻塞Non-blocking IO)框架 netty 教程:http://wiki.jikexueyuan.com/project/netty-4-user-gu ...
    
			
    3. 
						
  3. chrome浏览器network面板出现：Provisional headers are shown 提示
			
    一般来说,如果看到这个提示,说明这个请求并没有发送出去. 具体原因有多种: 请求被某些扩展如 Adblock 拦截了 请求被墙了 走本地缓存或者 dataurl 的请求 client发送请求后,由于各 ...
    
			
    4. 
						
  4. IdentityHashMap 与 HashMap 的区别
			
    IdentityHashMap 中的 key 允许重复 IdentityHashMap 使用的是 == 比较 key 的值(比较内存地址),而 HashMap 使用的是 equals()(比较存储值) ...
    
			
    5. 
						
  5. FineUI 3升级4.1.1时，SingleClickExpand属性改什么了？ （树控件单击展开）
			
    private Tree InitTreeMenu(List<Menu> menus) { Tree treeMenu = new Tree(); treeMenu.ID = " ...
    
			
    6. 
						
  6. POJ3666序列最小差值
			
    题目:http://poj.org/problem?id=3666 dp方程可以是 d [ i ] [ j ] = min ( d [ i - 1 ] [ k ] ) + abs ( a [ i ]  ...
    
			
    7. 
						
  7. codevs2189数字三角形（%100）
			
    题目:http://codevs.cn/problem/2189/ %100的话就加一维状态.把最优性改为可行性(存在性). #include<iostream> #include< ...
    
			
    8. 
						
  8. jmeter --自动化badboy脚本开发技术
			
    jmeter --自动化badboy脚本开发技术 一般人用badboy都是使用它的录制功能,其它badboy还是一款自动化的工具,它可以实现检查点.参数化.迭代.并发.报告.断点等功能.本文就这些功能 ...
    
			
    9. 
						
  9. NPOI 创建Excel 设置宽度 样式 颜色对比表
			
    前两天用NPOI来操作Office软件,在使用的时候有点问题,也有收获,就做个笔记 记录下来,主要做的事数据的导出功能.一些公共的方法,做个笔记. 更多的详细内容可以到NPOI的官方教程去看  htt ...
    
			
    10. 
						
  10. Git Bash主题配置
			
    考虑到window的 Vim操作,发现Git Bash自带命令行很好用. Vim写作Markdown真的好用 还不是为了装逼 只是配色很不爽,就找了这个. 不要怕非常简单麻烦,需要2步骤 1- 打开g ...
    
			
    11.