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 ...
随机推荐
- iOS \'The sandbox is not sync with the Podfile.lock\'问题解决
iOS \'The sandbox is not sync with the Podfile.lock\'问题解决 HUANGDI 发表于 2015-02-27 09:51:13 问题描述: gith ...
- CSS样式 初学
CSS样式 参考网站: CSS用法:3种 一:直接样式表 如<p style="color:red;">这是一个段落</p> 二:内部样式表 如:<s ...
- Intersecting Lines POJ 1269
题目大意:给出两条直线,每个直线上的两点,求这两条直线的位置关系:共线,平行,或相交,相交输出交点. 题目思路:主要在于求交点 F0(X)=a0x+b0y+c0==0; F1(X)=a1x+b1y+c ...
- Trie/最短的名字
题目链接 /* 简单trie树的应用,注意在初始化的时候要把cnt也初始化,不然,WA! 下面的四分代码各有特点 */ //数组型,名字查询. #include<cstdio> #incl ...
- linker command failed with exit code 1 (use -v to see invocation)修改方法
它的意思是指文件丢失或者文件重复,你就要仔细查看项目中有没有重复的文件,如有重复修改即可,如果是文件丢失,那就麻烦啦!你需要根据报错的地方进行修补文件,最为直接的方法是重新创建项目.还有另外一种情况是 ...
- String Stringbuilder Stringbuffer的区别
String 字符串常量StringBuffer 字符串变量(线程安全)StringBuilder 字符串变量(非线程安全) 简要的说, String 类型和 StringBuffer 类型的主要性能 ...
- webstrom自定义代码块的设置方法
webstrom里面的自定义代码块叫做活动模版 在文件 -> 设置 -> 编辑器 -> 活动模版可以打开 里面的$var$ 代表一个变量 两个相同的$var$在不全后可以同时修改, ...
- [IDL入门] 两个PPT,IDL上手
首先看看IDL能干什么,<Solving Real Problems with Computer Graphics>ppt是英文的,很精彩. 下载地址:http://pan.baidu.c ...
- android 5.0新特性学习--RecyclerView
在过去很多年,我们的PC或者手机设备都是采用拟物化的设计风格,IOS采用扁平化的特性,android在2014年IO大会上说采用Material Design的设计风格,显示效果不能过于生硬的转换,而 ...
- Windows应用程序要点
一个完整的Windows应用程序除了WinMain函数外,还包含用于处理用户动作和窗口消息的窗口函数. Windows应用程序具有的一些特性: 消息驱动机制 图形设备接口(GDI) 基于资源的程序设 ...