box-sizing布局学习笔记
首先学习box-sizing布局之前,来了解一下css盒子模型(Box Model)
盒子模型(Box Model)
一般来说,css盒子模型有两种模式:
- W3C的标准模型 相当于 box-sizing:content-box
我们对元素设置的宽度和高度就是内容(content)的宽度和高度,也就是内盒子的宽度;外盒子的宽度包括:content+padding+border的
- IE的传统模型 相当于box-sizing:border-box
这个模型下,我们设置的宽度和高度是包括:content+padding+border的,此时这个宽度和高度,相当于我们在W3C模型下面的宽度和高度。其内容的宽度比我们设置的宽度要小的。
box-sizing:content-box
默认值,标准的盒模型,width和height只包括内容(content)的宽度和高度,不包括border,padding,margin,这些都是盒子的外部。
ps:当我们设置好了宽度和高度的时候,其外盒子的宽度和高度基本上就定了,当我们想在内容(content)外面设置padding和margin或者border时,非常容易破坏我们的布局,此时我们就需要想到box-sizing:border-box
box-sizing:border-box
这个模式下,当我们设置了盒子宽度和高度的时候,其包括:content+padding+border,但是不包括margin。
ps如果计算的content的内容宽度为负值,其都会被计算为0,内容还在,故不能通过border-box来隐藏元素。元素的内容宽度和高度是在我们设置的宽度和高度的里面渲染的。当我们想给元素添加border或者padding时,这个模型不会破坏我们的布局,因为其会适当的调整我们内容content的宽度和高度来满足。故可以用来设置自适应布局
案例:box-sizing三栏布局
html代码:
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
cssd代码:
div{
height: 600px;
float: left;
}
.left{
width: 25%;
background: #000000;
}
.mid{
/*默认是box-sizing:content-box*/
box-sizing: content-box;
width: 50%;
background: #ff00ff;
}
.right{
width: 25%;
background: #ffff00;
}
当我们试着给粉红色加上border的时候,你会发现,黄色掉下去了,因为此时的宽度正好是body的100%,其是标准的盒子模型。但是我们一定要给中间的加上padding,那咋办?此时我们可以给中间的添加:
> box-sizing:border-box
之后,再去给中间的加上padding就可以了,不管我们怎么设置padding的大小,其布局依然完好。
box-sizing的另外一个作用是在表单元素上面调整布局,因为我们的表单元素还有一部分是IE的传统盒子模型,详情参考:W3Cplus
欢迎访问我的github
相关文章
- Spark2.x学习笔记:Spark SQL程序设计
- 【JVM笔记】类加载机制详解(全盘负责委托机制和双亲委派机制 )
- Haskell 学习笔记-03:函数式编程与量子计算
- Symfony2 学习笔记之插件格式
- [计算机视觉][神经网络与深度学习]R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- Prometheus监控学习笔记之Prometheus中step或resolution的含义
- Maven学习笔记之Mac环境下安装和配置Maven
- ELK学习笔记之Elasticsearch和Kibana数据导出实战
- Web安全学习笔记之DES算法实例详解
- SNMP学习笔记之Linux下安装和配置SNMP
- SNMP学习笔记之SNMPv3报文认证和加密
- Java学习笔记之MyEclipse 2017 CI 7、CI 8、CI 9和CI 10的安装与激活
- SQL学习笔记之B+树的几点总结
- Redis学习笔记之Redis单机,伪集群,Sentinel主从复制的安装和配置
- SQL学习笔记四(补充-1-1)之MySQL单表查询补充部分:SQL逻辑查询语句执行顺序
- pytorch学习笔记(九):PyTorch结构介绍
- Figma 学习笔记 – Variants
- 数据结构课上笔记11
- 删除-ARMV8-V9-ATF-FFA学习笔记目录-2021-08
- 【Java笔记】File类与IO流(另添加NIO2使用)
- 前端笔记(6) Vue3 dialog弹窗 父子组件之间传值及方法调用
- HTML学习笔记——各种居中对齐
- Unity_TA美术向(庄懂)课程学习笔记
- Unity ECS 案例学习笔记
- Bootstrap学习笔记(一) 排版
- [.NET] 《Effective C#》快速笔记(三)- 使用 C# 表达设计
- Vue.js 2.x笔记:服务请求axios(8)
- 【Big Data - Hadoop - MapReduce】hadoop 学习笔记:MapReduce框架详解
- vue-router2学习实践笔记(附DEMO)
- cmake 学习笔记(三)