CSS之box-sizing的用处简单介绍

标签: css box sizing | 发表时间:2014-08-17 06:41 | 作者:zsjangel
出处:http://blog.csdn.net

前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思,

通过指定容器的盒子模型类型,达到不同的展示效果

例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的




如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用,





特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了



作者:zsjangel 发表于2014-8-16 22:41:27 原文链接
阅读:0 评论:0 查看评论

相关 [css box sizing] 推荐:

CSS之box-sizing的用处简单介绍

- - CSDN博客推荐文章
前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思,. 通过指定容器的盒子模型类型,达到不同的展示效果. 例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的. 如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用,.

css核心-盒子模型(Box Model)整理

- - CSDN博客Web前端推荐文章
1、对盒子模型的不同解释.      这里IE6、IE8、IE9相同,火狐和谷歌、遨游等相同. 先说盒子模型,CSS将所有的HTML块元素都看成是一个盒子(box),每个盒子有以下几个组成部分:Content(内容)、Padding(补白)、Border(边框)、Margin(边界). 火狐谷歌等较新的的浏览器实行加法运算,“向外扩张”.

Fate/Zero分拆两季播出BD-BOX添加未删减版

- Adam - 和邪社
11月出版的Newtype报道,Fate/Zero的BC-BOX将包含有TVA中被删除的一些画面和镜头. 此外26集的Fate/Zero将分叉成两季来播出,理由就是为了保证作品的质量.

《虎與龍!》OVA動畫發表 將收錄於BD-BOX內

- qugougou - 瘾動漫
》官網的消息,將於2011年12月21日發售BD-BOX限定生產版,而且除了例牌的映像特典外,還將收錄全新製作的OVA動畫一集. 》還有新動畫出現,難道要補完fans的妄想. 収録時間:本編598分+映像特典. DISC1:第1話「虎と竜」、第2話「竜児と大河」、第3話「君の歌」、第4話「あのときの顔」.

Box of Bundles:免费的创意设计资源网站

- - TechWeb 新酷网站 RSS阅读
Box of Bundles 是一个免费提供创意设计资源的新网站. 类似酷站之前推荐过的免费的设计资源素材网站 Premium Pixels,都是免费提供素材下载. 与之不同的是 Box of Bundles 会以集合打包的形式定期更新高品质素材,为用户带来接连不断的惊喜. Box of Bundles 每一个设计资源包都包含了各种UI元素,例如图标、用于网站,手机界面和电子邮件的相关模板,CSS3 按钮和其它更多的精美素材.

CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解

- - 博客园_梦想天空
  《CSS3 经典教程系列》的前一篇文章向大家详细介绍了线性渐变(linear-gradient)的用法,今天本文介绍的盒阴影(box-shadow)是目前用得最多的 CSS3 特性之一. 盒阴影效果和圆角效果一样都是做成图片,直接编写  CSS 代码就可以实现. Web 开发人员和设计师必读文章推荐.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.