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 ...
最新文章
- 20位程序员关于求职的疑问,以及我给出的参考答案
- ASP.NET中常用的文件上传下载方法
- 一种更好的汇报性能测试结果的方法(译)
- 【matlab】零相位延迟滤波器
- 面试历程六:人真的有时候很奇怪
- 首届CSS开发者大会|七牛助力前端开发
- 笨办法学 Python · 续 练习 8:`cut`
- layuiadmin上手好难_孩子学什么乐器好?十种最受欢迎乐器的优劣势分析
- ****** 四 ******、软设笔记【数据结构】-排序、插入排序、选择排序
- 用python统计文章中单词出现的频次
- html判断图片资源是否存在,javascript怎么判断图片是否存在?
- MATLAB表示非线性系统,matlab非线性控制系统分析.ppt
- 编程英文单词的标准缩写
- jsp html5 模板,JSP标准模板库
- JMeter接口测试工具基础 — Badboy工具
- 贴片电阻、贴片电容的封装与其额定功率的关系
- “New”一个完美对象,再来好好面向对象
- Postman中tests的基本使用
- 2.1 分布式文件系统HDFS-使用
- Java中getBytes()方法--使用详解