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 ...
随机推荐
- MULE-ET0 、 ET1、ET2、PT1、PT2
设计验证阶段中的五个样车试制概念 骡子车( mule car ) ET0 第一轮设计工程样车试制 ET1 第二轮设计工程样车试制 ET2 第一轮产品工装样车试制 PT1 第二轮产品工装样车试制 PT2 ...
- **ERROR: Ninja build tool not found.
| if which ninja-build ;\| then \| ln -s `which ninja-build` bin/ninja ;\| else \| echo "***ERR ...
- c++ map unordered_map
map operator<的重载一定要定义成const.因为map内部实现时调用operator<的函数好像是const. #include<string> #include& ...
- Android OpenGL ES(九)绘制线段Line Segment .
创建一个DrawLine Activity,定义四个顶点: float vertexArray[] = { -0.8f, -0.4f * 1.732f, 0.0f, -0.4f, 0.4f * 1.7 ...
- Spring Boot 系列教程9-swagger-前后端分离后的标准
前后端分离的必要 现在的趋势发展,需要把前后端开发和部署做到真正的分离 做前端的谁也不想用Maven或者Gradle作为构建工具 做后端的谁也不想要用Grunt或者Gulp作为构建工具 前后端需要通过 ...
- ShellExecute快捷键大全
文件夹,文件,网址可以创建快捷方式,控制面板 中的设置也可以创建快捷方式,下面是快捷方式的命令,使用方法:在桌面或文件夹的空白处点右键,选择新建,快捷方式,在"请键入项目的位置"输 ...
- php sso 单点登录的实现 代码示例
先说一下这样做的好处吧,先来三个屌丝域名: www.openpoor.com myspace.openpoor.com passport.openpoor.com 大家都知道,虽然他们都是一个域名但主 ...
- ARC属性中还能使用assign,copy,retain这些关键字吗
http://blog.sina.com.cn/s/blog_6531b9b80101c6cr.html 很早以前比较弱,网上不知道哪里看了篇博文,留下了ARC属性中不能使用retain关键 ...
- [转]java构造方法的访问修饰符
http://my.oschina.net/u/1464678/blog/210359 1. 类(class) 可见性修饰符: public—在所有类中可见,在其他包中可以用import导 ...
- java 常见异常总结
异常1:java.util.NoSuchElementException: No line found 原因:Java 是顺序执行的 你执行到.close() 后就代表 你关闭了 流,你再去调用已经被 ...