css3的box-sizing--从此不用担心盒模型的不兼容
前段时间阿里的面试问了关于盒模型的东西,众所周知,ie和标准盒模型是有着区别的。面试官问有没有什么办法可以改变盒模型的显示效果。答案是css3的box-sizing:
其可以取三个值:
1、值content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。类似于标准盒模型
2、border-box
为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。类似于IE盒模型
3、inherit规定应从父元素继承 box-sizing 属性的值。
css3的box-sizing--从此不用担心盒模型的不兼容的更多相关文章
- css的盒模型手机端兼容写法应该是啥样的呢?
前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截 ...
- CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...
- CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
- CSS3 完善盒模型
CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式. 改善结构:为盒子新增轮廓区: 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除.换行处理:允许多重定义背 ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS3:box-sizing 怪异盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)
1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
- CSS布局定位基础-盒模型和定位机制
1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...
随机推荐
- JavaScript跨域总结与解决办法 什么是跨域
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- Asp.Net调用Office组件操作时的DCOM配置 (转)
Asp.Net调用Office组件操作时的DCOM配置 http://blog.csdn.net/gz775/article/details/6447758 在项目中将数据导出为Excel格式时出现“ ...
- Oracle 锁
select for update对某行加锁之后: select语句可以执行: select for update 这行不可以: 会一直等待锁释放 select for update wait 3 ...
- MySQL 异常错误码使用 及 对照表
DECLARE CONTINUE HANDLER FOR SQLWARNING, SQLEXCEPTION, NOT FOUND BEGIN GET DIAGNOSTICS CONDITION cod ...
- JSP简单标签标签库开发
1.定制标签的实现类称为标签处理器,简单标签处理器指实现SimpleTag接口的类,如下图的SimpleTagSupport类,该类为SimpleTag接口的默认实现类. 注:不要直接实现Simple ...
- position的absolute与fixed共同点与不同点
这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上 B不同点: absolute ...
- MP3拷贝程序---字节流
package cn.itcast.p7.io.bytestream.test; import java.io.BufferedInputStream; import java.io.Buffered ...
- A New Change Problem
题目链接 /* 给定两个互质的数,a,b,求这两个数不能表示的数的最大值和个数. 最大值=a*b-a-b; 个数 =(a-1)*(b-1)/2; */ #include <set> #in ...
- 完整版getByClass2016/4/20
function getByclass(parent,sclass) { var re=new RegExp('\\b'+sclass+'\\b','i') var aEli=parent.getEl ...
- opencv鼠标操作及GUI矩形绘画
OpenCV的鼠标操作是通过一个中介函数配合回调函数来实现的.指定鼠标操作消息回调函数的函数为SetMouseCallback. void setMouseCallback(const string& ...