box-sizing

box-sizing
•定义和用法
•box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
•语法
•box-sizing: content-box|border-box|inherit
•值描述
•content-box
•宽度和高度分别应用到元素的内容框。
•在宽度和高度之外绘制元素的内边距和边框。
•border-box
•为元素设定的宽度和高度决定了元素的边框盒。
•就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
•通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
•inherit 规定应从父元素继承 box-sizing 属性的值。

•浏览器支持
•Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
•Firefox 支持替代的 -moz-box-sizing 属性。

时间: 2025-01-02 18:03:30

box-sizing的相关文章

CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <

html样式初始化

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family:

h5 CSS RESET

/*! normalize.css v2.0.1 | MIT License | [git][4].io/normalize */       /* ==========================================================================        HTML5 display definitions        ============================================================

normalize.css可以对css初始化,不同浏览器可以统一初始样式

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font

用户界面Css属性

1:resize属性 div{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } resize 属性规定是否可由用户调整元素尺寸.当输入的元素超过输入框的宽度时候,自动出现滑动条,可以左右滑动. 2:Box Sizing属性:定义两个div并排 div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox

SublimeText3 生成html标签快捷键

Sublime Text生成html标签快捷键 mmet Documentation Syntax Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> Climb

这些HTML、CSS知识点,面试和平时开发都需要

No1.HTML 1.网页结构 网页结构一般都包含文档声明DOCTYPE,并且在head中的meta应该包含编码格式.关键字.网页描述信息.简单格式如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> </body> </html&

Normalize [ 浏览器渲染格式化 ]

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-tex

这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)

这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置.设置背景.数据列表) 这些HTML.CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作.构建表单) 这些HTML.CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作.代码编写规则)

compass模块

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表