css3——新盒子定义box-sizing

css3对盒子有了新定义，以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 width(height)。

听起来非常符合逻辑了。其实想说本来就应该这样，每次布局要考虑 padding和border 真蛋疼。

看下效果

        *{padding:0px;margin:0px;}.box{box-sizing:border-box;width:100px;height:100px;border:2px solid #000;padding:5px 10px;}

这是js获取div实际的宽高。

box-sizing 一般用到两个值。

border-box：padding 和 border 不影响盒子实际尺寸。

content-box：盒子实际宽(高) = padding + width(height) + ( border * 2);

可以理解为以盒子为主尺寸（border-box），以内容为主尺寸（content-box）。

转载于:https://www.cnblogs.com/MirageFox/p/5973869.html

css3——新盒子定义box-sizing相关推荐

html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...
C++ 定义盒子的Box类，具有以下要求：可设置盒子的形状；可计算盒子的体积；可计算盒子的表面积
定义盒子的Box类,具有以下要求: 可设置盒子的形状: 可计算盒子的体积: 可计算盒子的表面积: #include<iostream> using namespace std; class ...
css3弹性盒子模型之box-flex（--）
今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然 ...
CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

css3——新盒子定义box-sizing

css3——新盒子定义box-sizing相关推荐

最新文章

热门文章