box-sizing(CSS3)
CSS3新增了盒模型box-sizing,属性值有下面三个:
| content-box | 默认值,让元素维持W3C的标准盒模型。元素的宽度/高度(width/height)= 元素内容框宽度/高度(content width/height),即:Element width/height = content width/height; |
| 在宽度和高度之外绘制元素的内边距和边框 | |
| border-box |
让元素维持IE6即以下版本盒模型。元素的宽度/高度(width/height)= 元素边框宽度(border)+ 内边距(padding)+ 元素内容框宽度/高度(content width/height),即: Element width/height = border + padding + content width/height; |
| 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制; | |
| 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 | |
| inherit | 规定应该从父元素继承box-sizing的属性。 |
兼容性:IE8+及其他主流浏览器均支持box-sizing。其中IE6及以下默认是以类似border-box盒模型来计算尺寸。
box-sizing(CSS3)的更多相关文章
- AOS – 另外一个独特的页面滚动动画库(CSS3)
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- 盒模型Box Model(浮动)
一.标准盒模型的大小:border+padding+content(width) 怪异盒模型大小:padding+border 二.display inline 默认,且变为行由内 ...
- Virtual Box 工具栏(菜单栏)消失的解决方法
异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 现在Virtual Box非常牛逼(不排除Oracle又准备像Java SE那样 ...
- 会动的大风车(css3)
今天用css3的写了一个会动的大风车,使用translate和rotate布局,使用animation制作动画效果:分享给大家 <!DOCTYPE html> <html lang= ...
- mac 环境下使用virtual box 虚拟机(win7)与主机之间互相ping通
首先选择virtual box设置网络连接方式为网桥 混杂模式设置为全部允许 如下图: 进入虚拟机把虚拟机IP设置和主机在一个网段.如主机是192.168.1.100虚拟机可以设置为192.168.1 ...
- 水平垂直居中div(css3)
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- Codeforces Round #228 (Div. 2) C. Fox and Box Accumulation(贪心)
题目:http://codeforces.com/contest/389/problem/C 题意:给n个箱子,给n个箱子所能承受的重量,每个箱子的重量为1: 很简单的贪心,比赛的时候没想出来.... ...
- radio与img对齐 (CSS3)
实现方式: html: <div class="pay-four"> <div class="pay-four-border"> < ...
- 笔记 — 动画效果(Css3)
/** * animation-name: 调用 @keyframes 所定义的动画 * animation-duration: 动画周期所花费的时间长度 * animation-timing-fun ...
随机推荐
- Cell Phone Networ (树形dp-最小支配集)
目录 Cell Phone Networ (树形dp-最小支配集) 题意 思路 题解 Cell Phone Networ (树形dp-最小支配集) Farmer John has decided to ...
- python协程详解
目录 python协程详解 一.什么是协程 二.了解协程的过程 1.yield工作原理 2.预激协程的装饰器 3.终止协程和异常处理 4.让协程返回值 5.yield from的使用 6.yield ...
- 用多个分隔符切分字符串---re.split()
问题/需求: 需要将字符串切分,但是分隔符在整个字符串中并不一致 (即:需要用多个分隔符切分字符串) str.split()方法不可行: 只支持单一分隔符,不支持正则及多个切割符号,不感知空格的数量 ...
- 图解Redis之数据结构篇——压缩列表
前言 同整数集合一样压缩列表也不是基础数据结构,而是 Redis 自己设计的一种数据存储结构.它有点儿类似数组,通过一片连续的内存空间,来存储数据.不过,它跟数组不同的一点是,它允许存储的数据 ...
- 详细分享TortoiseGit配置密钥的方法
详细分享TortoiseGit配置密钥的方法 TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.使用命令ssh-keygen -C "邮箱地址&q ...
- 【Java例题】8.1手工编写加法器的可视化程序
1. 手工编写加法器的可视化程序. 一个Frame窗体容器,布局为null,三个TextField组件,一个Button组件. Button组件上添加ActionEvent事件监听器ActionLis ...
- WebSphere MQ性能调优浅谈
导读:目前随着我们在中国的WebSphere MQ(MQSeries)用户数量越来越多,越来越多的用户开始对MQ使用时的性能优化问题提出要求,我根据日常积累的经验谈一谈在MQ性能优化方面应该考虑的因素 ...
- Java实现ZooKeeper的zNode监控
上一篇文章已经完成了ZooKeeper的基本搭建和使用的介绍,现在开始用代码说话.参考 https://zookeeper.apache.org/doc/current/javaExample.htm ...
- 使用rpm安装指定版本的docker(1.12.6)
一.原因 如果系统是Centos7.3,直接使用yum install docker安装的docker版本是1.13.1,导致在创建容器的会报错,错误如下: 所以为了防止安装高版本的docker引发的 ...
- 强化学习(Reinforcement Learning)中的Q-Learning、DQN,面试看这篇就够了!
1. 什么是强化学习 其他许多机器学习算法中学习器都是学得怎样做,而强化学习(Reinforcement Learning, RL)是在尝试的过程中学习到在特定的情境下选择哪种行动可以得到最大的回报. ...