CSS3:box-sizing:不再为盒子模型而烦恼
题外话:
W3C奉行的标准,就是content-box,就是须要计算边框,填充还有内容的;可是就我个人而言,
比較喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);
盒子模型差异
盒子大小计算原理
W3C标准盒子 = (边框 + 填充 + 内容块大小) ,牵一发而动全身;
传统IE6盒子 = 总体宽高(边框,填充和随盒子大小而调整变化)
若是计算占用位置,两种盒子都要算上margin(边距)
简言之,W3C标准盒子是须要相加各种大小得到总体的宽高,而传统的IE6是从总体减去内在元素大小而达到调整效果
CSS3:box-sizing
box-sizing : content-box | border-box | inherit;,针对火狐的还有个padding-box,差点儿不用啊!!!
- content-box : 标准的W3C盒子模型
- border-box: 传统IE6的盒子模型
- padding-box: 眼下仅仅对火狐生效,也是减去适应..可是从padding開始
验证及效果
代码
简易代码,三个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
.demo1,.demo2,.demo3{
width:200px;
height:200px;
background-color: #2277AD;
margin:20px;
}
.demo1{
box-sizing: content-box;
border:30px solid #12D732;
padding:10px;
}
.demo2{
box-sizing: border-box;
border:30px solid #12D732;
padding:10px;
}
.demo3{
box-sizing: padding-box;
border:30px solid #12D732;
padding:10px;
}
</style>
</head>
<body>
<div class="demo1">
我是盒子内部的内容啊!!
</div>
<div class="demo2">
我是盒子内部的内容啊!!
</div>
<div class="demo3">
我是盒子内部的内容啊!!
</div>
</body>
</html>
效果图
- 标准模型的盒子大小(280X280) = 200 +10*2 + 30*2 — 相加效果
- 传统IE6盒子大小(200X200) = 120 + 10 * 2 + 30*2 — 减去效果
- 针对火狐的padding-box盒子大小(260X260) = 180 + 10*2 + 30*2 –减去效果从padding開始
总结
- 这个属性支持IE8+,其它浏览器基本都支持了(应该非常少人用非常老的FF,CHROME这些吧)
- 感觉border-box非常适合用来排版布局,由于不用操心内距填充这些导致盒子大于包裹层大小,导致换行,或者其它乱七八糟的问题
- 标准盒子也有他的优点,能够针对性的控制内容块的大小..非常仔细的做出调整,就是须要计算比較麻烦点
CSS3:box-sizing:不再为盒子模型而烦恼的更多相关文章
- CSS3学习笔记(2)-CSS盒子模型
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- 【css3网页布局】flex盒子模型
1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...
- CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
- 003：CSS三大重点之一：盒子模型
目录 1:盒子模型 2:边框: 2.1:合写 2.2:适用于:table系元素.边框合并 3:内边距 4:外边距: 4.1:盒子居中三大条件 4.2:外边距合并.外边距塌陷(父子嵌套)解决方法三种 前 ...
- 学习 day4 html 盒子模型
盒子模型 1.框模型 框:页面上所有元素都可以称为“框” 框模型:(BOX Model),又称盒子模型 定义框处理元素内容.内边距padding.外边距margin.边框的样式border 外边距ma ...
- css 盒子模型 以及 box-sizing属性
在标准的盒子模型下,css中 width,padding以及border的关系 关于css中的width和padding以及border的关系. 在css中,width和height指的是内容区域的宽 ...
- 0019 盒子模型（CSS重点）：边框、内外边距、布局稳定性、PS
typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
随机推荐
- jenkinsfile or pipline 实现微服务自动发布回滚流程
1 #!/usr/bin/env groovy Jenkinsfile node { //服务名称 def service_name = "**" //包名 def service ...
- Mac下CUDA开启及Tensorflow-gpu 1.4 安装
本文由@ray 出品,转载请注明出处. 文章链接:http://www.cnblogs.com/wolfray/p/8040694.html 在之前的文章中,笔者介绍了在Mac下安装Tensorfl ...
- 【深度学习笔记】（一）Mac下TensorFlow安装及环境搭建
本文由@ray 出品,转载请注明出处. 文章链接:http://www.cnblogs.com/wolfray/p/7828903.html 在学习了一段时间台大李宏毅关于deep learning ...
- ZUK 22(Z2131) 免解锁BL 免rec 保留数据 Magisk Xposed 救砖 ROOT ZUI 4.0.199
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...
- Appium Python API 汇总
最近在学习Python自动化,网络搜集而来,留着备用, 方便自己也方便他人.感谢总结的人! 1.contexts contexts(self): Returns the contexts within ...
- linux启动时开启screen
编辑/etc/rc.local 添加 su - ubuntu -c 'screen -dmS ss zserver -p /etc/config'
- mysql有关时间是问题
mysql中有关时间的类型 date/datetime/time/timestamp/year date:表示日期的类型,格式为:“yyyy-MM-dd” dateTime:表示日期时间的类型,格式 ...
- HDU_5734_数学推公式
题意:给一个向量W={w1,w2……,wn},和一个向量B,B的分量只能为1和-1.求||W-αB||²的最小值. 思路:一来一直在想距离的问题,想怎么改变每一维的值才能使这个向量的长度最小,最后无果 ...
- openstack——horizon篇
一.horizon 介绍: 理解 horizon Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashB ...
- 【webpack结合React开发环境配置】React开发环境配置之Webpack结合Babel8.x版本安装的正确姿势（Webpack最新版4.x结合Babel8.x环境配置步骤）
1. 安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org[使用淘宝镜像]2. 初始化package.json文件c ...