前段时间阿里的面试问了关于盒模型的东西,众所周知,ie和标准盒模型是有着区别的。面试官问有没有什么办法可以改变盒模型的显示效果。答案是css3的box-sizing:

其可以取三个值:

1、值content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。类似于标准盒模型

2、border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。类似于IE盒模型

3、inherit规定应从父元素继承 box-sizing 属性的值。

css3的box-sizing--从此不用担心盒模型的不兼容的更多相关文章

  1. css的盒模型手机端兼容写法应该是啥样的呢?

    前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截 ...

  2. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

  3. CSS3 盒模型---css初始化会用到:box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

  4. CSS3 完善盒模型

    CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式. 改善结构:为盒子新增轮廓区: 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除.换行处理:允许多重定义背 ...

  5. 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. CSS3:box-sizing 怪异盒模型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)

    1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...

  8. CSS 常用语法与盒模型分析

    CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...

  9. CSS布局定位基础-盒模型和定位机制

    1. 盒模型 2. 外边距合并 3. 定位机制 4. Float 5. Position:属性有哪些取值,它们的行为是什么? 无依赖绝对定位? 6. Display:常见属性值有哪些取值? 7. 对B ...

随机推荐

  1. PHP实现队列的原理

    关于的队列的介绍,我这里就不多讲了,随便百度一下都很多 用过laravel框架的童鞋都知道其自带队列功能,之前我很费解,PHP只是一个脚本,有超时机制 为什么能不停的去执行队列呢? 带着这个问题,在网 ...

  2. 使用WMware新建linux虚拟机

    使用WMware安装linux虚拟机的时候很多人搞不清楚使用什么适配器. 平时也看到很多误人子弟的观点,这里用事实说话. VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络 ...

  3. invalid stream header: 31323334

    记录一下,都配置好了之后,用java客户端设置key-value,在服务器get没有问题,然后再服务器端设置一个key-value,java客户端获取出错 转载一下网上同样问题的描述,以及解决方案 严 ...

  4. ignite中的消息使用实例

    消息很简单,跟其他的mq相仿,关键点: 一,添加监听,订阅主题 二,发送消息 写了一个简单的示例: Receiver.java package test.ignite.broadcast; impor ...

  5. js 判断提交表单

    <SCRIPT language=javascript> function check_book() { if(document.form1.Username.value=="& ...

  6. ElasticSearch — 集群搭建

    1.es需要java环境,故先检查java环境是否正常 2.下载elasticsearch安装包 http://www.elasticsearch.org/download/ 目前最新版本到1.4.0 ...

  7. Java类锁和对象锁实践(good)

    一.前言 之前对类锁和对象锁是否是互斥的不是太确定,因此决定编写相关的程序进行实践一下.编写前对相关定义约定约定如下: 1. 类锁:在代码中的方法上加了static和synchronized的锁,或者 ...

  8. 转:WebDriver进行屏幕截图

    例: 打开百度首页 ,进行截图 01 packagecom.example.tests;  02 importjava.io.File;  03 importorg.apache.commons.io ...

  9. HDU 5741 Helter Skelter

    离线处理+扫描线.题意很容易转化:若干个矩形形成并集,询问一些点是否在并集中? 官方题解不是这样做的....那种做法效率更高,暂时还不会.我这样是4500ms G++过的,C++TLE...... 区 ...

  10. Linux中java项目环境部署,简单记录一下

    这里只是简单的记录一下linux环境下面如何快速的搭配好环境,使你的项目能在linux环境上面运行. 很多时候,我们都是用windows环境进行配置调试的,而真正很多服务器都是在linux服务器上面的 ...