文档章节

css 之 box-sizing

bosscheng
 bosscheng
发布于 2015/12/10 10:31
字数 140
阅读 43
收藏 0

适用范围:所有接收width和height的元素

默认值:content-box

取值:content-box | border-box

理解

  1. content-box: padding和border不被包含在定义的width和height里面,对象的实际宽度等于设置的width的只和border,padding之和, element width = width + border+padding

  2. border-box: padding和border包含在定义的width和height里面,对象的实际宽度就是width,即时定义了border和padding也不会改变对象的实际宽度,element width = width 

    ps: border-box属性表现为怪异模式下的盒模型


© 著作权归作者所有

共有 人打赏支持
bosscheng
粉丝 80
博文 302
码字总数 94883
作品 0
南京
前端工程师
关于padding值不包含在width里面的问题,可能和box-sizing有关

这个是w3school对box-sizing的解释: 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 border-box...

唐佳
2016/08/31
60
0
CSS3 Box-sizing了解盒子模型

一、HTML页面!DOCTYPE html document.compatMode: BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面 使用方法 html...

思悟修
2016/08/22
342
0
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
51
0
CSS3 用户界面

CSS3 用户界面 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。 在本章中,您将了解以下的用户界面属性: resize box-sizing outline-offset 浏览器支持 Firefox、...

wybo521
2016/01/25
7
0
为 oschina.net 创建两个 CSS Patches

/ Opera Patches / / patch generated for http://www.oschina.net/css/oschina.css?ver=20101101 / .SearchResults form .TXT { box-sizing: content-box; } / Webkit Patches / / patch ge......

李永波
2010/11/29
442
8

没有更多内容

加载失败,请刷新页面

加载更多

SpringData JPA 在解析实体类字段时驼峰自动添加下划线问题

SpringData JPA 使用的默认命名策略是: ImprovedNamingStrategy 。用下划线转换驼峰名,如 authorId ,转换成 author_id 。这样就遇到了一个问题:实体中驼峰命名的列名转换成下划线后,在M...

Jacktanger
3分钟前
0
0
Android JNI开发系列(十)JNI访问 Java 实例变量和静态变量

JNI访问 Java 实例变量和静态变量 Java 中的实例变量和静态变量,在本地代码中如何来访问和修改。静态变量也称为类变量(属性),在所有实例对象中共享同一份数据,可以直接通过类名.变量名来...

蔡小鹏
8分钟前
0
0
jsapi4加载的首个图层的范围被默认作为地图范围,且不能修改的解决

在map加载的第一个图层的图层范围(fullExtent),会被默认设置为map的全图范围,且不能更改,从一般地图控件角度来说,应该有fullExtent属性,作为地图的全图范围,但很遗憾jsapi4.9还没有 ...

canneljls
8分钟前
0
0
JSON.stringify()

JSON.parse()与JSON.stringify()的区别 JSON.parse()【从一个字符串中解析出json对象】 例子: //定义一个字符串 var data='{"name":"goatling"}' //解析对象 JSON.parse(data) 结果是: na...

废柴
8分钟前
0
0
HashSet

前言 Set的实现类都是基于Map来实现的(HashSet是通过HashMap实现的)。 构造图如下: 蓝色线条:继承 绿色线条:接口实现 正文 对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保...

狼王黄师傅
10分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部