不让padding影响元素的宽度
CSS3 新增了 box-sizing 属性。
以前,如果指定 div 的宽度为
div {
width: 100px;
height: 100px;
padding: 10px;
}
则包含 padding,div 的实际宽度为 120px。
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width,从 CSS3 开始可以通过 box-sizing 来做到这一点。
div {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
}
则 div 的实际宽度为 100px。
不让padding影响元素的宽度的更多相关文章
- CSS3: box-sizing & content-box 属性---元素的border 和 padding 影响内容的 width 和 height解决方案
/* 关键字 值 */ box-sizing: content-box; box-sizing: border-box; /* 全局 值 */ box-sizing: inherit; box-siz ...
- 一个元素的宽度 及带padding,border,margin的各自情况
width() - 设置或返回元素的宽度 height() - 设置或返回元素的高度 innerWidth() - 返回元素的宽度(包含 padding) innerHeight() - 返回元素的高 ...
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...
- 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度
引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是lengt ...
- 使用jQuery获取元素的宽度或高度的几种情况
今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...
- CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- display:table的几个用法(元素平分宽度,垂直居中)
DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...
- pc端常见布局---水平居中布局 单元素不定宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JQuery--计算元素的宽度
/*width:只能计算元素的内容宽度 * innerWidth():可以获取元素的 内容+padding 的宽度 * outerWidth():可以获取元素的 内容+padding+border 的 ...
随机推荐
- jQuery 添加元素
jQuery 添加元素 1.append 在被选元素的结尾插入内容 $(document).ready(function(){ $("button").click(function ...
- IOS详解TableView——内置刷新,EGO,以及搜索显示控制器
内置刷新 内置刷新是苹果IOS6以后才推出的一个API,主要是针对TableViewController增加了一个属性,refreshControl,所以如果想用这个内置下拉刷新的话,最好给你的Tab ...
- console打印数组object具体内容
例如 var data=[ {}, {}, {} ] 需要打印出以上data中每个{}内容,可以使用如下方式: for(var i=0;i<data.length;i++) { var a = ...
- 【转】Vim十大必备插件
[转]Vim十大必备插件 转自:http://my.oschina.net/zhoukuo/blog/336315 Taglist taglist是一个用于显示定位程序中各种符号的插件,例如宏定义.变 ...
- Head First 设计模式 --9 迭代器模式 组合模式
迭代器模式:提供一种方法书序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 用到的设计原则:1.封装变化2.多用组合,少用继承|3.针对接口编程,不针对实现编程4.松耦合5.对扩展开放,对修改 ...
- SQL Syntax
1.limit 语法:限制查询记录,进行分页处理:select * from article limit 0,10;(从0号记录开始,依次取10条记录) 2.like 语法:查询指定字符串的相似匹配记 ...
- (转)PowerDesigner提示Existence of index、key、reference错误
建立一个表后,为何检测出现Existence of index的警告 A table should contain at least one column, one index, one key ...
- Java 类中各成分加载顺序 和 内存中的存放位置
参加一个笔试,有一个关于类的静态代码块.构造代码块.构造函数的执行顺序的问题.不太清楚,网上百度了一下.在这里记录一下. 一.什么时候会加载类?使用到类中的内容时加载:有三种情况1.创建对象:new ...
- json 递归查找某个节点
一段json可能有很多的子节点,需要查询到某一个节点 用到的js是 find-in-json.js 地址是:https://gist.github.com/iwek/3924925 貌似翻|||墙才能 ...
- shell变量赋值 不能有空格的原因
典型例子: a=date echo $a 成立 a =date echo $a 不成立 其实原因很简单 shell在解释命令时的原则是第一个符号标记只能是程序或者命令,有空格的时候第 ...