亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

CSS3 box-sizing屬性的應用

標簽:
CSS3

在一个文档中,每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']。
我们要设置某个元素的大小定位,肯定会和这四个元素打交道。只是元素的宽高计算有些默认值。
box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。
目前支持box-sizing的浏览器:

webp

支持box-sizing的浏览器


就目前来看,大部分人是建议在初始化样式的时候,就设置为border-box,这样更方便设置元素的宽高


* {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;
}

语法

box-sizing: content-box | border-box | inherit;

content-box
默认值,标准盒子模型。widthheight 只包括内容(content)的宽和高。在宽度和高度之外绘制元素的内边距和边框。

尺寸计算公式:
<font color=red>width = 内容的宽度。
height = 内容的高度。</font>

border-box
widthheight属性包括内容(content)、内边距(padding)、边框(border),但是不包括外边距(margin)。在宽度和高度之内绘制元素的内容、内边距和边框。

尺寸计算公式:
<font color=red>width = 内容的宽度 + 内边距的宽度 + 边框的宽度。
height = 内容的高度 + 内边距的高度 + 边框的高度。</font>

inherit
规定应该从父元素继承 box-sizing 属性的值

例子

chrome截图:

webp

box-sizing的使用案例



作者:weiqinl
链接:https://www.jianshu.com/p/b8a2c2978ccb

點擊查看更多內容
2人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消