CSS3实战之box-sizing

一般我们都认为border和padding都包含在width或height之内。

而现代标准的浏览器一般都认为width和height仅仅包含content,刨去了border和padding区域。

它有两个值可以取

1.content-box:width/height = border + padding + content

2.border-box: width/height = content

兼容性写法

.test{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
时间: 2024-12-24 09:44:32

CSS3实战之box-sizing的相关文章

《CSS3实战》笔记--渐变设计(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 Gecko引擎的CSS渐变设计 直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变

CSS3实战开发:手把手教你照片墙实战开发

在<CSS3 2D转换技术之translate实战开发>文章中,我给大家列出了CSS3中的2D转换方法: 1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.    matrix() 同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条.如果你对translate不了解或不是太熟悉,请阅读我的博文 <CSS3 2D转换技术之translate实战开发> . 在讲解知识点之前

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

《CSS3实战》笔记--弹性盒模型(三)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 box-pack和box-align属性 ??当弹性元素和非弹性元素混合排版时,有可能会出现所有子元素的尺寸大小或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况,这时就需要一种方法来管理盒子的空间.如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理. ??box-pack属性可以在水平方向上对盒子的富余空间进行管理,该属性的基本语法如下:

《CSS3实战》笔记--弹性盒模型(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间.注意,显示空间包括子元素的宽度和高度,而不只是子元素所在栏目的宽度,也可以说是子元素在盒子中所占的面积.该属性在弹性布局中非常重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端.box-flex属性的基本语法: box-flex:<number> 取值说明: <number>

【01】《响应式Web设计:HTML5和CSS3实战》

[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(非扫描版)(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局,用了一个例子来讲解.后半部分讲了一些CSS3的新属性.阴影,transform,transition等. [英]ben frain 著 王永强 译

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运行效果: 从上面的运行效果,大家不难发现,当我点击某一菜单时,导航区域会相应高亮显示此分类的图标,而其他图标则会变暗. 很多人可能会说,这个这么简单,直接使用javascript或jQuery等前端框架,再配合一些CSS,就可以很快实现同样的效果了.如果你是这一部分人,我也希望你停下脚步,看看这篇教程.因为在今天这篇教程中,我会用另一个思维方式来思考问题,我

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

《CSS3实战》笔记--选择器(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011. UI元素状态伪类选择器 ??UI元素的状态一般包括:可用.不可用.选中.未选中.获取焦点.失去焦点.锁定.待机等. 表单设计原则: ??UI设计的一个核心就是让表单更可用.易用和好用.表单设计应该符合三层模型,即表单应该具有三种属性:感知(页面显示的布局).对话(内容呈现的问题和回答).关系(交互的任务结构). ???????? 实战体验一:设计可用的表单 ??设计并实现简洁.美观.可