10.5 块级盒子模型(原盒子模型):两种盒子有什么不同?
时间:2022-07-28
本文章向大家介绍10.5 块级盒子模型(原盒子模型):两种盒子有什么不同?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
块级盒子模型(原盒子模型):两种盒子有什么不同?
什么是盒子模型?这是旧的叫法,新的叫法是CSS视觉格式化模型里面的块级盒子。
一个块级元素至少会生成一个块级盒子,但也有可能生成多个。所以在谈到盒子模型时,我们用块级盒子,代替块盒子,这样的描述更准确。
盒子示例:
行内盒子(inline box)、行内级盒子(inline-level box)
原子行内级盒子(atomic inline-level box)
块级盒子:block-level box,块盒子:block box
行内级盒子没有宽高,块级盒子有宽高。块级盒子因为有宽高,在布局中经常被用到。接下来我们看一下常见的块级盒子。
标准块级盒子
IE块级盒子
区别大于content的宽度定义不一样。
这与box-sizing样式有关,不同宿主环境box-sizing的默认值不同。
块级盒子3D立体示意图,及遮挡关系
2020年9月29日
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- hadoop 2.6伪分布安装
- ssh 免密码设置失败原因总结
- C++服务器开发之基于对象的编程风格
- The jQuery UI CSS Framework
- hadoop:将WordCount打包成独立运行的jar包
- Hadoop: MapReduce2多个job串行处理
- UE4新手引导之下载和安装虚幻4游戏引擎
- mac 下卸载mysql的方法
- ZooKeeper 笔记(1) 安装部署及hello world
- mybatis 使用经验小结
- ZooKeeper 笔记(2) 监听数据变化
- 使用C# 和Consul进行分布式系统协调
- 设置 java -jar 的进程显示名称
- 爱浪携手豆瓣内容、腾讯共同发布AI语音耳机
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法