block 和 inline 的区别是？（2）
作者：棕熊 来源：棕熊@Think Fast 发布时间：2009-12-08 13:00:00
- Block Box VS Inline Box
大家应该对CSS的盒式模型有些了解了吧。网页上内容的布局，都是靠controlling box来实现的。
在CSS2.1的规范里，Controlling box 分三类——block box, inline box, 和至今都没怎么被广泛支持的run-in box。这就是规范中第二处提到block 和inline 的地方。网页上的内容，不论是不是有标签包围，或者设定了何种显示方式，最终都会被计算成一个 controlling box，并应用布局规则。
好在这个过程对于前端开发来说是透明的，大家可以不用去考虑，而只要考虑这两种盒的区别就行了 
在普通布局中，block box 是从上至下，一个隔一个的布局的；inline box 则是从左至右（也可能因为设置了direction而从右到左，或者从上到下）首尾相接，不间断的布局的。
inline box 不响应垂直margin, width, height, max/min width/height 等属性声明；block box 则可以响应这些属性。
常用的基本上就这样了。
- display: block VS display: inline
最后一个有提到block 和inline 的地方就是这里了。和其他两个地方不同，block 和inline 并不是display 这个属性的唯一取值。CSS2.1规范中，display 属性的取值可以为以下的任何一个：inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit。
在通常情况下，display: block 能让元素生成一个block box, 而display: inline 会生成inline box。至于两者的区别请见上一节 
- 最后大家有兴趣的话
可以思考一下LI 元素到底是block level 还是inline 的哟~
那么，就到这里吧，大家下次见说 
0
投稿猜你喜欢
- 公司客户在使用网站后台编辑添加修改内容时，经常是直接从word文档里复制内容到编辑器里后就提交。结果是在内容显示页面上是五花八门的样式，有时
1、画直线的函数是cv2.linecv2.line函数语法：cv2.line(img,start_point,end_point,color- 多对多中间表详解我们都知道对于ManyToMany字段，Django采用的是第三张中间表的方式。通过这第三张表，来关联ManyToMany的
- 简单实现平面的点K均值分析，使用欧几里得距离，并用pylab展示。import pylab as pl#calc Euclid squire
- 之前，我介绍了学习安装并配置前端自动化工具Gulp，觉得gulp确实比grunt的配置简单很多，于是我决定再深入学习一下gulp，就去网上查
- 在使用Jupyter notebook时有这么一句代码start_frame = imread(“OwnCollection\vehicle
- 我的代码的哪些部分运行时间最长、内存最多？我怎样才能找到需要改进的地方？”在开发过程中，我很确定我们大多数人都会想知道这
- 起因事情是这样的，项目最近有个需求。服务器有个图片空间，说白了就是个文件夹。文件夹的结构大家都知道，一层一层的。然后需要在前端以树形展示。具
- 本文研究的主要是PyQt5主窗口动态加载Widget的代码示例，具体如下。我们通过Qt Designer设计两个窗口，命名为主窗口(Main
- 前言在Python中元组是一个相较于其他语言比较特别的一个内置序列类型。有些python入门教程把元组成为“不可变的列表”，这种说法是不完备
- 保存模型保存模型仅仅是为了测试的时候，只需要torch.save(model.state_dict, path)path 为保存的路径但是有
- 运行环境Python 2.7操作实例1.原始文本格式：空格分隔的txt,例如2016-03-22 00:06:24.4463094 中文测试
- 之前看到Amily的一篇文章，用Excel快速实现分列转到行的操做。数据源大致是这样的：基于此，我动起了一个念头：看看如何用Python快速
- on和where的区别多表查询语法结构：table_reference {[INNER] JOIN | {LEFT|RIGHT} [OUTE
- SQL Server2000中，如果数据库文件（非系统数据库文件）遇到错误的时候，我们该怎么办。以下是笔者以前的笔记。仅适用于非master
- 人脸图像特征提取方法（一）HOG特征提取1、HOG简介Histogram of Oriented Gridients，缩写为HOG，是目前计
- 1. 高级用法1.1. 错误处理执行任何操作后，如果发生任何错误，GORM将其设置为*DB的Error字段if err := db.Wher
- 动态展示这是一个动态图哦导读兄弟们可以收藏一下哦！情人节可以送出去，肥学找了几朵python写的花给封装好送给大家。不是多炫酷但是有足够的用
- 1.API接口:hello world 案例from flask import Flaskfrom flask_restful import
- 导言：在前面的第62章《GridView批量更新数据》里，我们用GridView控件里定制了一个批编辑界面，同样的我们也可以定制一个批添加界
