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 ...
随机推荐
- 【转载】CentOS 6.4下PXE+Kickstart无人值守安装操作系统
[转载]CentOS 6.4下PXE+Kickstart无人值守安装操作系统 转自:CentOS 6.4下PXE+Kickstart无人值守安装操作系统 - David_Tang - 博客园 http ...
- word project 2010破解
1.用这个工具提示失败: failed to inject memory Failed to inject memory!解决方法 浏览:6545 | 更新:2013-07-15 15:52 在激活o ...
- hadoop运行作业的脚本解析
#!/usr/bin/env bash # Licensed to the Apache Software Foundation (ASF) under one or more # contribut ...
- Spring Boot 系列教程6-全局异常处理
@ControllerAdvice源码 package org.springframework.web.bind.annotation; import java.lang.annotation.Ann ...
- Webkit之HTML解析
加载部分HTML文本(即主资源)后便可以开始解析HTML元素(对输入字节流进行逐字扫描,识别HTML元素),最后生成DOM树,本文只讲HTML解析. HTML解析部分时序图: 其中最为重要的过程是(1 ...
- 什么是dtd文件,为什么需要
DTD为英文Document Type Definition,中文意思为“文档类定义”.DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码.也许你会问它们居然有这样 ...
- sqlserver 2008 查看表描述,和表结构
sp_help sys_user sp_columns sys_user --表结构 THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , c ...
- UIImage+Scale
Scale a UIImage to any given rect keeping the aspect ratio Raw UIImage+Scale.m @implementation UI ...
- GameUnity 2.0 文档(二) 纸片人系统
本想快速的 把 之前写的类库,一股脑的 给大家 ,但又觉得,如 msdn那样的 文档,并不能给 初学者 所能接受. 因为 大部分人 对 api 还是比较陌生,也不愿意 去研究和组合. 那么 今天我选用 ...
- 完整版getByClass2016/4/20
function getByclass(parent,sclass) { var re=new RegExp('\\b'+sclass+'\\b','i') var aEli=parent.getEl ...