CSS盒子模型(Box Model)
什么是盒子模型
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin),边框(border),内边距(padding),和实际内容(content)。
模型分类
一、标准盒子模型
width就是concent的宽度,不包括padding margin border的长度
height就是concent的高度,不包括padding margin border的高度
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
二、ie盒子模型
width=concent+padding+border
注意:IE6/7/8比较怪异,在不写doctype的情况下使用ie盒模型。
如果在页面的头部使用了doctype声明,只要这行代码存在浏览器看到它后用W3C标准来标准盒模型渲染页面;如果没有这行代码,各个浏览器会按照自己的标准去使用不同的盒模型渲染。
><!--HTML5中的文档类型声明-->
<!DOCTYPE html >
box-sizing使用
值 | 描述 |
---|---|
content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
本质上,如下
box-sizing:content-box //W3C盒模型
box-sizing:border-box //IE盒模型
css盒子初始化
html {box-sizing: border-box;
}
*,*::before,*::after {box-sizing: inherit;}
CSS盒子模型(Box Model)相关推荐
- 教你吃透CSS的盒子模型(Box Model)
目录 CSS 盒子模型(Box Model) 元素的宽度和高度 浏览器的兼容性问题 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&q ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式...
CSS 框模型概述 术语翻译 element : 元素. padding : 内边距,也有资料将其翻译为填充. border : 边框. margin : 外边距,也有资料将其翻译为空白或空白边. 在 ...
- 详细认识一下CSS盒子模型
定义 CSS把每个元素看成是一个个单独的框,这里就叫它"元素框"吧.而CSS 盒子模型 (Box Model) 可以理解成一种规范,它规定了元素框处理其"最里边的内容区域 ...
- 初识HTML(五)进阶:CSS盒子模型、页面布局
目录 CSS 盒子模型(Box Model) 页面布局 浮动流 制作导航栏 如何页面布局 定位流 relative相对定位 absolute绝对定位 fixed固定定位 CSS 盒子模型(Box Mo ...
- CSS盒子模型和水平、竖直方向的布局
一.块元素.行内元素和行内块元素 行内元素特征: (1)设置宽高无效 (2)对margin仅设置左右方向有效,上下无效:padding设置上下左右都有效,即会撑大空间 (3)不会自动进行换行 块状元素 ...
- php盒子模型,CSS 盒子模型
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个 ...
- CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- CSS 盒子模型(Box model)中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
- css中盒子模型图片,CSS 盒子模型
盒子模型(Box Model) 一般的标签都是盒子,但是除了极个别的标签(例如:img.input标签)不是盒子 盒子模型的属性 width 盒子内容的宽度 height 盒子内容的高度 margin ...
最新文章
- Nginx中木马解决方法
- 挑战程序猿---三角形
- java Junit 为什么@Test注解里的方法必须是public void修饰的
- FreeMarker学习
- TensorFlow学习笔记之五(卷积神经网络)
- display:table和display:table-cell的妙用
- 如何在 ASP.NET Core 中实现全局异常拦截
- .sh文件怎么写_typeScript 配置文件该怎么写?
- java 调用foxmail_Javamail简单使用案例
- 微软:Excel 正成为开发者的终极武器!
- 工作的时候用到spring返回xml view查到此文章亲测可用
- Linux常用的基础组件
- 【机器学习】hist参数解读
- SAP系统环境整体架构设计总结
- Android逆向-实战so分析-某洲_v3.5.8_unidbg学习
- gcc环境配置时遇到的问题
- ES 排序,相关度和热度之间的平衡
- Windows Server 2008 安装VMware Tools
- 【Python】max()中key的使用
- Toasts官方教程
热门文章
- RegexBuddy图文使用教程
- 1.3.5 手写数字识别之资源配置
- Keil MDK 6 来了、C++即将超越C语言、LVGL 升级到 V8.3.8
- spoon-web网页版安装教程【kettle】
- Google测试之道 - 谷歌测试工具
- Vue项目中实现消息提示/报警/未读消息(铃铛加小圆点闪烁效果)
- TCP全双工、半双工理解
- java对比图片_Java实现图片比对-逐像素对比
- 解决 Closing root webapplication
- JavaMail(三)——发送HTML格式带附件的邮件