不让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 的 ...
随机推荐
- [问题2015S01] 复旦高等代数 II(14级)每周一题(第二教学周)
[问题2015S01] 设 \(M_n(\mathbb{R})\) 是 \(n\) 阶实方阵全体构成的实线性空间, \(\varphi\) 是 \(M_n(\mathbb{R})\) 上的线性变换, ...
- JPA入门案例详解(附源码)
1.新建JavaEE Persistence项目
- [poj1200]Crazy Search(hash)
Crazy Search Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26713 Accepted: 7449 Descrip ...
- js蛋疼的Class(获取class对象)
之前处理class对象被迫用jquery,以为JavaScript不支持class.确实百度某些大神也说js不待见class对象,就这样本菜放弃了原生js. 今天偶然发现一片文章吐槽jquery拥抱J ...
- c语言指针占几个字节
指针即为地址,指针几个字节跟语言无关,而是跟系统的寻址能力有关,譬如以前是16为地址,指针即为2个字节,现在一般是32位系统,所以是4个字节,以后64位,则就为8个字节. 可以在自己的电脑上测试下: ...
- JQuery_简单选择器
jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性. jQuery选择器实现了 CSS ...
- git github 异常
git :版本控制工具 github:项目托管 git clone failed:git是否安装正确 github commit failed:github 是否账号 / 密码是否正确(密码错误也可以 ...
- jsonp 跨域 能返回数据但 无法返回成功问题
apihandler.ashx?callback=eqfeed_callback:1Uncaught SyntaxError: Unexpected token : 原因在于jsonp传的数据格式不一 ...
- Laravel 5 数据库迁移文件示例
php artisan make:migration create_stocks_table 在项目根目录执行上面的命令后,会在database/migrations目录下生成2016_06_03_1 ...
- tiny_cnn代码阅读(2)
上一篇讲了mse函数 , 这次gradient_descent_levenberg_marquardt @see ${root}/tiny_cnn/optimizer/optimizer.h 这个函数 ...