css border-sizing 用法与理解
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
支持 | 支持 | 支持 | 支持 | 支持 |
Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认值: | content-box |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxSizing="border-box" |
语法
box-sizing: content-box|border-box|inherit;
值 | 描述 |
---|---|
content-box |
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
css border-sizing 用法与理解的更多相关文章
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- 由css reset想到的深入理解margin及em的含义
由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
- CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
- 格式与布局 CSS阴影效果(Box-shadow)用法
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
- css变量的用法——(--cssName)
CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- css cursor url用法格式详解
css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
随机推荐
- Sqrt(x)——二分法,防越界
Implement int sqrt(int x). Compute and return the square root of x. 转自:http://blog.csdn.net/doc_sgl/ ...
- office2007/2010/2013输入公式的正确方式
博客中的文章均为 meelo 原创,请务必以链接形式注明本文地址 理工科的学生,写报告.写论文那面需要输入公式,过去大家常用的公式编辑器是mathtype,虽然功能强大,但输入极为不方便,输入个指数. ...
- nutch 抓取需要登录的网页
题记:一步一坑,且行且珍惜 最近接到任务,要利用nutch去抓取公司内部系统的文章,可是需要登录才能抓到.对于一个做.net,不熟悉java,不知道hadoop,很少接触linux的我,这个过程真是艰 ...
- loadrunner测试TCP协议服务器性能
loadrunner测试TCP协议服务器性能 . 性能loadrunner测试c 最近对服务器的性能感兴趣,于是开始研究了一阵子loadrunner如何做采用TCP协议交互的服务器的性能测试,对loa ...
- Nginx+PHP “No input file specified”错误的解决办法
配置官网商城php网站时候,界面报错“No input file specified” 原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件 ...
- PHP通过mysqli连接mysql数据库
数据库连接的天龙八步: 1.连接数据库 连接:mysqli_connect 2.成功与否判断 连接错误号:mysqli_connect_errno 连接错误信息:mysqli_connect_erro ...
- Bzoj1101 Zap(莫比乌斯反演)
题面 Bzoj 题解 先化式子 $$ \sum_{x=1}^a\sum_{y=1}^b\mathbf f[gcd(x,y)==d] \\ = \sum_{x=1}^a\sum_{y=1}^b\sum_ ...
- Bzoj3942 Censoring(KMP)
\(KMP\)问题的核心在于数组\(next\)(或者\(pre\)/\(fail\),各种叫法),几乎所有的此类型题都是需要计算\(next\)的. 这里解释一波\(next\):即满足字符子串\( ...
- BestCoder Round #65 (ZYB's Game)
ZYB's Game Accepts: 672 Submissions: 1207 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536 ...
- BZOJ 3171 [Tjoi2013]循环格(费用流)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3171 [题目大意] 一个循环格就是一个矩阵,其中所有元素为箭头,指向相邻四个格子. 每 ...