详解47：box-sizing

1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后,记住，边框不算在内哈，记住，保持不变的是content哈, 盒子元素的宽度和高度不变2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>box-sizing</title><link rel="stylesheet" type="text/css" href="css/reset.css"/><style type="text/css">div{width:300px;height: 300px;padding:10px;margin:50px;border:5px solid red;}.box1{background-color: #abcdef;box-sizing:content-box;//content-box：padding和border不被包含在定义的width和height之内。所以总的是width+padding+border的和}.box2{background-color: #f80;box-sizing: border-box;/*border-box：padding和border被包含在定义的width和height之内，所以为content为270px，所以content+width+height=300px*/}.box3{background-color: #58a;box-sizing:padding-box;/*
padding-box，padding计算入width内，这里是记住，有些浏览器不兼容哈，总的为content+border，content里面包括了padding了*/}</style>
</head>
<body>
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div></body>
</html>

详解47：box-sizing相关推荐

softer-nms论文学习详解(Bounding Box Regression with Uncertainty for Accurate Object Detection)
<Bounding Box Regression with Uncertainty for Accurate Object Detection> 论文地址: https://arxiv.o ...
YOLO v2目标检测详解一box生成与转换
yolo v2会将图片切割成若干个大小为32*32 的小格子,因此,将图片传入时,图片的长和宽都必须是32的倍数,如下所示: 后面的内容中,如果没有说明,都是指的小格子.yolo v2中的box中的数 ...
DI Blackfin DSP处理器-BF533的开发详解47：图像处理专题-Resize (图像缩放处理)（含源码）
硬件准备 ADSP-EDU-BF533:BF533开发板 AD-HP530ICE:ADI DSP仿真器软件准备 Visual DSP++软件硬件链接功能介绍代码实现了图像缩放处理,代码运行时, ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
音视频解封装：MP4核心Box详解及H264AAC打包方案
问题背景: 上一篇文章<音视频封装:MP4结构概述和分析工具>让大家看了下MP4的主要结构和推荐了一些分析工具,如果你对MP4没有任何了解,还是先看上文,了解MP4的基本结构,其中还有许 ...
R语言基于forestplot包可视化森林图实战详解：美化的森林图：自定义字体设置、置信区间、坐标轴（刻度、标签、范围）、无效线去除、水平线、辅助线、box形状、色彩等
R语言基于forestplot包可视化森林图实战详解:美化的森林图:自定义字体设置.置信区间.坐标轴(刻度.标签.范围).无效线去除.水平线.辅助线.box形状.色彩等目录
Bounding box regression详解
Bounding box regression详解转载 http://blog.csdn.net/u011534057/article/details/51235964 Reference link ...
Cinder 组件详解 - 每天5分钟玩转 OpenStack（47）
Cinder 组件详解 - 每天5分钟玩转 OpenStack(47) 本节我们将详细讲解 Cinder 的各个子服务. cinder-api cinder-api 是整个 Cinder 组件的门户, ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...

详解47：box-sizing

详解47：box-sizing相关推荐

最新文章

热门文章