CSS之box-sizing
盒子模型是CSS中很重要的概念,它涉及到的无非就是内容(content)、填充(padding)、边框(border)、边界(margin)。但是从上两张图可以看出,盒子模型其实有两种类型:标准盒模型和IE盒模型。
标准盒模型
box-sizing: content-box;
标准盒模型的width组成:content(不包含 padding 和 border)
比如:你给一个div的宽度设为200px,那这个div实际的宽度其实是200px再加上padding和border的值(和是大于等于200px的)。
IE盒模型
box-sizing: border-box;
IE盒模型的width组成:content + 2 * padding + 2 * border
比如:你给一个div的宽度设为200px,那这个div内容的宽度其实只有200px减去 padding 和 border 的值。它实际宽度是小于或等于200px的。
对比总结
- box-sizing: content-box | border-box | inherit
- 他们的主要区别其实就是 width 包不包含 border 和 padding
- box-sizing 默认值是 content-box,即默认是标准盒子模型
CSS之box-sizing的更多相关文章
- CSS hover box
CSS hover box transition 踩坑指南, display: none; 作为初始状态,不会产生动画效果,必须设置 height: 0; 或 width: 0; 来实现隐藏! tra ...
- 【笔记】css基于box的一行时垂直方向居中,多行平均居中,多出部分还省略号代替
题目很长,其实他就是这样的: 看标题,一行的时候是这样的,在行中间 标题文字多的时候是这样的,变成2行,超出部分用省略号: 但是为了更好的兼容性,没有使用flex,使用的是box布局. 核心代码就是这 ...
- css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...
- css 3d box 实现的一些注意事项
Test1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 第二章 你第首个Electron应用 | Electron in Action(中译)
本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- css的初始化样式
一切为了敏捷开发: http://blog.sina.com.cn/s/blog_71ed1b870101a52w.html CSS初始化示例代码 /* css reset www.admin1000 ...
- Box Model,边距折叠,内联和块标签,CSSReset
一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
- Css 进阶篇
一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...
随机推荐
- Spark2.X管理与开发
==========第一篇:Scala编程语言========= 一.Scala语言基础 1.Scala语言简介 Scala是一种多范式的编程语言,其设计的初衷是要集成面向对象编程和函数式编程的各 ...
- Python入门(二)列表、字典、字符串、元组、集合
列表list什么是列表:Python内置的一种数据类型是列表,list是一种有序的集合,可以随时添加和删除其中的元素 创建List列表的方法 L = ['杨俊辰',‘啦啦啦’,'Tom'] empty ...
- Java程序设计的第一次作业1
- 关于vue中this.attr代替this.data.attr访问的原理
请看如下例子: var obj = { name:"zhuwei", age:18 } function Person(data){ this.data = data; } var ...
- LeGO-LOAM编译、运行
LeGO-LOAM Github 地址:https://github.com/RobustFieldAutonomyLab/LeGO-LOAM 相关依赖安装 1. ROS 2.GTSAM 下载gtsa ...
- jquery横向纵向鼠标滚轮全屏切换
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- 关于mfc学习小记(bug小记)
关于控件问题 基本上出错的都是类型不为LPCTSTR 解决方式: 1.字符串转换 _T(str) 例:_T("你说的都对") 关于button控件 按照老旧的方式为其关联函数中添加 ...
- C# List<string> to string
List<string> names = new List<string>() { "John", "Anna", "Moni ...
- UVa LA 4094 WonderTeam 构造 难度: 1
题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...
- 使用vagrant构建你们团队的开发环境
vagrant可以让团队快速搭建统一的开发环境. 搭建vagrant你需要准备三个东西: 1.vagrant安装包 . 2.virtualbox安装包. 3.打包后的vagrant虚拟环境镜像 (ln ...