CSS3 box-sizing 盒子布局
在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸,而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型,但对于表单form中的部分元素还是基于IE的怪异盒模型,如input里的radio、checkbox、button等元素,如果给其设置border和padding它们也只会往元素盒内延伸。
在W3C的标准模型下,宽度和高度仅仅包含了内容宽度,除去了边框和内边距两个区域,这样为web设计师处理效果带来了不少麻烦。为了解决这个问题,CSS3新增了一个盒模型属性box-sizing,能够事先定义盒模型的尺寸解析方式。
一般盒子的模式有两种:
1. content-box:仅包括content.即设置的width属性值仅为content的值。(box-sizing的默认值)
2. border-box:包括content+padding+border.设置的width的值是content+padding+border的值。
使用场景:
当一个容器宽度定义为 width:100%; 之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的
如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用,
特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了
CSS3 box-sizing 盒子布局的更多相关文章
- css3 flex弹性盒子布局梳理,打通任督二脉
挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...
- Flex box 弹性盒子布局
display: -webkit-flex 标识使用弹性布局 flex: num 占容器的比例 Flex等比划分 导航1 : Flex :1; 导航2 Flex: 2; ————&g ...
- CSS:CSS弹性盒子布局 Flexible Box
一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...
- CSS3总结五:弹性盒子(flex)、弹性盒子布局
弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- css3 深入理解flex布局
一.简要介绍 css3最喜欢的新属性之一便是flex布局属性,用六个字概括便是简单.方便.快速. flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性 ...
- Box Model 盒子模型
Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
随机推荐
- 抽象类 abstract class 接口
一.抽象类 1.没有具体的实例. 不可实例化,不能创建对象. 2.抽象类有构造器. 二.abstract 方法. 1.没有方法体. 子类必须重写抽象类的所有抽象方法,才能实例化,否则子类也为抽象类. ...
- Eslint报错的翻译
若在git中出现这个 http://eslint.org/docs/rules/eol-last 他是提醒你:在文件末尾要求或禁止换行 比如代码如下: 若在git中出现这个 https://eslin ...
- phpcms推送文章同时推送自定义字段
首先进入phpcms后台,模型管理-字段管理里,新建字段,新建字段必须是主表字段,如图所示 2 来到网站根目录,寻找phpcms\modules\content\classes\push_api.cl ...
- MySQL数据库操作语句(cmd环境运行)
一.开启MySQL服务器 1, 通过windows提供的服务管理器来完成 windows键+R 输入: services.msc 2.在本地服务中打开其服务 3.在DOC命令行下 net stop ...
- R语言均值,中位数和模式
R语言均值,中位数和模式 在R统计分析是通过用许多内置函数来执行的. 大多数这些函数是R基本包的一部分.这些函数需要R向量作为输入参数并给出结果. 我们正在讨论本章中的函数是平均数,中位数和模式. 平 ...
- SPSS统计基础-均值功能的使用
SPSS统计基础-均值功能的使用 均值过程计算一个或多个自变量类别中因变量的子组均值和相关的单变量统计.您也可以获得单因素方差分析.eta 和线性相关检验. 统计量.合计.个案数.均值.中位数.组内中 ...
- List.Sort 排序用法收集
使用Lambda表达式,实现代码如下: private static void SortByLambda() { List<Article> list ...
- linux下的OpenCV安装&学习笔记
http://www.linuxdiyf.com/viewarticle.php?id=20731 (本想在fedora下安装编译的,但目前opencv官网.sourceforge等网站都无法访问下载 ...
- springboot集成mongoDB 异常认证
1.springboot连接mongoDB 出现异常认证 异常详情: com.mongodb.MongoSecurityException: Exception authenticating Mong ...
- 解决 win10 pycurl安装出错 Command "python setup.py egg_info" failed with error code 10 编译安装包 安装万金油
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/yexiaohhjk/article/de ...